文章目录
JavaScript 简介
avaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
Javascript的引入方式
第一种:外部引入:js代码块出现在外部js文件中,需要通过script标签src属性进行链接。
<script type="text/javascript" src="路径/文件名.js"></script>
第二种:内部引入:js代码块需要出现在script标签中。
<script type="text/javascript">js代码</script>
第三种:行内引入:js代码块需要出现在事件中 。
<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');">
三种方式不存在优先级,谁在逻辑下方,谁起作用。
Javascript的语法
注释
// 单行注释
/*
多行注释
*/
变量
变量名的命名规范:
可以由字母,数字,_,$组成,但是不能以数字开头(可以包含中文,采用小驼峰命名法);区分大小写;不能与关键字保留字重名。
声明方式:
1、使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量。
var lin='这是一个全局变量';
function test() {
var wow='这是一个局部变量';
}
2、没有使用var,直接给标识符test赋值,这样会隐式的声明了全局变量test。即使该语句是在一个function内,当该function被执行后test变成了全局变量。
lin='这是一个全局变量';
function test() {
wow='这也是一个全局变量';
}
3、使用window全局对象来声明,全局对象的属性对应也是全局变量。
window.test = '利用window声明的全局变量';
ES6新增了let命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。
for (let i=0;i<arr.length;i++){...}
JavaScript有一些保留字,不能用作标识符:
arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
另外,还有三个词虽然不是保留字,但是因为具有特别含义,也不应该用作标识符:Infinity、NaN、undefined。
常量
const也是ES6中新增的命令,const用于修饰常量,定义的变量不可修改,而且必须初始化,声明位置不限(通常声明在js开头)
const linwow = "这是测试常量";
alert(linwow);
linwow = "我要改变常量值"; //报错无法修改
输出数据
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
var wow='hello javascript';
alert(wow);
- 使用 document.write() 方法将内容写到 HTML 文档中。
var wow='hello javascript';
document.write(wow);
- 使用 console.log() 写入到浏览器的控制台。
var wow='hello javascript';
console.log(wow);
数据类型
JavaScript的数据类型有:字符串(String)、数值(Number)、布尔(Boolean)、数组(Array)、空(Null)、未定义(Undefined)。在JavaScript中,我们可以用typeof运算符来确定一个值到底是什么类型。
12 //数字
1.2 //小数
"hello world" //字符串
true //布尔值
null //空
JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "linWoW"; // 现在 x 为字符串
字符串
字符串可以是引号中的任意文本,可以使用单引号或双引号。
属性和方法
- length属性:length属性返回字符串的长度。
- charAt():charAt方法返回指定位置的字符,参数是从0开始编号的位置。如果参数为负数,或大于等于字符串的长度,charAt返回空字符串。
- charCodeAt():charCodeAt方法返回给定位置字符的Unicode码点(十进制表示)
- concat():用于连接两个字符串,返回一个新字符串,不改变原字符串。该方法可以接受多个参数,如果参数不是字符串,concat方法会将其先转为字符串,然后再连接。
- slice():用于从原字符串取出子字符串并返回,不改变原字符串。它的第一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。如果省略第二个参数,则表示子字符串一直到原字符串结束。如果参数是负值,表示从结尾开始倒数计算的位置,即该负值加上字符串长度。如果第一个参数大于第二个参数,
slice
方法返回一个空字符串。 - substring():用于从原字符串取出子字符串并返回,不改变原字符串。方法的第一个参数表示子字符串的开始位置,第二个位置表示结束位置。如果省略第二个参数,则表示子字符串一直到原字符串的结束。如果第二个参数大于第一个参数,substring方法会自动更换两个参数的位置。
- substr():用于从原字符串取出子字符串并返回,不改变原字符串。方法的第一个参数是子字符串的开始位置,第二个参数是子字符串的长度。如果省略第二个参数,则表示子字符串一直到原字符串的结束。如果第一个参数是负数,表示倒数计算的字符位置。如果第二个参数是负数,将被自动转为0,因此会返回空字符串。
- indexOf(),lastIndexOf():这两个方法用于确定一个字符串在另一个字符串中的位置,都返回一个整数,表示匹配开始的位置。如果返回-1,就表示不匹配。两者的区别在于,indexOf从字符串头部开始匹配,lastIndexOf从尾部开始匹配。
- trim():用于去除字符串两端的空格,返回一个新字符串,不改变原字符串。该方法去除的不仅是空格,还包括制表符(\t、\v)、换行符(\n)和回车符(\r)。
- toLowerCase(),toUpperCase():用于将一个字符串全部转为小写,toUpperCase则是全部转为大写。它们都返回一个新字符串,不改变原字符串。
- localeCompare():方法用于比较两个字符串。它返回一个整数,如果小于0,表示第一个字符串小于第二个字符串;如果等于0,表示两者相等;如果大于0,表示第一个字符串大于第二个字符串。
- match():用于确定原字符串是否匹配某个子字符串,返回一个数组,成员为匹配的第一个字符串。如果没有找到匹配,则返回null。
- search():用法等同于match,但是返回值为匹配的第一个位置。如果没有找到匹配,则返回-1。
- replace():用于替换匹配的子字符串,一般情况下只替换第一个匹配(除非使用带有g修饰符的正则表达式)。
- split():按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。
数值
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。极大或极小的数字可以通过科学计数法来书写。NaN用来表示非数字值,不等于任何值包括它自己。isNaN方法可以用来判断一个值是否为NaN。
布尔
布尔(逻辑)只能有两个值:true 或 false,都是小写。""(空字符串)、0、null、undefined、NaN都是false。
数组
数组用[]来定义,数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推
Undefined 和 Null
-
undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
-
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 name=null;
null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。
函数
在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。
函数定义:
function命令
function func()
{
函数内代码
}
函数表达式
var func = function(x){
console.log(x);
}
通过Function()构造函数来定义
var func=new Function('x','y','return x+y');
等价于:
var func=function(x,y){
return x+y;
}
立即执行函数
(function(x, y){
return x + y;
})(1, 2);
使用“箭头”(=>)定义函数
var f = v => v;
// 等同于
var f = function(v){
return v;
}
如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
}
函数声明语句也会“被提前”到外部脚本或外部函数作用域的顶部,所以以这种方式声明的函数,可以被在它定义之前出现的代码所调用。
f1()
function f1(){
console.log('linwow')
}
上面的代码不会报错。
f();
var f = function (){
console.log('linwow')
};
// TypeError: f is not a function
函数的参数
function add(a,b){
console.log(a+b);
console.log(arguments.length);
console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
}
add(1,2)
输出:
3
2
1
函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。
函数作用域
作用域(scope)指的是变量存在的范围。Javascript只有两种作用域:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。 在函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。
流程控制
if-else
var a = 10;
if (a > 5){
console.log("yes");
}else {
console.log("no");
}
if-else if-else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
switch
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
for
for (var i=0;i<10;i++) {
console.log(i);
}
while
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
三元运算
var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
对象
对象是一种复合值:它将很多值集合在一起,可通过名字访问这些值。对象也可看做一种无序的数据集合,由若干个“键值对”(key-value)构成。对象的所有键名都是字符串,所以加不加引号都可以。如果键名是数值,会被自动转为字符串。
var obj={
lin:'wow'
}
创建对象
对象直接量: var obj={};
关键字new: var obj=new Object();
Object.create()函数: var obj=Object.create(null)
属性
对象的每一个“键名”又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。
读取对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。
var obj = {
func: function(x){
return x+1;
}
};
obj.func(2)
输出:3
通过Object.keys方法可以查看一个对象本身的所有属性。
var obj = {
name:'linwow',
age:20
};
Object.keys(o) //['name','age']
delete运算符可以删除对象的属性。delete运算符只能删除自有属性,不能删除继承属性。删除一个不存在的属性,delete不报错,而且返回true。只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。
var obj = {
name:'linwow',
age:20
};
delete o.name //true
Array 对象
对象方法
方法 | 描述 |
---|---|
concat() | 连接两个或更多的数组,并返回结果。 |
every() | 检测数组元素的每个元素是否都符合条件。 |
filter() | 检测数组元素,并返回符合条件所有元素的数组。 |
indexOf() | 搜索数组中的元素,并返回它所在的位置。 |
join() | 把数组的所有元素放入一个字符串。 |
lastIndexOf() | 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。 |
map() | 通过指定函数处理数组的每个元素,并返回处理后的数组。 |
pop() | 删除数组的最后一个元素并返回删除的元素。 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reverse() | 反转数组的元素顺序。 |
shift() | 删除数组的第一个元素。 |
slice() | 选取数组的的一部分,并返回一个新数组。 |
some() | 检测数组元素中是否有元素符合指定条件。 |
sort() | 对数组的元素进行排序。 |
splice() | 从数组中添加或删除元素。 |
toString() | 把数组转换为字符串,并返回结果。 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
valueOf() | 返回数组对象的原始值。 |
Date(日期) 对象
Date 对象用于处理日期与时间,创建 Date 对象: new Date().
以下四种方法同样可以创建 Date 对象:
var d =new Date();
var d =new Date(milliseconds);
var d =new Date(dateString);
var d =new Date(year, month, day, hours, minutes, seconds, milliseconds);
对象方法
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
setTime() | setTime() 方法以毫秒设置 Date 对象。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
toJSON() | 以 JSON 数据格式返回日期字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleString() | 据本地时间格式,把 Date 对象转换为字符串。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串。 |
UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
valueOf() | 返回 Date 对象的原始值。 |
Math 对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
方法
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值。 |
acos(x) | 返回 x 的反余弦值。 |
asin(x) | 返回 x 的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 Ex 的指数。 |
floor(x) | 对 x 进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 把数四舍五入为最接近的整数。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
RegExp 对象
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
或者更简单的方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
修饰符
修饰符用于执行区分大小写和全局匹配:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
JSON对象
var str1 = '{"name": "linwow", "age": 20}';
var obj1 = {"name": "linwow", "age": 20};
// JSON字符串转换成对象
var obj = JSON.parse(str1);
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);