专家专栏覃涛 | ECMAScript 2015(ES6)的若干特性及性能对比

Posted 2021-05-01 百度QA

Node.js各个版本对ES6特性的兼容支持如下： 

由上图可见，Node.js 6.x已经支持95%+的ES6特性，ES6的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。 

今天给大家介绍一下个人觉得有用的特性，及其在性能上的表现，最后评估一下新特性在使用上的取舍。

1、let & const

let

1. 变量无提升，定义后方能使用： 

   
    
   var 声明的变量会自动提升到当前作用域的顶部，如果声明位置与作用域顶部之间有另一个同名变量，很容易引起难以预知的错误。 

   
   使用 let 声明的变量则不会进行变成提升，只能在定义后才能使用，否则报错。

2. 块级作用域，只负责自己的一亩三分地： 

   
    
   let 声明的变量只能在当前块级作用域中使用，最常见的使用应用大概就是 for(let i = 0, i < 10; i++) {}后，续的代码无法获取i这个变量的值

   
   

3. 禁止重复声明，保证唯一定义 

   
    
   var 声明的变量可以重复声明，而且不会有任何警告或者提示，就这样悄悄的覆盖了一个值，隐患如变量提升一样让人担忧。 
   而 let 声明的变量如果进行重复声明，则会直接抛出一个语法错误。

   
   

const

1. 变量无提升，定义后方能使用：同let

2. 块级作用域，只负责自己的一亩三分地：同let

3. 禁止重复声明，保证唯一声明：同let

4. 初始化时，必须赋值：

   
   

基于定义，const 声明的常量既然一经声明便不能再更改其值，那声明的时候没有初始值显然是不合理的，一个没有任何值的常量是没有意义的，浪费内存。 

5. 禁止重复赋值：

基于静态常量的定义我们可以很明显知道，const 声明的常量一经声明便不能再更改其值。

let与var的性能对比

对比循环定义带来的时间消耗，测试代码如下： 

执行5组后，得到结果如下：

组	ES5(ms)	ES6(ms)
1	33	23
2	38	29
3	31	27
4	38	22
5	32	26
均值	34.4	25.4

结论：

不论是从代码层面的可靠性，还是性能方面，let都是优于var的选择。

2、Template Literals（模板对象）

之前在对字符串和变量进行拼接的时候，通常都是反复一段一段使用引号包裹的字符串，再反复使用加号进行拼接。

 
ES6 中我们可以使用反引号（`）来输入一段简单明了的多行字符串，还可以在字符串中通过 ${变量名} 的形式方便地插入一个变量。

比对一下与拼接的性能： 

执行5组后，得到结果如下：

组	ES5(ms)	ES6(ms)
1	82	100
2	80	88
3	86	97
4	74	96
5	86	98
均值	81.6	95.8

结论：

字符串模板在执行时由于会首先找出其中的模板变量，所以性能不如ES5的字符串拼接。

 
拼接的方式虽然在性能略好与模板对象，但鉴于使用的便利性，仍然推荐模板对象的方式。

3、Default Parameters（默认参数）

在 ES6 中，我们可以直接在函数的显示入参中指定函数默认值，省时又省力。 

4、Destructuring Assignment （解构赋值）

数组解构

注意：解构时可以通过留空的方式跳过数组中间的个别元素，但是在形参数组中必须留有相应空位才可以继续解构之后的元素，如果要跳过的元素处于数组末端，则在形参数组中可以不予留空。

对象解构

 

与数组解构类似。 

注意：形参对象（{b, c}）的属性或方法名必须与待解构的目标对象中的属性或方法名完全相同才能解构到对应的属性或方法。

对象匹配解构

 

对象匹配解构是对象解构的一种延伸用法，我们可以在形参对象中使用“:”来更改解构后的变量名。

5、class & extend（类&继承）

ES6中类的特性：

• 本质为对原型链的二次包装

• 类没有提升

• 不能使用字面量定义属性

• 动态继承类的构造方法中 super 优先 this

类的定义

定义一个ES6类： 

注意:

1. 在类的定义中有一个特殊方法 constructor()，该方法名固定，表示该类的构造函数，在类的实例化过程中会被调用（new Person(”)）

2. 类只能在构造方法或其他方法中使用 this.key = value 的形式为类添加属性

   
   

对比ES5定义类的方式，class可谓清晰明了，且毫无炫技的成份。

类的继承

注意：子类有构造方法，那么在子类构造方法中使用 this 对象之前必须使用 super() 方法运行父类的构造方法以对父类进行初始化。

性能对比

ES5： 

ES6： 

执行5组后，得到结果如下：

组	ES5(ms)	ES6(ms)
1	32	47
2	32	47
3	47	63
4	31	46
5	38	47
均值	36	50

结论：

采用原生的继承方式，性能上略高于采用class的方式，但从使用的便利性和扩张性来说，class的方式更优。

总结：

对于ES6来说，除了积极了解和使用其新的特性和兼容性外，也要在性能上做到心中有数，从上面的性能对比的结果可以看出，大部分ES6新特性相对ES5原生方法会偏慢，但要相信趋势的力量，坚信这些问题都会在未来被慢慢弥补上。

one more thing：

不拒绝新事物，一旦你开始接受它，你就会感受到它带来的新乐趣

共勉~

作者介绍：

覃涛

对于一个100米能跑进12s的非典型性程序员来说，掉头发这个表象并不能说明你加班多......