es5和es6的区别

最近在看阮一峰的《ECMAScript6入门》，讲真，这本书对初学者真的很有帮助，在这里也推荐给大家。接下来，我要说的一些例子也大多来源于这本书，如果对这本书感兴趣的小伙伴，也可以戳这里哦！

想必大家都对es有所了解，对于es5和es6之间的区别还是知道一部分的，但为了更好的帮助我们理解，我决定还是整理一下两者的区别，也算是对之前面试的一个交代吧！

1.新增let命令

在es6之前，我们声明变量都是通过var，es6新增的let命令与var类似，与之不同是，let声明的变量，只在let命令所在的代码块内有效。

{ let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1

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

2.const命令

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

const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: Assignment to constant variable.

上面代码报错的原因很明显，const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo; // SyntaxError: Missing initializer in const declaration

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

值得一提的是，const的作用域与let命令相同：只在声明所在的块级作用域内有效。

3.声明变量的方法

ES5 只有两种声明变量的方法：var命令和function命令。

ES6 除了ES5中的两种方法外，还包括let，const，import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

4.name属性

如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

var f = function () {}; // ES5 f.name // "" // ES6 f.name // "f"

上面代码中，变量f等于一个匿名函数，ES5 和 ES6 的name属性返回的值不一样。

当然了，上述的情况前提是匿名函数，如果说将一个具名函数赋值各一个变量，那么ES5和ES6的name属性都返回的是这个具名函数原本的名字。

const bar = function baz() {}; // ES5 bar.name // "baz" // ES6 bar.name // "baz"

5.箭头函数

在ES6里允许使用”箭头”（=>）定义函数。

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语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错 let getTempItem = id => { id: id, name: "Temp" }; // 不报错 let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id：42}），所以输出的是42。

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。

6.扩展运算符

先说一下扩展运算符是什么吧，扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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

知道它是什么之后，就来看看ES5和ES6写法上的区别：

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f.apply(null, args); // ES6的写法 function f(x, y, z) { // ... } let args = [0, 1, 2]; f(...args);

扩展运算符除了替代函数的apply方法，对数组的复制及合并也提供了新的方法。

ES5 只能用变通方法来复制数组。

const a1 = [1, 2]; const a2 = a1.concat(); a2[0] = 2; a1 // [1, 2]

上面代码中，a1会返回原数组的克隆，再修改a2就不会对a1产生影响。

扩展运算符提供了复制数组的简便写法。

const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法二 const [...a2] = a1;

扩展运算符提供了数组合并的新写法。

const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; // ES5 的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6 的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

需要注意的是，这两种方法都是浅拷贝，使用的时候要小心。

今天就先到这里吧，后续还会持续更新！