每年半小时学习 ES 新特性

这是我参与更文挑战的第4天，活动详情查看：更文挑战

先简单了解一下 ECMAScript 跟 JavaScript 的关系。ECMAScript 是语言规范，JavaScript 是该规范的一种实现。我们通常认为 JavaScript 等价于 ECMAScript，但完整的 JavaScript 实现实际包含了三部分：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）。

我们在使用 JavaScript 开发项目时如果遇到问题，通常利用 Google 或者 stack overflow 都能获得解答。但当我们通过常规的方式无法获得想要的结果时，就应该查询规范了，不妨在 ECMA-262 全局搜索一下试试~

ES6 有比较大的改动，建议翻阅阮一峰的《ES6 入门教程》进行详细学习。在 ES6 之后，ECMAScript 每年都会有少量新特性增加。而对我们来说，只要每年花上半小时，足以充分学习并掌握这些新增特性。

ES7~ ES11相关内容可以参看前端内参。

ES12

String.prototype.replaceAll

该方法将字符串内所有符合匹配规则的字符替换掉，返回一个全新的字符串。

let str = 'Hello, world';
str.replaceAll('l', ''); // "Heo, word"
// 相当于
str.replace(/l/g, '');

需要注意的是如果该方法的匹配规则是正则表达式，需要有 g 标识符，不然会报错。

str1.replaceAll(/l/, '');  // TypeError: String.prototype.replaceAll called with a non-global RegExp argument

Promise.any

接受一个项全为 promise 的数组，当其中任意一个 promise 成功 resolve 就返回第一个 resolve 的结果，如果所有都失败则抛出异常。

Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 1000, '我是第一个 promise')),
  new Promise((resolve, reject) => setTimeout(resolve, 2000, '我是第二个 promise')),
  new Promise((resolve, reject) => setTimeout(resolve, 3000, '我是第三个 promise')),
])
.then(value => console.log(value)) // 我是第二个 promise
.catch (err => console.log(err))

//---------------------
Promise.any([
  Promise.reject(),
  Promise.reject(),
  Promise.reject()
])
.then(value => console.log(value))
.catch (err => console.log(err)) //AggregateError: All promises were rejected

WeakRefs

这个提案主要包括两个主要的新功能：

使用 WeakRef 类创建对象的弱引用
使用 FinalizationRegistry 类对对象进行垃圾回收后，运行用户定义的终结器

它们可以分开使用，也可以一起使用。

WeakRef 对象包含对对象的弱引用，这个弱引用被称为该 WeakRef 对象的 target 或者是 referent。对对象的弱引用是指当该对象应该被 GC 回收时不会阻止 GC 的回收行为。

let ref = new WeakRef(obj)
let isLive = ref.deref() // 如果 obj 被垃圾回收了，那么 isLive 就是 undefined

FinalizationRegistry 能力：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。

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

// 通过 register 方法，注册任何你想要清理回调的对象，传入该对象和 heldValue
registry.register(theObject, "some value");

Logical Assignment Operators（逻辑赋值操作符）

新增了三个逻辑赋值操作符，如下所示：

a ||= b;
// 等价于
a || (a = b);

a &&= b;
// 等价于
a && (a = b);

a ??= b;
// 等价于
a ?? (a = b);

Numeric separators（数字分割符）

可以在数字之间增加可视化分隔符，通过下划线 _ 来分割数字，增加可读性。

let budget = 1_000_000_000_000;
budget === 10 ** 12; // true

let nibbles = 0b1010_0001_1000_0101;
console.log(!!(nibbles & (1 << 7))); // true