关于javascript:种草ECMAScript2021新特性

观感度：????????????????????

口味：赛螃蟹

烹饪工夫：5min

本文已收录在前端食堂同名仓库 Github github.com/Geekhyt，欢迎光临食堂，如果感觉酒菜还算可口，赏个 Star 对食堂老板来说是莫大的激励。

ECMAScript 是 Ecma International 颁布的一部语言规范，编号为 262，又称为 ECMA-262。

Ecma International 则是一个制订信息和通信技术方面的国际标准的组织，前身是欧洲计算机制造商协会(European Computer Manufacturers Association)，随着计算机的国际化，机构名称改为其英文单词首字母缩写。

ECMAScript 由 EMCA International 的 TC39（Technical Committee 39）技术委员会编写。

TC39 会将编写实现的 ECMAScript 规范文档提交给 Ecma International，并由其正式公布。

从 2015 年开始，ECMAScript 每年都会公布一个正式版，并在题目中写上年份，比方 「ECMAScript® 2020 Language Specification, 11th edition」，可简称为ES2020 或ES11。

如果想要新增或是改写标准，个别要经验 5 个阶段，如 TC39 Process 中所示：

Strawperson
Proposal
Draft
Candidate
Finished

经验过这 5 个阶段，进入 Finished 状态的批改才会被列入正式版的标准。

https://github.com/tc39/proposals/blob/master/finished-proposals.md

理解了 ECMAScript，上面就进入注释，让咱们来看看曾经确定的 ECMAScript2021 的新个性吧。

https://github.com/tc39/proposal-string-replaceall

先来回顾下 String.prototype.replace 的用法：

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replace('Stay', 'Always')
console.log(newStr) // Always Hungry. Stay Foolish.

如果咱们这样写，只有第一个匹配的会被替换。

想要做到全副替换就须要应用正则表达式。

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replace(/Stay/g, 'Always')
console.log(newStr) // Always Hungry. Always Foolish.

不过在应用正则的时候，如果需要是匹配 + 等符号时，还须要进行本义。如：

/\+/g

聪慧的你兴许会想到另外一种计划：应用 split + join 的形式

这里借用下官网的例子：

const queryString = 'q=query+string+parameters';
const withSpaces = queryString.split('+').join(' ');
// q=query string parameters

但这样做也是有性能开销的，加上这种操作非常常见。于是就诞生了 String.protoype.replaceAll 这个 API，咱们能够更加不便的来进行操作。

const str = 'Stay Hungry. Stay Foolish.'
const newStr = str.replaceAll('Stay', 'Always')
console.log(newStr) // Always Hungry. Always Foolish.

String.prototype.replaceAll(searchValue, replaceValue)

留神：当 searchValue 是非全局正则表达式时，replaceAll 会引发异样。如果 searchValue 是全局正则表达式时，replaceAll 与 replace 行为是统一的。

https://github.com/tc39/proposal-promise-any

const p = Promise.all([p1, p2, p3]);

Promise.all (ES2015) 只有当传入的每个 Promise 实例 (p1,p2,p3) 的状态都变成 fulfilled 时，p 才 fulfilled，只有 (p1,p2,p3) 有一个被 rejected，p 的状态就变成 rejected。
Promise.race (ES2015) 当传入的 Promise 实例 (p1,p2,p3) 中有一个率先扭转状态，那么 p 的状态就跟着扭转，也就是说返回最先扭转的 Promise 实例的返回值。
Promise.allSettled (ES2020) 只有等到所有传入的 Promise 实例 (p1,p2,p3) 都返回后果，不论是 fulfilled 还是 rejected，包装实例才会完结。
Promise.any (ES2021) 当其中任何一个 Promise 实现 (fulfilled) 时，就返回那个曾经有实现值的 Promise。如果所有的 Promise 都回绝 (rejected), 那么返回一个回绝的 Promise。

咱们能够把 Promise.any() 了解成 Promise.all() 的反向操作。

致敬韦神！

Promise.any() 跟 Promise.race() 办法很像，有一个不同点是：前者不会因为某个 Promise 变成 rejected 状态而完结。

想要理解更多细节能够看阮老师的 ECMAScript 6 入门

Promise.any(promises).then((first) => {// 任何一个 Promise 实现},
    (error) => {// 所有的 Promise 都回绝了}
)

any 顾名思义，不仅分明的形容了它的作用，而且在提供此性能的第三方库中都是这样命名的，用过的同学们肯定感觉很亲切。

https://github.com/kriskowal/q#combination
http://bluebirdjs.com/docs/api/promise.any.html
https://github.com/m0ppers/promise-any
https://github.com/cujojs/when/blob/master/docs/api.md#whenany
https://github.com/sindresorhus/p-any

官网提供了一个例子，能够利用 Promise.any() 查看哪个站点拜访最快。

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);
});

https://github.com/tc39/proposal-weakrefs

留神：要尽量避免应用 WeakRef 和 FinalizationRegistry，垃圾回收机制依赖于 JavaScript 引擎的实现，不同的引擎或是不同版本的引擎可能会有所不同。

这个提案次要包含两个次要的新性能：

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

它们能够离开应用也能够一起应用。

WeakRef 实例不会阻止 GC 回收，然而 GC 会在两次 EventLoop 之间回收 WeakRef 实例。GC 回收后的 WeakRef 实例的 deref() 办法将会返回 undefined。

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

FinalizationRegistry 注册 Callback，某个对象被 GC 回收后调用。

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

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

对于更多的细节你能够查阅：

https://github.com/tc39/proposal-weakrefs/blob/master/reference.md

https://github.com/tc39/proposal-logical-assignment

先来回顾下 ES2020 新增的空值合并操作符 ??

在当左侧操作数为 undefined 或 null 时，该操作符会将右侧操作数赋值给左侧变量。

const name = null ?? '前端食堂'
console.log(name) // 前端食堂

有了逻辑赋值运算符，咱们能够替换掉如下旧的写法：

const demo = function() {
    // 旧的写法 1
    // if (!a) {
    //     a = '西瓜'
    // }
    // 旧的写法 2
    // a = a || '西瓜'

    // 新的写法
    a ||= '西瓜' 
}

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

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

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

https://github.com/tc39/proposal-numeric-separator

数字的可读性随着数字变长而变差，数字分隔符会让长数字更加清晰。

const x = 1000000000000
const y = 1_000_000_000_000
console.log(x === y) // true

在二进制、十六进制、BigInt 等中都能够应用。

1. 如果你感觉食堂酒菜还合胃口，就点个赞反对下吧，你的赞是我最大的能源。

2. 关注公众号前端食堂，吃好每一顿饭！

3. 点赞、评论、转发 === 催更！

关于javascript:种草ECMAScript2021新特性

ECMAScript

五个流程阶段

ECMAScript2021

1.String.protoype.replaceAll

2.Promise.any

比照记忆

any 名字的由来

可预感的作用

3.WeakRefs

4.Logical Assignment Operators 逻辑赋值操作符

5.Numeric separators 数字分隔符

❤️爱心三连击