ES6规范

你的名字 2022-05-21 12:52 244阅读 0赞

文章开篇我要放一下最敬佩的大神阮叔的ES6入门书籍《ECMAScript 6入门》

链接地址：[http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com]

ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了很多很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。

本文主要针对ES6做一个简要介绍。下面让我们一同来了解当今最流行的编程语言JavaScript的最新版本的特性。

![70][]

### **新特性：** ###

#### 1、**let，const** ####

###  ###

**let 定义的变量不会被变量提升，const 定义的常量不能被修改，let 和 const 都是块级作用域**

ES6前，js 是没有块级作用域 \{\} 的概念的。（有函数作用域、全局作用域、eval作用域）

ES6后，let 和 const 的出现，js 也有了块级作用域的概念，前端的知识是日新月异的~

变量提升：在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部；不在函数内即在全局作用域的最顶部。这样就会引起一些误解。例如：

const 定义的常量不能被修改

#### 2、import、export ####

**import导入模块、export导出模块**

#### 3、class、extends、super ####

ES5中最令人头疼的的几个部分：原型、构造函数，继承，有了ES6我们不再烦恼！

ES6引入了Class（类）这个概念。

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

<table style="border:1px solid #C0C0C0;color:rgb(75,75,75);font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:13px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td style="font-size:12px;color:rgb(69,69,69);font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;border-color:#C0C0C0;border-collapse:collapse;"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div></td> 
   <td style="font-size:12px;color:rgb(69,69,69);font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;border-color:#C0C0C0;border-collapse:collapse;"> 
    <div> 
     <span style="line-height:1.5;">// ES5</span> 
    </div> 
    <div> 
     <span style="line-height:1.5;">var</span>&nbsp;Shape =&nbsp; 
     <span style="line-height:1.5;"><span style="line-height:1.5;">function</span>(<span style="line-height:1.5;">id, x, y</span>)&nbsp;</span>{ 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.id = id, 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.move(x, y); 
    </div> 
    <div>
      }; 
    </div> 
    <div>
      Shape.prototype.move =&nbsp; 
     <span style="line-height:1.5;"><span style="line-height:1.5;">function</span>(<span style="line-height:1.5;">x, y</span>)&nbsp;</span>{ 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.x = x; 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.y = y; 
    </div> 
    <div>
      }; 
    </div> 
    <div>
      &nbsp; 
    </div> 
    <div> 
     <span style="line-height:1.5;">var</span>&nbsp;Rectangle =&nbsp; 
     <span style="line-height:1.5;"><span style="line-height:1.5;">function</span>&nbsp;<span style="line-height:1.5;">id</span>(<span style="line-height:1.5;">ix, x, y, width, height</span>)&nbsp;</span>{ 
    </div> 
    <div>
      Shape.call( 
     <span style="line-height:1.5;">this</span>, id, x, y); 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.width = width; 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.height = height; 
    </div> 
    <div>
      }; 
    </div> 
    <div>
      Rectangle.prototype =&nbsp; 
     <span style="line-height:1.5;">Object</span>.create(Shape.prototype); 
    </div> 
    <div>
      Rectangle.prototype.constructor = Rectangle; 
    </div> 
    <div>
      &nbsp; 
    </div> 
    <div> 
     <span style="line-height:1.5;">var</span>&nbsp;Circle =&nbsp; 
     <span style="line-height:1.5;"><span style="line-height:1.5;">function</span>(<span style="line-height:1.5;">id, x, y, radius</span>)&nbsp;</span>{ 
    </div> 
    <div>
      Shape.call( 
     <span style="line-height:1.5;">this</span>, id, x, y); 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.radius = radius; 
    </div> 
    <div>
      }; 
    </div> 
    <div>
      Circle.prototype =&nbsp; 
     <span style="line-height:1.5;">Object</span>.create(Shape.prototype); 
    </div> 
    <div>
      Circle.prototype.constructor = Circle; 
    </div> 
    <div>
      &nbsp; 
    </div> 
    <div> 
     <span style="line-height:1.5;">// ES6</span> 
    </div> 
    <div> 
     <span style="line-height:1.5;"><span style="line-height:1.5;">class</span>&nbsp;<span style="line-height:1.5;">Shape</span>&nbsp;</span>{ 
    </div> 
    <div> 
     <span style="line-height:1.5;">constructor</span>(id, x, y) { 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.id = id&nbsp; 
     <span style="line-height:1.5;">this</span>.move(x, y); 
    </div> 
    <div>
      } 
    </div> 
    <div>
      move(x, y) { 
    </div> 
    <div> 
     <span style="line-height:1.5;">this</span>.x = x&nbsp; 
     <span style="line-height:1.5;">this</span>.y = y; 
    </div> 
    <div>
      } 
    </div> 
    <div>
      } 
    </div> 
    <div>
      &nbsp; 
    </div> 
    <div> 
     <span style="line-height:1.5;"><span style="line-height:1.5;">class</span>&nbsp;<span style="line-height:1.5;">Rectangle</span>&nbsp;<span style="line-height:1.5;">extends</span>&nbsp;<span style="line-height:1.5;">Shape</span>&nbsp;</span>{ 
    </div> 
    <div> 
     <span style="line-height:1.5;">constructor</span>(id, x, y, width, height) { 
    </div> 
    <div> 
     <span style="line-height:1.5;">super</span>(id, x, y)&nbsp; 
     <span style="line-height:1.5;">this</span>.width = width&nbsp; 
     <span style="line-height:1.5;">this</span>.height = height; 
    </div> 
    <div>
      } 
    </div> 
    <div>
      } 
    </div> 
    <div>
      &nbsp; 
    </div> 
    <div> 
     <span style="line-height:1.5;"><span style="line-height:1.5;">class</span>&nbsp;<span style="line-height:1.5;">Circle</span>&nbsp;<span style="line-height:1.5;">extends</span>&nbsp;<span style="line-height:1.5;">Shape</span>&nbsp;</span>{ 
    </div> 
    <div> 
     <span style="line-height:1.5;">constructor</span>(id, x, y, radius) { 
    </div> 
    <div> 
     <span style="line-height:1.5;">super</span>(id, x, y)&nbsp; 
     <span style="line-height:1.5;">this</span>.radius = radius; 
    </div> 
    <div>
      } 
    </div> 
    <div>
      } 
    </div> 
    <div> 
     <br> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

#### 4、arrow functions （箭头函数） ####

函数的快捷写法。不需要 function 关键字来创建函数，省略 return 关键字，继承当前上下文的 this 关键字

箭头函数小细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的；当你函数中有且仅有一个表达式的时候可以省略\{\}

JavaScript语言的this对象一直是一个令人头痛的问题，运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。

### arrow functions （箭头函数） ###

函数的快捷写法。不需要 function 关键字来创建函数，省略 return 关键字，继承当前上下文的 this 关键字

箭头函数小细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的；当你函数中有且仅有一个表达式的时候可以省略\{\}

JavaScript语言的this对象一直是一个令人头痛的问题，运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。

解决办法：

#### 5、template string （模板字符串） ####

解决了 ES5 在字符串功能上的痛点。

第一个用途：字符串拼接。将表达式嵌入字符串中进行拼接，用 `` ` 和``$\{\}\`来界定。

第二个用途：在ES5时我们通过反斜杠来做多行字符串拼接。ES6反引号 \`\` 直接搞定。

另外：`includes` `repeat`

#### 6、destructuring （解构） ####

简化数组和对象中信息的提取。

ES6前，我们一个一个获取对象信息；

ES6后，解构能让我们从对象或者数组里取出数据存为变量

### 7、default 函数默认参数 ###

### rest arguments （rest参数） ###

解决了 es5 复杂的 `arguments` 问题

### 8、Spread Operator （展开运算符） ###

第一个用途：组装数组

第二个用途：获取数组除了某几项的其他项

### 9、对象 ###

对象初始化简写

对象字面量简写（省略冒号与 function 关键字）

另外：`Object.assign()`

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为\{\}

### 10、Promise ###

**用同步的方式去写异步代码**

### 11、Generators ###

生成器（ generator）是能返回一个迭代器的函数。

生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号`*`，在其函数体内可以使用`yield`关键字,有意思的是函数会在每个`yield`后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

迭代器：当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。

迭代器对异步编程作用很大，异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如Promise比如Async/await）。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了，咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的：

## 总结 ##

以上就是 ES6 最常用的一些语法，可以说这20%的语法，在ES6的日常使用中占了80%

[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/
[70]: /images/20220521/fb6905211a114843969147b23855cda5.png