乐趣区

关于javascript:ES12你需要知道的新特性

jiezi

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 是全局正则表达式时，replaceAll 与 replace 行为是统一的。

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 的回收行为)
留神：要尽量避免应用 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/propo…

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

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

先来回顾下 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);

5.Numeric separators 数字分隔符

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

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

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

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

退出移动版