ECMAScript6常用新特性总结

一、let声明变量

1、基本用法：

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

如下代码：

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

　　

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

还有我们经常会遇到的坑：for循环结合定时器的使用，如下代码：

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

　　

如果换成let，则是：

for (var i=0; i<5; i++) {
	setTimeout(function () {
		console.log(i);
	}, 0);
} // 5 5 5 5 5

　　

以上两段代码出现不同结果的原因就是var声明的是全局变量，就算setTimeout设置的是0ms，但是也是等for循环内的全局变量i执行到5时，才会执行，因此每次打印的结果都是5。而let声明的变量只在其所在代码块内有效，也就是说每次for循环都保存了一次i的值，因此最后依次打印出0、1、2、3、4。

同样的：《JavaScript中闭包结合for循环的使用》也是这个原因。

2、不存在变量提升：

通过var声明的变量，会出现变量提升的情况，这是因为程序是从上到下执行，执行之前先声明，代码如下：

1	console.log(a); // undefined

2	var a = 1;

但是let声明的变量不存在变量提升：

1	console.log(a); // ReferenceError: a is not defined

2	let a = 100;

3	console.log(a); // 100

想要使用let声明的变量，在使用之前必须先声明，否则会报错。

相关阅读：《JavaScript闭包+作用域+变量提升》。

3、暂时性死区：

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响，如下代码：

1	var tmp = 123;

2

3	if (true) {

4	tmp = 'abc'; // ReferenceError

5

let tmp;

6

}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

4、不允许重复声明同一个变量：

let不允许在相同作用域内，重复声明同一个变量。如下代码：

01

// 报错

02	function () {

03	let a = 10;

04	var a = 1;

05

}

06

07

// 报错

08	function () {

09	let a = 10;

10	let a = 1;

11

}

因此，不能在函数内部重新声明参数。

1	function func(arg) {

2	let arg; // 报错

3

}

4

5	function func(arg) {

6

{

7	let arg; // 不报错

8

}

9

}

之前有个小习惯，发生一个事件的时候，有时候要用到事件对象中的属性，就习惯了在事件函数内重复声明参数，如下代码：

1	var btn = document.getElementById('btn');

2	btn.onclick = function (ev) {

3	var ev = ev || window.event; // 重复声明参数，如果是let是不允许的

4	ev.cancelBubble = true;

5

};

二、const声明常量

const声明一个只读的常量。一旦声明，常量的值就不能改变。

1	const Work = 'WEB前端开发';

2	console.log(Work); // WEB前端开发

3

4	Work = 'SEO搜索引擎优化';

5	// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

1	const foo;

2	// SyntaxError: Missing initializer in const declaration

上面代码表示，对于const来说，只声明不赋值，就会报错。

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用，如下代码：

1	if (true) {

2	console.log(MAX); // ReferenceError

3	const MAX = 5;

4

}

const声明的常量，也与let一样不可重复声明。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址（栈内存），因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址（堆内存），保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

1	const person = {};

2	const person = ''; // 报错

改变const常量对象的属性则不会报错，代码如下：

1	const person = {};

2	person.name = '赵一鸣';

3	console.log(person); // Object {name: "赵一鸣"}

三、块级作用域

1、为什么需要块级作用域呢？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量，代码如下：

01	var tmp = new Date();

02

03	function f() {

04	console.log(tmp);

05	if (false) {

06	var tmp = 'hello world';

07

}

08

}

09

10	f(); // undefined

以上代码，在函数f内外都声明了tmp变量，因此在函数内部会优先读取局部变量tmp，但是在if内判断为false，不会继续执行，再加上变量提升的原因，最后打印结果是undefined。

第二种场景，用来计数的循环变量泄露为全局变量，代码如下：

1	var s = 'hello';

2

3	for (var i = 0; i < s.length; i++) {

4	console.log(s[i]);

5

}

6

7	console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

let实际上为 JavaScript 新增了块级作用域。

1	function f1() {

2	let n = 5;

3	if (true) {

4	let n = 10;

5

}

6	console.log(n); // 5

7

}

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是10。

ES6 允许块级作用域的任意嵌套，如下代码：

1	{{{{{let insane = 'Hello World'}}}}};

2、块级作用域与函数声明：

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明，如下代码：

01

// 情况一

02	if (true) {

03	function f() {}

04

}

05

06

// 情况二

07

try {

08	function f() {}

09	} catch(e) {

10

// ...

11

}

上面两种函数声明，根据 ES5 的规定都是非法的。

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错，如下代码：

01

// 不报错

02	'use strict';

03	if (true) {

04	function f() {}

05

}

06

07

// 报错

08	'use strict';

09

if (true)

10	function f() {}

四、顶层对象的属性

在全局环境下声明一个变量，这个变量实际是作为window全局对象的属性，代码如下：

1	var name = '赵一鸣';

2	console.log(window.name); // 赵一鸣

顶层对象的属性与全局变量挂钩，被认为是JavaScript语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

ES6为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩，如下代码：

1	let name = '赵一鸣博客';

2	console.log(window.name); // undefined

五、变量的解构赋值

1、ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值，代码如下：

1	let a = 1;

2	let b = 2;

3	let c = 3;

ES6 允许写成下面这样：

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

2	console.log(a); // 1

3	console.log(b); // 2

4	console.log(c); // 3

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

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

2	console.log(a);

3	console.log(b);

4	console.log(c);

如果解构不成功，变量的值就等于undefined，如下代码：

1	let [foo] = [];

2	let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

2、解构赋值允许指定默认值：

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

2	console.log(a);

3	console.log(b);

3、对象的解构赋值：

解构不仅可以用于数组，还可以用于对象。

1	let { foo, bar } = { foo: "aaa", bar: "bbb"};

2	foo // "aaa"

3	bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

1	let { bar, foo } = { foo: "aaa", bar: "bbb"};

2	foo // "aaa"

3	bar // "bbb"

4

5	let { baz } = { foo: "aaa", bar: "bbb" };

6	baz // undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

如果变量名与属性名不一致，必须写成下面这样：

1	let {foo : baz} = {foo : 'aaa', bar : 'bbb'};

2	console.log(baz);

这实际上说明，对象的解构赋值是下面形式的简写：

1	let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb"};

4、字符串的解构赋值：

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象，代码如下：

1	const [a, b, c, d, e] = 'hello';

2

a // "h"

3

b // "e"

4

c // "l"

5

d // "l"

6

e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值：

1	let {length : len} = 'hello';

2	console.log(len) // 5

5、函数参数的结垢赋值：

函数的参数也可以使用解构赋值：

1	function add([x, y]){

2	return x + y;

3

}

4

5	add([1, 2]); // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

6、变量的解构赋值有很多用途，例如：

（1）交换变量的值：

1	let a = 1;

2	let b = 2;

3	console.log(a); // 1

4	console.log(b); // 2

5	[a, b] = [b, a];

6	console.log(a); // 2

7	console.log(b); // 1

（2）从函数返回多个值：

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便，代码如下：

01

// 返回一个数组

02

03	function example() {

04	return [1, 2, 3];

05

}

06	let [a, b, c] = example();

07

08

// 返回一个对象

09

10	function example() {

11

return {

12

foo: 1,

13

bar: 2

14

};

15

}

16	let { foo, bar } = example();

（3）函数参数的定义：

解构赋值可以方便地将一组无序参数与变量名对应起来：

1	function fn1 ([a, b, c]) {

2	console.log(a, b, c);

3

}

4	fn1([1, 2, 3]); // 1 2 3

5

6	function fn2 ({a, b}) {

7	console.log(a, b);

8

}

9	fn2({b : 4, a : 5}); // 5 4

（4）提取JSON数据：

解构赋值对提取JSON对象中的数据，尤其有用，如下代码：

01	let person = {

02	name: '赵一鸣',

03

sex: "男",

04	work: ['web前端开发', 'SEO搜索引擎优化']

05

};

06

07	let {name, sex, work} = person;

08	console.log(name); // 赵一鸣

09	console.log(sex); // 男

10	console.log(work); // ["web前端开发", "SEO搜索引擎优化"]

上面代码可以快速提取 JSON 数据的值。

（5）输入模块的指定方法：

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰，代码如下：

1	import {mapActions, mapGetters} from Vuex;

六、关于数组的扩展

1、将dom集合(或者是类数组)转为数组：

1	var div = document.getElementsByTagName('div');

2	var divArry = Array.from(div);

3	console.log(divArry); // [div, div, div, div, div, div]

2、接收一串参数，转为数组：

1	var arry = Array.of(1, 2, 3, 4);

2	console.log(arry); // [1, 2, 3, 4]

七、对象Object的扩展

1、合并对象，将obj2、obj3等对象的属性合并到obj1里边，类似于jQuery的$.extend({opt1, opt2, opt3})方法：

1	Object.assign(obj1, obj2, obj3);

2、获取对象的prototype：

1	Object.getPrototypeOf(obj)

八、函数的扩展

1、函数可以设置默认参数值：

1	function fn(a=1, b=2){return a + b;}

2	console.log(fn());

3	console.log(fn(1, 2));

2、函数剩余参数组成的数组：

1	function fn (a, b, ...c) {

2

return c;

3

}

4	console.log(fn(1, 2, 3, 4, 5, 6)); // 3 4 5 6

上面的代码，...c代表a和b参数后面所有的参数，是一个数组。

3、箭头函数：

1	let fn = (a, b) => {

2	let c = a + b;

3

return c;

4

};

5	console.log(fn(1,2));

箭头函数如果只有一行，可以省略大括号：

1	let fn = (a=1, b=2) => a + b;

2	console.log(fn(3, 4));

如果只有一个参数，并且没有默认值的时候，可以省略小括号：

1	let fn1 = a => a;

2	console.log(fn1(1));

需要注意的是：

（1）使用箭头函数定义的函数（构造函数），不能被new；

（2）箭头函数不存在arguments；

（3）this永远指向定义时所在的对象；

01	var obj1 = {

02	name : 'zhangsan',

03	fn : function(){

04	setTimeout(function () {

05	console.log(this);

06

}, 300);

07

}

08

};

09	obj1.fn(); // window

10

11	let obj2 = {

12	name : 'lisi',

13

fn () {

14	setTimeout(()=>{

15	console.log(this);

16

}, 300);

17

}

18

};

19	obj2.fn(); // obj2

20

21	function fn(){

22	setTimeout(()=>{

23	console.log(this);

24

}, 300);

25

}

26	fn(); // window

九、Set：ES6新增的数据结构，类似于数组

SET内元素的值都是唯一的，如果加入了重复的值，它会自动去重。

1	let set = new Set([1, 1, '1', 2, 3, '2']);

2	console.log(set); // Set(5) {1, "1", 2, 3, "2"}

3	console.log(set.size); // 5

4	set.add(5);

5	console.log(set); // Set(5) {1, "1", 2, 3, "2", 5}

6	set.delete('1'); // 返回值的true或false

7	console.log(set); // Set(5) {"1", 2, 3, "2", 5}

8	set.clear();

9	console.log(set); // Set(0) {}

十、Map：ES6新增的数据结构，类似键值对的对象，可以用object当作key，也可以用任意类型的数据当作key

01	let map = new Map([ ['name', 'zym'], ['age', 24], ['sex', 'man'] ]);

02	console.log(map); // Map(3) {"name" => "zym", "age" => 24, "sex" => "man"}

03	console.log(map.size); // 3

04	map.set('work', 'WEB前端开发');

05	console.log(map); // Map(4) {"name" => "zym", "age" => 24, "sex" => "man", "work" => "WEB前端开发"}

06	let obj = {};

07	map.set(obj, 'this is a obj');

08	console.log(map); // Map(5) {"name" => "zym", "age" => 24, "sex" => "man", "work" => "WEB前端开发", Object {} => "this is a obj"}

09	console.log(map.has('height')); //查找key是否存在，返回true或false

10	map.delete('age');

11	console.log(map); // Map(4) {"name" => "zym", "sex" => "man", "work" => "WEB前端开发", Object {} => "this is a obj"}

十一、promise 是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理

01	let p = new Promise((resolve, reject) => {

02

$.ajax({

03	type : 'post',

04	url : './test.php',

05	dataType : 'json',

06

data : {

07	uname : 'zym',

08	upwd : '123456'

09

},

10	success (result) {

11	result === 1 ? resolve(result) : reject('error');

12

}

13

});

14

});

15

16	p.then((res) => {

17	console.log(res);

18

$.ajax({

19	type : 'post',

20	url : './test1.php',

21	success (result) {

22	console.log(result);

23

}

24

});

25	}, function(res){

26	console.log(res);

27

});

promise.all() 只有当所有Promise对象都为成功时才会执行then里面的方法：

01	let p1 = new Promise((resolve, reject) => {

02	setTimeout(() => {

03	console.log('p1');

04	resolve('1');

05

}, 2000);

06

});

07

08	let p2 = new Promise((resolve, reject) => {

09	setTimeout(() => {

10	console.log('p2');

11	resolve('2');

12

}, 4000);

13

});

14

15	Promise.all([p1, p2]).then((res) => {

16	let a = res[0] > res[1] ? 1 : 0;

17	console.log(a);

18

});

十二、class类

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

定义一个空的类Point，JavaScript 引擎会自动为它添加一个空的constructor方法。

constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。

1	class Foo {

2	constructor() {

3	return Object.create(null);

4

}

5

}

6

7	console.log(new Foo() instanceof Foo) // false

例如以下一个完整的类：

01	class Person {

02	// 类的构造函数，实例化对象时自动调用

03	constructor (name, age, sex) {

04

/*

05	// 类的内部通过new.target返回当前类

06	if(new.target === Person){

07	throw new Error('本类不能被实例化，只能被继承！');

08

}

09

*/

10

11	this.name = name;

12	this.age = age;

13	this.sex = sex;

14

}

15

16

show () {

17	return '(' + this.name + ')';

18

}

19

20	// 获取属性时自动调用

21	get work () {

22	return 'WEB前端开发';

23

}

24

25	// 设置work属性时自动调用

26	set work (v){

27	console.log(v);

28

}

29

30	// 自定义一个静态方法，只能由类本身来调用，实例化的对象不能调用，会报错。 在函数外部，使用new.target会报错。

31	static run () {

32	return 'run';

33

}

34

}

35

36	let person = new Person('zym', 24, 'man');

37	console.log(person.constructor === Person.prototype.constructor); // true

38

39	console.log(Object.getOwnPropertyNames(person));

40	console.log(Object.keys(person));

41	console.log(Object.getPrototypeOf(person));

42	console.log(Person.name);

43

44	person.work = 123;

45	console.log(person.work);

46

47	console.log(Person.run());

ES6中的class类只是对ES5中的构造函数做了一个封装，相当于外边包了一个壳子，看起来和其他编程语言的类一样。

类继承：

01

class A {

02	constructor () {

03	this.name = 'zhangsan';

04

}

05

06	showName () {

07	return this.name;

08

}

09

}

10

11	class B extends A {

12	constructor () {

13

super();

14	this.name = 'lisi';

15

}

16

}

17

18	const a = new A();

19	const b = new B();

20

21	console.log(b.showName());

ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。

ES6的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。如果子类没有定义constructor方法，这个方法会被默认添加。

（1）super作为函数时，指向父类的构造函数。super()只能用在子类的构造函数之中，用在其他地方就会报错：super虽然代表了父类的构造函数，但是返回的是子类的实例，即super内部的this指的是子类。因此super()在这里相当于A.prototype.constructor.call(this)。

（2）super作为对象时，指向父类的原型对象。

如果子类没有定义constructor方法， 这个方法会被默认添加， 也就是说， 不管有没有显式定义， 任何一个子类都有constructor方法。

在子类的构造函数中， 只有调用super之后， 才可以使用this关键字， 否则会报错。 这是因为子类实例的构建， 是基于对父类实例加工， 只有super方法才能返回父类实例。

十三、Module模块扩展

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

1	// CommonJS模块

2	let { stat, exists, readFile } = require('fs');

3

4

// 等同于

5	let _fs = require('fs');

6	let stat = _fs.stat;

7	let exists = _fs.exists;

8	let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

1

// ES6模块

2	import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象