ES6（2015）-ES13（2022）新增特性大总结

通常所说的ES6泛指ES6及ES6以后的版本。

今年叫ES13，跟苹果13香一样的名字，看看文章末尾，预计会新增10个新特性。很香的感觉。

一、ES6（ES2015）改动最多，主要是让JS工程化，构建化

新增了如下：

1. 变量
2. 箭头函数
3. 新增了数组的方法，比如map、filter等
4. 解构赋值
5. 函数默认值和rest参数
6. 对象的简洁表示法
7. 快速深复制数组和对象
8. 模板字符串
9. 新增了JS模块化，但是大部分浏览器都不支持，只能通过webpack等工具构建
10. 面向对象：Class类用来代替之前的prototype实现继承
11. Promise 。这个主要是让异步操作同步化。方法有all,race,它的实例有then和catch方法，让异步可链式操作

二、ES7（ES2016）

主要是新增了：

1. 幂操作

//ES5求幂
math.pow(3,2)；
//ES7求幂
let a=3**2; //结果：9

1. 给数组添加了Array.includes(要检测的数据) 方法
   含义：有点类似于indexof方法，但是这里不是查找下标，而是看是否包含有，如果有，则返回true
   

三、ES8（ES2017）

主要新增了：

async、await

作用是让异步操作同步化更加到位。

也就是Promise在某些场景下可以使用async和await代替，比如需要通过if语句来确定加载哪个json的情况，如果用Promise则会陷入嵌套，这时可以用async和await来实现。

注意：await关键词只能在async函数中出现

示例：

//使用fetch完成数据请求，注意，fetch发明之处是用来代替XMLHttpRequest对象的。
//fetch会返回一个Promise实例
fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json')
    .then(res => res.json())
    .then(json => console.log(json))
//解释，res.json()会格式化JSON数据，并且它会返回一个Promise对象，所以才可以用2次then
//以上改为 async如下：
(async () => {
    const res = await fetch('https://raw.githubusercontent.com/DaKoala/fetch-example/master/people.json');
    const json = await res.json();
    console.log(json);
    // [{ name: "张三", age: 18 }, { name: "李四", age: 20 }, { name: "王五", age: 22 }]
})();
//以上表示先等待第一个fetch完成，然后等等待第二个完成

四、ES9（ES2018）

主要新增了：

1. rest参数和spread 扩展运算符
   
2. 异步迭代
   指的是异步操作时使用循环
   
3. Promise新增了一个 finally方法
   意思是当所有的请求都完事了（不管是否成功）都会触发
   
4. 对正则表达式进行了一些增强
   比如将字符串的那4个可用正则的方法归属到了正则对象中，新增了/u修饰符和y修饰符等
   

五、ES10（ES2019）

主要新增特性：

1. Array的新方法flat和flatMapflat

flat表示扁平化数组，即将嵌套的数组分离出来变成一维数组。

这个曾经出现在腾讯的面试题中。

语法：Array.flat(层级);

[1,2,[3,4]].flat(0);//不变
[1,2,[3,4]].flat(1);//变成  一维数组，这个1表示往外提取一层，即二维变成1维

flatMap是map和flat的结合，下面的两个操作是等价的：

arr.flatMap(func)
arr.map(func).flat(1)

2.String的新方法trimStart和trimEnd

3.JSON 被归为ECMAScript的子集，原先是独立于JS的

六、ES11（ES2020）

主要新增特性：

1. 动态 import ()
   注意区别于ES6的import属性，因为这是静态的
   使用场景如下：

//vue router中动态导入一个组件（动态方法）
component: () => import(/* webpackChunkName: "index" */ '../views/index.vue')
//ES6的import属性(静态属性)
import Vue from 'vue'

1. 新增BigIntBigInt
   是一个内置的对象，它提供了一种方法来表示大于 2⁵³-1 的整数，BigInt 可用于任意大整数。
   注意：并不是新增了一个数据类型，只是让原本的整数可容纳的值更多。
   

七、ES12（ES2021）

主要新增特性：

1. String.prototype.replaceAll
   有了这个 API，替换字符不用写正则了

const str = "hello world";
// 之前
str.replace(/o/g, "a")// "hella warld"
// 现在
str.replaceAll("o", "a")// "hella warld"

1. 新增Promise的any方法
   作用：返回第一个fullfilled 的 promise ，若全部 reject，则返回一个带有失败原因的 AggregateError。
   即与race差不多，与 Promise.race 不同，当其中一个 promises是fail 时，它不会 reject。
   请看官方提供例子-检查哪个网站更快

Promise.any([ 
  fetch('https://v8.dev/').then(() => 'home'), 
  fetch('https://v8.dev/blog').then(() => 'blog'), 
  fetch('https://v8.dev/docs').then(() => 'docs')])
.then((first) => { 
  // Any of the promises was fulfilled. 
  console.log(first); 
  // → 'home'
})
.catch((error) => { 
  // All of the promises were rejected. 
  console.log(error);
});

1. 新增逻辑赋值操作符： ??=, &&=, ||=
   

八、ES13（ES2022）

预计6月发布，敬请期待。目前总共有10 个提案进入 Stage 4 ，它们可能会被吸纳进 ECMAScript 2022。

这里列举几个分别如下：

1. Class Fields
   声明类的字段。
   
2. Private Fields, Methods
   该提案属于 Class Fields 系列提案的一部分，其使用#前缀定义类的私有方法和字段。
   
3. Object.hasOwn
   简单来说，该提案就是使用Object.hasOwn替代Object.prototype.hasOwnProperty.call，是一种更简洁、更可靠地检查属性是否直接设置在对象上的方法。
   
4. Error Cause
   Error Cause 是阿里巴巴提出的提案，据称也是中国首个进入 Stage 4 的 TC39 提案。
   
5. Top-Level Await
   原先await只能在async内使用，新的提案 Top-Level await则允许在 Async functions 之外使用await（例如 CLI 脚本，以及动态导入和数据加载）。
   要获取更多ES13信息，请访问：https://github.com/tc39
   

注意事项：

1. 如果要将ES6转为兼容的代码就需要使用babel转
2. ESLint、JSLint等带lint单词的都是代码检测和代码编写风格的辅助性工具
3. 如果你还不知道ES，不知道ES和JS的关系，赶紧关注我吧！

以上由WEB前端全栈圈公众号（imqdcn）整理和首发，未经授权禁止转载