ES2021 新特性提前知，附案例

原文链接：

medium.com/better-prog…

以下是 ECMAScript 2015 - 2021 新特性概览：

ES2015
ES2016
ES2017
ES2018
ES2019
ES2020
ES2021

简介

ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 并没有像 ES2015 那样提出很多新特性，但却合并了一些有用的特性。

本文将会用通俗易懂的代码示例来介绍 ES2021 的新特性。当然在这之前，你需要了解 JavaScript 的基础知识。

以下是 ES2021 的新特性概览：

String.prototype.replaceAll
Promise.any
WeakRef
逻辑赋值运算符
数字分隔符

String.protype.replaceAll

在 ES2021 之前，要替换掉一个字符串中的所有指定字符，我们可以这么做：

const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replace(/\+/g, '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌

ES2021 则提出了 replaceAll 方法，并将其挂载在 String 的原型上，可以这么用：

const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replaceAll('+', '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌

Promise.any

Promise.any 方法和 Promise.race 类似——只要给定的迭代中的一个 promise 成功，就采用第一个 promise 的值作为它的返回值，但与 Promise.race 的不同之处在于——它会等到所有 promise 都失败之后，才返回失败的值：

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));
const promises = [
  myFetch('/endpoint-1'),
  myFetch('/endpoint-2'),
  myFetch('/endpoint-3'),
];
// 使用 .then .catch
Promise.any(promises) // 任何一个 promise 成功。
       .then(console.log) // 比如 ‘3’
       .catch(console.error); // 所有的 promise 都失败了
// 使用 async-await
try {
  const first = await Promise.any(promises); // 任何一个 promise 成功返回。
 console.log(first);
}catch (error) { // 所有的 promise 都失败了
  console.log(error);
}

WeakRef

WeakRef 提案主要包含两个新功能：

可以通过 WeakRef 类来给某个对象创建一个弱引用
可以通过 FinalizationRegistry 类，在某个对象被垃圾回收之后，执行一些自定义方法

上述两个新功能可以同时使用，也可以单独使用，取决于你的需求。

一个 WeakRef 对象包含一个对于某个对象的弱引用，被称为目标或引用。通过弱引用一个对象，可以让该对象在没有其它引用的情况下被垃圾回收机制回收。

WeakRef 主要用来缓存和映射一些大型对象，当你希望某个对象在不被其它地方引用的情况下及时地被垃圾回收，那么你就可以使用它。

function toogle(element) {
  const weakElement = new WeakRef(element);
  let intervalId = null;

  function toggle() {
    const el = weakElement.deref();
    if (!el) {
       return clearInterval(intervalId);
   }
   const decoration = weakElement.style.textDecoration;
   const style= decoration === 'none' ? 'underline' : 'none';
   decoration = style;
  }
  intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById("link");
toogle(element);
setTimeout(() => element.remove(), 10000);

FinalizationRegistry 接收一个注册器回调函数，可以利用该注册器为指定对象注册一个事件监听器，当这个对象被垃圾回收之后，会触发监听的事件，具体步骤如下。

首先，创建一个注册器：

const registry = new FinalizationRegistry(heldValue => {
  // ....
});

接着注册一个指定对象，同时也可以给注册器回调传递一些参数：

registry.register(theObject, "some value");

逻辑赋值运算符

译者注：赋值运算符 和 表达式 的区别可以看这里。

逻辑赋值运算符结合了 逻辑运算符 和 赋值表达式。逻辑赋值运算符有两种：

或等于（||=）
且等于（&&=）

// 或等于
|   a   |   b   | a ||= b | a (运算后) |
| true  | true  |   true  |        true         |
| true  | false |   true  |        true         |
| false | true  |   true  |        true         |
| false | false |   false |        false        |
a ||= b
// 等同于:
a || (a = b);

// 且等于
|   a   |   b   | a &&= b | a (运算后) |
| true  | true  |   true  |        true         |
| true  | false |   false |        false        |
| false | true  |   false |        false        |
| false | false |   false |        false        |
a &&= b
// 等同于:
a && (a = b);

数字分隔符

通过这个功能，我们利用 “（_，U+005F）” 分隔符来将数字分组，提高数字的可读性：

1_000_000_000           // 十亿
101_475_938.38          // 亿万

const amount = 12345_00;  // 12,345
const amount = 123_4500;  // 123.45 (保留 4 位小数)
const amount = 1_234_500; // 1,234,500

0.000_001 // 百万分之一
1e10_000  // 10^10000

const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xA0_B0_C0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;

总结

JavaScript 是一门动态类型语言，这在某些方面来说对于 web 开发是有益的。自 ES2015 之后，JavaScript 正在快速发展。在这篇文章里面，我们着重回顾了 ES2021 的一些新特性。

尽管你的项目可能并不会用到这些新特性，但是它们的确为项目开发提供了多种可能性，不是么？