共计 3317 个字符,预计需要花费 9 分钟才能阅读完成。
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
都回绝 (rejecte
d), 那么返回一个回绝的 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 等中都能够应用。