“学不动了！”系列之 ES2021 抢先尝

从 ES2015（ES6）之后，每年，JS 都会在其新标准里添加一些有意思的新特性。

我们可以看一下已经进入 Stage 4 阶段的提案，这些提案到时候都会进入 ES2021 的标准。

（Stage 4 是啥？）TC39 在把提案转换为最后的标准之前，这些提案都会经历 State 1～4 四个阶段。只有到 Stage 4 的提案会被标记为“已完成”，并在将来进入到下一个 ES 标准里。有兴趣的话，可以点击这里查看目前每个 Stage 都有哪些提案。

特性一览

String.prototype.replaceAll

大家应该都使用过 String.prototype.replace 来替换字符串中的某些匹配给定正则表达式的部分。但是，如果我们所使用的匹配规则不是一个正则表达式，而是一个普通的字符串，只有 第一个 匹配的才会被替换。

const str = 'I like frontend. I like JavaScript.';const newStr = str.replace('like', 'love');newStr;// "I love frontend. I like JavaScript."

如果你需要替换所有的 "like"，那我们只能用正则表达式 /like/g 来进行匹配。有

了 String.prototype.replaceAll 这个 API，我们就可以轻松替换掉所有的字符串啦。

const str = 'I like frontend. I like JavaScript.';const newStr = str.replaceAll('like', 'love');newStr;// "I love frontend. I love JavaScript."

其实这个 API 在一些浏览器的最新版本已经得到了实现，只是还未进入标准。比如在 Edge、Opera 或者 Node.js 中我们就暂时无法使用这个 API。

Promise.any

Promise 在过去的几年里，已经更新过了若干的新的 API。除了 ES6 的 Promise.all、Promise.race 之外，还有去年发布的 ES2020 中的 Promise.allSettled。现在，我们来看一个新的 API：Promise.any。从字面意思来看，相信聪明的你应该能大致猜出这个 API 的作用。

与 Promise.all 类似，Promise.any 也接受一个 Promise 的数组。当其中任何一个 Promise 完成（fullfill）时，就返回那个已经有完成值的 Promise。如果所有的 Promise 都拒绝（reject），则返回一个拒绝的 Promise，该 Promise 的返回值是一个 AggregateError 对象。我们可以把 Promise.any 理解成 Promise.all 的相反操作。

Promise.any(promises).then(  (first) => {    // 任何一个 Promise 完成了  },  (error) => {    // 所有的 Promise 都拒绝了  });

逻辑赋值操作符

我们知道，下面的代码：

let a = 0;a = a + 2;

可以简写为：

let a = 0;a += 2;

那么这个新的标准中，逻辑表达式的操作符（&&、||、??）也可以简写啦。（关于 ES2020 标准的 ?? 操作符，后文会稍微补充一下）。我们看一下示例代码：

// 等同于 a = a || ba ||= b;// 等同于 c = c && dc &&= d;// 等同于 e = e ?? f// 咦，?? 这是啥e ??= f;

在这里，补充一下去年发布的标准中的新的逻辑操作符 ?? 的用法。大家可能遇到过，如果一个变量是空，需要给它赋值为一个默认值的情况。新手同学可能会这么写：

let count = realCount || '无法获取'

但是，以上的代码会有一个 bug。如果 realCount 的值是 0，则会被当作取不到其值，会取到 '无法获取' 这个字符串。而如果我们使用了 ??，只有当操作符左边的值是 null 或者 undefined 的时候，才会取操作符右边的值：

let count = realCount ?? '无法获取'

数字分隔符

如果你要写一个很长的数字的时候：

let x = 233333333

数字太长会导致可读性很差。使用了数字分隔符 _ （下划线），就可以让数字读的更清晰：

let x = 2_3333_3333// x 的值等同于 233333333，只是这样可读性更强，不用一位一位数了

WeakRef

WeakRef 是一个 Class，一个 WeakRef 对象可以让你拿到一个对象的弱引用。这样，就可以不用阻止垃圾回收这个对象了。我们可以使用其构造函数来创建一个 WeakRef 对象

// someObj 不会因为 ref 引用了这个对象，而不会被垃圾回收let ref = new WeakRef(someObj);

那我们在使用上述代码中的 someObj 对象时，就可以用 WeakRef.prototype.deref() 来取道。但是，在被引用对象被垃圾回收之后，这个函数就会返回 undefined。

// 如果 someObj 被垃圾回收了，则 obj 就会是 undefinedlet obj = ref.deref();

Intl.ListFormat

Intl.ListFormat 是一个构造函数，用来处理和多语言相关的对象格式化操作。来通过一个例子了解一下。

const list = ['Apple', 'Orange', 'Banana']new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);// "Apple, Orange and Banana"new Intl.ListFormat('zh-cn', { style: 'short', type: 'conjunction' }).format(list);// 会根据语言来返回相应的格式化操作// "Apple、Orange和Banana"

这个 API 支持多国语言，具体的 API 可以参考 这里。

Intl.DateTimeFormat API 中的 dateStyle 和 timeStyle 的配置项

Intl.DateTimeFormat 是一个用来处理多语言下的时间日期格式化的函数。ES2021 中给这个函数添加了两个新的参数：dateStyle 和 timeStyle。下面我们来通过例子来看一下这两个参数的用法：

let o = new Intl.DateTimeFormat("en" , {  timeStyle: "short"});console.log(o.format(Date.now())); // "13:31"let o = new Intl.DateTimeFormat("en" , {  dateStyle: "short"});console.log(o.format(Date.now())); // "21.03.2012"// 可以通过同时传入 timeStyle 和 dateStyle 这两个参数来获取更完整的格式化时间的字符串let o = new Intl.DateTimeFormat("en" , {  timeStyle: "medium",  dateStyle: "short"});console.log(o.format(Date.now())); // "21.03.2012, 13:31"

读完是不是心动了？这些 API 在最新版的 Chrome 都已经得到了支持，赶紧尝尝鲜吧。如果要在生产环境中使用，记得处理兼容性问题哦。

头图：Unsplash

作者：陈宇清

原文：https://mp.weixin.qq.com/s/O78fK2Yh_XQE1y23QSQxRg

原文：“学不动了！”系列之 ES2021 抢先尝

来源：微医大前端技术 - 微信公众号 [ID：wed_fed]

转载：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。