JavaScript进阶（二十六）：ES各版本特性详解

文章目录

• • 一、ECMAScript简介
  • 二、ES6 (ES2015)
  • 三、ES7 (ES2016)
  • 四、ES8 (ES2017)
  • 五、ES9 (ES2018)
  • 六、ES10 (ES2019)
  • 七、ES11 (ES2020)
  • 八、ES12 (ES2021)
  • 九、拓展阅读

一、ECMAScript简介

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。

二、ES6 (ES2015)

1. Class

2. 模块化语法（import、export）

3. 箭头函数 () => {...}，是函数的缩写。

4. 函数参数默认值

function fn(x,y='World') {
   console.log(x, y);
}

5. 模板字面量

   之前实现中，长字符串的组合是通过 + 号来连接的。

   它的可读性很差，使用模板字符串，它更容易阅读。

6. 解构赋值

   允许 JavaScript 轻松地从数组和对象中获取内容。

7. 扩展运算符

   它是用三点（...)表示，Array是可以扩展的，如果是Object，会按照key-value进行扩展。

8. 对象属性简写

   如果构成对象的字段名称与前面段落中的变量相同，则可以省略该值，看起来更流线型。

9. Promise
Promise 是一种异步（非同步）写法的解决方案，比原来的回调写法更加优雅。ES8（ES2017）发布了更完美的async，await，直接让异步写得像同步一样。缺点是当思路落到复杂的业务逻辑上时，有时会错过await，在运行时发生错误。

10. let, const 替换 var

• let：通用变量，可以被覆盖。
• const：一旦声明，其内容不可修改。因为数组和对象都是指针，所以它们的内容可以增加或减少, 但不改变其指针。

早期，JavaScript的var作用域是全局的。也就是说，var变量是在使用后声明的，执行的时候会自动提到顶层，后面会赋值。

更容易受到污染。

三、ES7 (ES2016)

1. Array.prototype.includes()
   用于判断数组是否包含指定值，如果是，则返回true；否则，返回假。和之前indexOf的用法一样，可以认为是返回一个布尔值，语义上更加清晰。
2. 幂运算符 console.log(2**10); // 1024

四、ES8 (ES2017)

1. async, await

   异步函数是使用 async 关键字声明的函数，并且允许在其中使用 await 关键字。async 和 await 关键字使异步的、基于 Promise 的行为能够以更简洁的方式编写，避免了显式配置 Promise 链的需要。

2. Object.values()

   返回对象自身属性的所有值，不包括继承的值。

3. Object.entries()

   返回可枚举键，即传入对象本身的值。

4. 字符串 padStart() & padEnd()

   你可以在字符串的开头或结尾添加其他内容，并将其填充到指定的长度。

   过去，这些功能通常是通过通用的辅助工具包（如 lodash）引入的，并将它们放在一起。

5. 尾随逗号

   允许在函数参数列表末尾使用逗号。

6. Object.getOwnPropertyDescriptors()

   获取你自己的描述符，一般的开发业务需求通常不会用到。

7. 共享数组缓冲区
   SharedArrayBuffer 是一个固定长度的原始二进制数据缓冲区，类似于 ArrayBuffer。

   可用于在共享内存上创建数据。与 ArrayBuffer 不同，SharedArrayBuffer 不能分离。

8. Atomics object

   Atomics 对象，它提供了一组静态方法来对 SharedArrayBuffer 执行原子操作。原子的所有属性和函数都是静态的。

如果一个多线程同时在同一个位置读写数据，原子操作保证了正在操作的数据如预期的那样：即在上一个子操作结束后执行下一个，操作不中断。可以说是针对Node.Js中多线程Server的开发而加强的功能，在前端开发中使用的机会相当低。chrome 已经提供了支持。

五、ES9 (ES2018)

1. 循环等待
   在异步函数中，有时需要在同步 for 循环中使用异步（非同步）函数。

async function process(array) {
  for (const i of array) {
    await doSomething(i);
  }
}

async function process(array) {
  array.forEach(async i => {
    await doSomething(i);
  });
}

上面的代码不会像预期的那样输出期望的结果。

for循环本身还是同步的，会在循环中的异步函数完成之前执行整个for循环，然后将里面的异步函数逐一执行。

ES9 增加了异步迭代器，允许 await 与 for 循环一起使用，逐步执行异步操作。

async function process(array) {
  for await (const i of array) {
    doSomething(i);
  }
}

2. promise.finally()

   无论是成功（.then()）还是失败（.catch()），Promise 后面都会执行的部分。

3. Rest, Spread

   在 ES2015 中，Rest 不定长度参数...，可以转换成数组传入。

4. 正则表达式组

   RegExp 可以返回匹配的数据包

const regExpDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match      = regExpDate.exec('2020-06-25');
const year       = match[1]; // 2020
const month      = match[2]; // 06
const day        = match[3]; // 25

5. 正则表达式 dotAll
   . 表示匹配除输入以外的任何符号，添加这些标志后，允许匹配输入。

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true

六、ES10 (ES2019)

1. 更友好的 JSON.stringify
   如果输入是 Unicode 但超出范围，则 JSON.stringify 最初会返回格式错误的 Unicode 字符串。

现在是第 3 阶段的提案，使其成为有效的 Unicode 并以 UTF-8 呈现。

2. Array.prototype.flat() & Array.prototype.flatMap()

   展平阵列

3. String.prototype.trimStart() & String.prototype.trimEnd()
trimStart() 方法从字符串的开头删除空格，trimLeft() 是此方法的别名。

4. Object.fromEntries()
Object.fromEntries() 方法将键值对列表转换为对象。

5. String.prototype.matchAll
matchAll() 方法返回将字符串与正则表达式匹配的所有结果的迭代器，包括捕获组。

6. fixed catch 绑定

   在使用catch之前，不管有用与否，一定要传入一个eparameter来表示接收到的错误。

   如果现在不用，可以省略。

7. BigInt（新数字类型）（重要）
   BigInt 值，有时也称为 BigInt，是一个 bigint 原语，通过将 n 附加到整数文字的末尾，或通过调用 BigInt() 函数（没有 new 运算符）并给它一个整数值或字符串来创建值。

• ES5：String, Number, Boolean, Null, Undefined
• ES6 新增：Symbol，到ES6就一共有6 种类型
• ES10 新增：BigInt，就达到 7 种类型

七、ES11 (ES2020)

1. Promise.allSettled()
Promise.allSettled() 方法返回一个在所有给定的 Promise 都已实现或拒绝后实现的 Promise，并带有一组对象，每个对象都描述了每个 Promise 的结果。

它通常用于当有多个不依赖于彼此成功完成的异步任务，或者总是想知道每个 Promise 的结果时。

相比之下，Promise.all() 返回的 Promise 可能更合适，如果任务相互依赖/如果想立即拒绝其中任何一个拒绝。

2. 可选链操作符?.

在开发中，很容易遇到先判断数据是否存在，判断是否写入。

const isUserExist = user && user.info;
if (isUserExist) { 
    username = user.info.name; 
}

如果返回的数据为null或者用户对象下没有相应属性，则会抛出Uncaught TypeError: Cannot read property...。

导致程序无法继续执行

使用 ?.，语法更简单

const username = user?.info?.name;

如果存在，获取name的值，如果不存在，赋值undefined

与 || 一起使用，只需一行！

const username = user?.name || 'guest';

3. Nullish 合并运算符 ??

   在JavaScript中，遇到0、null、undefined时会自动转为false。

   但有时0其实是一个正常的值，只能容错undefined和null，但是使用??，可以保持简洁。

4. Dynamic-import

   从字面上看，应该很容易理解，就是在需要的时候加载相关的逻辑。

5. GlobalThis

   全局 globalThis 属性包含全局 this 值，类似于全局对象。

八、ES12 (ES2021)

1. Promise.any()
Promise.any() 接受一个可迭代的 Promise 对象。它返回一个单一的 Promise，只要 iterable 中的任何一个 Promise 完成，就会返回一个 Promise，并带有已完成的 Promise 的值。

如果可迭代的实现中没有任何承诺（如果所有给定的承诺都被拒绝），则返回的承诺会被 AggregateError 拒绝，AggregateError 是 Error 的一个新子类，它将单个错误组合在一起。

2. 逻辑赋值运算符
   在开发过程中，可以使用 ES2020 中提出的逻辑运算符 ||、&& 和 `??（Nullish coalescing operator）来解决一些问题。

而 ES2021 会提出 ||= , &&= , ??= ，概念类似于 += ：

let b = 2
b += 1 
// equal to b = b + 1
let a = null
a ||= 'some random text'  // a become to'some random text'
// equal a = a || 'some random text'
let c = 'some random texts'
c &&= null  // c become to null
// equal to c = c && null
let d = null
d ??= false  // d become to false
// equal to d = d ?? false

3. WeakRef
WeakRef 对象包含对对象的弱引用，该对象称为其目标或引用对象。对对象的弱引用是不会阻止对象被垃圾收集器回收的引用。相反，普通（或强）引用将对象保存在内存中，当一个对象不再有任何强引用时，JavaScript 引擎的垃圾收集器可能会销毁该对象并回收其内存。如果发生这种情况，将无法再从弱引用中获取对象。

九、拓展阅读

• 《JavaScript进阶（十四）：详解 ES6 中的 export 和 import》
• 《JavaScript进阶（十三）：JavaScript 空值合并运算符、可选链操作符、空值赋值运算符讲解》
• 《JavaScript进阶（十二）：JS 模块化编程规范-CommonJS、AMD、CMD、ES6》
• 《JavaScript进阶（十八）：ES6 Symbol 用法》
• 《JavaScript进阶（二十）：精解 ES6 Promise 用法》
• 《JavaScript进阶（二十四）：ES8 中 async 与 await 使用方法详解》
• 《JavaScript进阶（二十五）：Promise 详解》