ES12新个性理解下?

新增个性:

  • String.prototype.replaceAll
  • Promise.any
  • WeakRefs
  • 逻辑运算符和赋值表达式
  • 数字分隔符号

1.replaceAll

https://github.com/tc39/propo...

先来回顾下 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.prototype.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 是全局正则表达式时,replaceAllreplace 行为是统一的。

2.Promise.any

https://github.com/tc39/propo...

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都回绝了    })
当Promise列表中的任意一个promise胜利resolve则返回第一个resolve的后果状态 如果所有的promise均reject,则抛出异样示意所有申请失败

可预感的作用

官网提供了一个例子,能够利用 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);});

3.WeakRefs

https://github.com/tc39/propo...

应用WeakRefs的Class类创立对对象的弱援用(对对象的弱援用是指当该对象应该被GC回收时不会阻止GC的回收行为)
留神:要尽量避免应用 WeakRefFinalizationRegistry,垃圾回收机制依赖于 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/propo...

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

https://github.com/tc39/propo...

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

在当左侧操作数为 undefinednull 时,该操作符会将右侧操作数赋值给左侧变量。

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

5.Numeric separators 数字分隔符

https://github.com/tc39/propo...

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

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

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