严格模式

概念

理解:ES5中添加的运行模式:“严格模式”(strict mode),该模式下javascript在更严格的语法条件下运行

目的

  • 消除js中语法的不合理,不严谨的地方
  • 消除代码不安全之处
  • 为未来新的js版本做铺垫

使用

  • 针对整个脚本文件:将use strict 放在整个脚本文件的第一行,则整个脚本文件将以严格模式运行。
  • 针对单个函数:将use strict放在函数体的第一行,则整个函数以严格模式运行。

语法和行为改变

  • 必须使用var声明变量
  • 禁止自定义的函数中的this指向window
  • 对象不能有重名的属性

严格模式和普通模式的区别

仅列举一部分

全局变量显式声明

在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。在严格模式中禁止使用这种用法,全局变量必须显式声明。

禁止this关键字指向全局对象:

1
2
3
4
var foo =function(){
console.log(this);
}
foo();

上方代码中,普通模式打印的是window,严格模式下打印的是undefined。

构造函数必须通过new实例化对象

构造函数必须通过new实例化对象,否则报错。因为this为undefined,此时无法设置属性。

1
2
3
4
var Cat = function(name){
this.name = name;
}
Cat('haha');

上方代码,在严格模式下会报错。

属性相关

普通模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。

普通模式下,如果有函数有多个重名的参数,可以用arguments[i]读取,严格模式下,多个重名参数属于语法错误。

1
2
3
4
var obi ={
username:'smyh';
username:'vae'
}

上述代码,在严格模式下属于语法错误,因为有重名的属性。

函数必须声明在顶层

严格模式只允许在全局作用域或函数作用域的最顶层声明函数,也就是说,不允许在非函数的代码块内声明函数。

新增关键字

严格模式新增保留字:

implements,interface,let,package,private,protected,public,static,yield。

JSON对象

json对象转化

  • js对象(数组)–> json对象(数组)

    1
    JSON.stringfy(obj/arr)
  • json对象(数组)–> js对象(数组)

    1
    JSON.parse(json)

    上面两种方法是ES5中提供的。

    我们常说的JSON字符串只有两种:json对象,json数组。

    typeof json字符串的返回值是String。

Object的扩展

ES5给Object扩展了一些静态方法,常用的有2个。

  • 方法一
1
Object.create(prototype,[descriptors])

作用:以指定对象为原型,创建新的对象,同时,第二个参数可以为新的对象添加新的属性,并对此属性进行描述。

example1:(没有第二个参数)

1
2
3
4
5
var obj1 ={username:'smyhvae',age:26};
var obj2 ={address:'shenzhen'};

obj2=Object.create(obj1);
console.log(obj2);

结果:obj1成为了obj2的原型

example2:(有第二个参数时)

第二个参数可以给新的对象添加新的属性,我们修改上面的代码,尝试给obj2添加新属性sex

1
2
3
4
5
6
7
8
9
10
11
var obj1={username:'smyhvae',age:26};
var obj2={address:'shenzhen'};
obj2=Object.create(obj1,{
sex:{
value:'男'
writable:false,
configurable:true,
enumerable:true
}
});
console.log(obj2);

上方代码中,我们通过第5行的sex给obj2设置了一个新的属性sex

但是要通过value来设置属性(第6行)。

设置完属性值后,这个属性值默认是不可修改的,要通过writable来设置。总而言之,这几个关键字解释入下:

  • value:设置属性值
  • writable:标识当前属性值是否可修改 ,如果不写的话,默认为false,不可修改。
  • configurable:标识当前属性是否可以被删除,默认为false,不可删除。
  • enumerable:标识当前属性是否能用for in 枚举。默认为false,不可。

单独设置属性

1
2
3
4
5
6
Object.defineProperty(obj2,'sex',{
value:'cc',
writable:true,
configurable:true,
enumerable:true,
})
  • 方法二

这个方法有点难理解

1
Object.defineProperties(object,descriptors)

作用:为指定对象定义扩展多个属性。

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var obj2={
firstname:'smyh',
lastname:'vae'
};
Object.defineProperties(obj2,{
fullName:{
get:function(){
return this.firstName+'-'+this.lastName
},
set:function(data){
var names = data.split('-');
this.firstName=names[0];
this.lastName=names[1];
}
}
});
console.log(obj2.fullName);
obj2.firstName='tim';
obj2.lastName='duncan';
console.log(obj2.fullName);
obj2.fullName='kobe-bryant';
console.log(obj2.fullName);
  • get: 用来获取当前属性值的回调函数
  • set:修改当前属性值得触发的回调函数,并且实参即为修改后的值

Object的扩展(二)

obj对象本身就自带了两个方法。格式如下:

1
2
get 属性名(){}用来得到当前属性值的回调函数
set 属性名(){}用来监视当前属性值变化的回调函数

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj={
firstName:'kobe',
lastNmae:'bryant',
get fullName(){
return this.firstName+''+this.lastName
},
set fullName(data){
var names=data.split('');
this.firstName=names[0];
this.lastName=names[1];
}
};
console.log(obj.fullName);
obj.fullName='curry stephen';
cosnole.log(obj.fullName);

数组的扩展

下面的方法都是给数组的实例用的

方法一

1
Array.prototype.indexOf(value)

作用:获取value在数组中的第一个下标。

方法二

1
Array.prototype.lastIndexOf(value)

作用:获取value在数组中的最后一个下标。

方法三:遍历数组

1
Array.prototype.forEach(function(item,index){})

方法四

1
Array.prototype.map(function(item,index){})

作用:遍历数组返回一个新的数组,返回的是加工之后的新数组。

方法五

1
Array.prototype.filter(function(item,index){})

作用:遍历过滤出一个新的子数组,返回条件为true的值。

函数function的扩展:bind()

ES5中新增了bind()函数来改变this的指向。

1
Function.prototype.bind(obj)

作用:将函数内的this绑定为obj,并将函数返回。

面试题:call()、apply()和bind()的区别:

  • 都能改变this的指向
  • call()\apply()是立即调用函数
  • bind():绑定完this后,不会立即调用当前函数,而是将函数返回因此后面还需要再加()才能调用。

PS:bind()传参方式和call()一样。

分析

为什么ES5中要加入bind()方法来改变this的指向呢?因为bind()不会立即调用当前函数。

bind()通常使用在回调函数中,因为回调函数并不会立即调用。如果你希望在回调函数中改变this,不妨使用bind()。

ES6的环境配置 (为了兼容ES5)

掌握ES6之后,如果要考虑ES5的兼容性,可以这样做:写ES6语法的JS代码,然后通过Babel将ES6转换为ES5。

但是,在这之前,我们需要配置一下相关的环境。

建立工程目录

  1. 先建立一个空的工程目录ES6Demo,并在目录下建立两个文件夹src和dist:
    • src:书写ES6代码,我们写的js程序都放在这里。
    • dist:利用Babel编译生成的ES5代码。我们在HTML页面需要引入dist里的js文件
  2. 在src里创建新建文件index.html:
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scalej=1.0">
<meta http-equiv="X-UA-Compatible" content="iek=edge">
<title>Document</title>
<script src="./dist/index.js"></scrpt>
</head>
<body>
</body>
</html>

注意,上方代码中,我们引入的是dist目录下的js文件。

然后我们新建文件src/index .js:

1
2
3
4
let a='smyhvae';
const b='qianguyihao';
console.log(a);
console.log(b);

这个文件是一个ES6语法的js文件,稍后,我们尝试把这个ES6语法的js文件转化为ES5的js文件 。

PS:我们在 写代码的时候,能用单引号尽量用单引号,而不是双引号,前者在压缩之后,程序会执行更快。

全局安装Babel-Cli

(1) 初始化项目:

在安装Babel之前,需要先用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入如下指令:

1
npm init -y

上方代码中,-y代表全部默认同意,就不用一次次按回车了(稍后在再根据需要,在文件中手动修改)。命令执行完成后,会在项目的根目录下生成package.json文件:

1
2
3
4
5
6
7
8
9
10
11
{
"name":"es6demo",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo \"Error:no test specified\"&& exit1"
},
"author":"smyhvae",
"license":"ISC"
}

PS: VS Code 里打开终端的快捷键是:Contol+~。

(2)全局安装Babel-cli:

在终端输入以下命令:

1
npm install -g babel-cli

如果安装比较慢的话,MAC可以用cnpm安装,windows下可以使用npm切换到taobao镜像。

(3)本地安装babel-preset-es2015和babel-cli:

1
npm install --save-dev babel-preset-es2015 babel-cli

安装完成后,会发现package.json文件,已经多了devDependencies选项:

(4)新建.babelrc:

在根目录下新建文件.babelrc,输入如下内容:

1
2
3
4
5
6
{
"presets":[
"es2015"
],
"plugins":[]
}

(5)开始转换:

现在,我们应该可以将ES6的文件转化为ES5的文件了,命令如下:

1
babel src/ index.js -o dist/index.js

我们可以将上面这个名令进行简化一下。操作如下:

在文件package.json中修改scripts中的内容:

1
2
3
"scripts":{
"build":"babel src/index.js -o dist/index.js"
}

目前为止,环境配置好了。以后,我们执行如下命令,即可将src/index.js这个ES6文件转化为dist/index.js这个ES5文件:

1
npm run build

我们执行上面的命令后发现,dist目录下会生成ES5的JS文件:index.js:

1
2
3
4
5
'use strict';
var a='smyhvae';
var b='qianguyihao';
console.log(a);
console.log(b);

当我们打开网页后,就可以在浏览器的控制台,看到代码输出的结果。

ES6的变量声明

ES6中新增了let和const来定义变量:

  • var:ES5和ES6中,定义全局变量(是variable的简写)。
  • let:定义**局部变量 **,替代var。
  • const:定义常量(定义后,不可更改)。

var:全局变量

看下面的代码:

1
2
3
4
{
var a=1;
}
console.log(a);

上方代码是可以输出结果的,输出结果为1。因为var是全局声明的,所以 ,即使实在区块里声明,但仍然在全局起作用。

再看下面这段代码:

1
2
3
4
5
var a=1;
{
var a=2;
}
console.log(a);//这里的a指的是区块里的a

上方代码的输出结果为2;因为var是全局声明的。

总结:

用var定义的全局变量会污染整个js的作用域。

let:定义局部变量

1
2
3
4
5
var a=2;
{
let a=3;
}
console.log(a);

上方的代码输出结果为2。用let声明的变量,只在局部(块级作用域内)起作用。

let是防止数据污染,我们来看下面这个for循环的例子,很经典。

1、用var声明变量:()

1
2
3
4
5
for (var i=0;i<10;i++){
console.log('循环体中:'+i);
//每循环一次,就会在{}所在的块级作用域中定义一个新的i
}
console.log("循环体外:"+i);

上方代码可以正常打印结果,且最后一行的打印结果是10。说明循环体外定义的变量i,是在全局起作用的。

2、用let声明变量:

1
2
3
4
for(let i=0;i<10;i++){
console.log('循环体外:'+i);
}
console.log('循环体外:'+i);

上方代码的最后一行无法打印结果,也就是说会打印报错。因为用let定义的变量i,只在{ }这个块级作用域里生效。

总结:我们要习惯用let声明,减少var声明带来的污染全局空间。

为了进一步说明let不会带来污染,需要说明的是:当我们定义了let a=1时,如果我们在同一个作用域内继续定义let a = 2,是会报错的。

const:定义常量

在程序开发中,有些变量是希望声明后,在业务层就不再发生变化,此时可以用const来定义。

example

1
const name='smyhvae';

用const声明的变量,只在局部(块级作用域内)起作用。

let和const的作用【important】

let和const的作用如下:

  • 禁止重复声明
  • 支持块级作用域
  • 控制修改

相反,用var声明的变量:可以重复声明、没有块级作用域、不能限制。

for循环举例【经典案例】

代码1、我们先来看看如下代码:(用var定义变量i)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="">
<head>
<meta />
<meta />
<meta />
<meta />
<title>Document</title>
</head>
<body>
<input type="button" value="aa"/>
<input type="button" value="bb"/>
<input type="button" value="cc"/>
<input type="button" value="dd"/>
<script>
var myBtn=document.getElementsByTagName("input");
for(var i=0;i<myBtn.length;i++){
myBtn[i].onclick=function(){
alert(i);
};
}
</script>
</body>
</html>

你可能会感到诧异,为何点击任何一个按钮,弹出的内容都是4呢?这是因为,我们用var定义的变量i,实在全局作用域声明的。整个代码中,自始至终,只有一个变量。当我们还没点击按钮之前,变量i已经循环到4了。

也就是说,上面的for循环,相当于如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var i=0;
myBtn[0].onclick=function(){
alert(i);
};
i++;
myBtn[1].onclick=function(){
alert(i);
};
i++;
myBtn[2].onclick=function(){
alert(i);
};
i++;
myBtn[3].onclick=function(){
alert(i);
};
i++;
//到这里,i的值已经是4了。因此,当我们点击按钮时,i的值一直都是4

代码2、上面的代码中,如果我们改为用let定义变量i:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="">
<head>
<meta />
<meta />
<meta />
<meta />
</head>
<body>
<input type="button" value="aa" />
<input type="button" value="bb" />
<input type="button" value="cc" />
<input type="button" value="dd" />
<script>
var myBtn=document.getElementByTagName("input");
for(let i = 0;i<myBtn.length; i++ ){
myBtn[i].onclick=function(){
alert(i);
}
}
</script>
</body>
</html>

我们用let定义变量i,在循环的过程中,每执行一次循环体,就会诞生一个新的i。循环体执行4次,就会有4个i。

变量的解构赋值

ES6允许我们,通过数组或者对象的方式,对一组变量进行赋值,这被称为解构。

解构赋值在实际开发中可以大量减少我们的代码量,并且让程序结构更清晰。

数组的解构赋值

举例

通常情况下,我们为一组变量赋值时,一般是这样写的:

1
2
3
let a=0;
let b=1;
let c=2;

现在我们可以通过数组解构的方式进行赋值:

1
let [a,b,c]=[1,2,3];

二者效果是一样的。

解构的默认值

在解构赋值时,是允许使用默认值的。举例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
//一个变量时
let [foo=true]=[];
console.log(foo);//输出结果:true
}
{
//两个变量时
let [a,b]=['生命一号']
//a赋值为:生命一号。b没有赋值
console.log(a+','+b);
//输出结果为:生命一号,undefined
}
{
//两个变量时
let[a,b='smyhvae']=['生命一号']
//a赋值为:生命一号,b采用默认值:smyhvae
console.log(a+','+b);
//输出结果:生命一号,smyhvae
}

undefined和null的区别:

如果我们在赋值时,采用的是undefined或者null,那会有什么区别呢?

1
2
3
4
5
6
7
8
9
10
11
{
let [a,b='smyhvae']=['生命一号'undefined];
//b虽然被赋值为undefined,但是b会采用默认值
console.log(a+','+b);
//输出结果:生命一号,smyhvae
}
{
let [a,b='smyhvae']=['生命一号',null];
//b被赋值为null
console.log(a+','+b);
//输出结果:生命一号,null

上方代码分析:

  • undefined:相当于什么都没有,此时b采用默认值
  • null:相当于有值,但值为null

对象的解构赋值

通常情况下,我们从接口拿到json数据后,一般这么赋值:

1
2
3
var a=json.a;
var b=json.b;
var c=json.c;

上面这样写比较麻烦。

现在,我们同样可以针对对象,进行解构赋值。

举例如下

1
2
3
let {foo,bar}={bar:'我是bar的值',foo:'我是foo的值'};
console.log(foo+','+bar);
//输出结果:我是键foo的值,我是键bar的值

上方代码可以看出,对象的解构和数组的解构,有一个最重要的区别:数组的元素是按次序排列的,变量的取值由他的位置决定;而对象的属性没有次序,是根据键来取值的

圆括号的使用:

如果foo在解构前就定义了,此时再去解构就会出问题。

例:

1
2
3
let foo='haha';
{ foo } = { foo: 'aaa'};
console.log(foo);

需要解决报错,只要在解构的语句外边,加一个圆括号:

1
2
3
let foo = 'haha';
({ foo } = { foo: 'aaa' });
console.log(foo);//输出结果: aaa

字符串解构

字符串也可以解构,这是因为,此时字符串被转换为了一个类似数组的对象。举例:

1
2
3
4
5
6
7
const [a,b,c,d] = 'aaaa';
console.log(a);
console.log(b);
console.log(c);
console.log(d);

console.log(typeof a); //输出结果:string

for…of 循环

ES6中如果要遍历一个数组,可以这样做:

1
2
3
4
let arr1 =[1,2,3,4,5];
for(let value of arr1){
console.log(value);
}

for…of的循环可以避免 我们开拓内存空间,增加代码运行的效率,建议多使用。

注意:上面的数组中,for…of获取的是数组里的值;for…in获取的是index索引值。

Map对象的遍历

for…of 既可以遍历数组,也可以遍历Map对象。

模板字符串

我们以前让字符串进行拼接的时候。可以这样做:(传统写法的字符串拼接)

1
2
3
4
5
var name='aaaa';
var age='26';
]
console.log('name:'+name+',age:'+age);//传统写法
console.log(`name:${name},age:${age}`);//ES6写法

传统写法比较繁琐且容易出错,ES6写法更为实用

注意,上方代码中,倒数第二行使用的符号是反引号(tab键上方)