共计 2876 个字符,预计需要花费 8 分钟才能阅读完成。
大家好,我是前端队长 Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿态。
以下注释:
2021 年 6 月 22 日,第 121 届 Ecma 国内(Ecma International)大会以近程会议模式召开。正式通过了 ES2021 规范,ECMAScript 2021(ES12)成为事实的 ECMAScript 规范。
本文简要介绍了 JavaScript 往年新加了哪些语法,还好不是很多。
次要有 5 个新个性:
- 逻辑赋值运算符
- 数字分隔符
- Promise.any & AggregateError
- String.prototype.replaceAll
- WeakRefs & FinalizationRegistry 对象
逻辑赋值运算符
??= &&= 和 ||=
??=
的判断逻辑和 ??
统一,左值为 null 或 undefined 时返回右值,否则返回左值。
不同的是 ??= 蕴含向左值赋值的操作。类比于于+=
-=
中的等号。
// 旧
let a = null;
a = a ?? 'daotin';
a = a && 'daotin';
a = a || 'daotin';
// 新
let a = null;
a ??= 'daotin';
a &&= 'daotin';
a ||= 'daotin';
数字分隔符
容许数值字面量两头蕴含不间断_
,以进步可读性。
1_000_000_000 // Ah, so a billion
101_475_938.38 // And this is hundreds of millions
let a = 1_1; // 11
let a = 1__1 // 谬误,只容许一个下划线作为数字分隔符
let a = 1_; // 谬误,分隔符不能在尾部
let a = _1; // 谬误,分隔符不能在头部
Number(1_1); // 11
Number('1_1'); // NaN
留神 :分隔符不能在尾部和头部, 只能在数字之间,只容许一个下划线作为数字分隔符,不可间断。分隔符不影响数值的类型转换值,也无奈在字符串转数值时被辨认。
Promise.any & AggregateError
Promise.any
办法:any 承受 Promise 数组作为参数,返回合成的 Promise。只有给定的迭代中的一个 promise
胜利,就采纳第一个 promise
的值作为它的返回值,
const promises = [fetch('/endpoint-a').then(() => 'a'),
fetch('/endpoint-b').then(() => 'b'),
fetch('/endpoint-c').then(() => 'c'),
];
try {const first = await Promise.any(promises);
// Any of the promises was fulfilled.
console.log(first);
// → e.g. 'b'
} catch (error) {
// All of the promises were rejected.
console.assert(error instanceof AggregateError);
// Log the rejection values:
console.log(error.errors);
// → [
// <TypeError: Failed to fetch /endpoint-a>,
// <TypeError: Failed to fetch /endpoint-b>,
// <TypeError: Failed to fetch /endpoint-c>
// ]
}
此代码示例查看哪个端点响应最快,而后将其记录下来。只有当 所有 申请都失败时,咱们才最终进入代码 catch
块,而后在其中处理错误。
多个 Promise 实例,包装成一个新的 Promise 实例:
名称 | 形容 |
---|---|
all | 只有一个 Promise 失败,立刻返回失败,全胜利返回胜利数组 |
race | ace 是较量、比赛的意思,所以顾名思义,就是看谁快,就返回谁。只有一个 Promise 实现就返回后果(无论成功失败) |
any | 只有一个 Promise 胜利,立刻返回胜利,全失败返回 AggregateError |
allSettled | 所有 Promise 实现才返回(无论成功失败),返回后果数组 |
String.prototype.replaceAll
相比于String.prototype.replace
,如果不应用全局正则表达式,就无奈替换字符串中子字符串的所有实例。只会替换第一次匹配的字符。
'hello world'.replace('o', '_'); // hell_ world
'hello world'.replace(/o/g, '_'); // hell_ w_rld
'hello world'.replaceAll('o', '_'); // hell_ w_rld
WeakRefs & FinalizationRegistry 对象
一般来说,在 JavaScript 中,对象的援用是强援用的,这意味着只有持有对象的援用,它就不会被垃圾回收。只有当该对象没有任何的强援用时,js 引擎垃圾回收器才会销毁该对象并且回收该对象所占的内存空间。
let obj = {a:1, b:2}; // 只有咱们拜访 obj 对象,这个对象就不会被垃圾回收
然而 WeakRefs 能够创立一个弱援用,对象的弱援用是指当该对象应该被 js 引擎垃圾回收器回收时不会阻止垃圾回收器的回收行为。
Weakref 实例具备一个办法 deref,该办法返回被援用的原始对象,如果原始对象已被收集,则返回 undefined 对象。
const ref = new WeakRef({name: 'daotin'});
let obj = ref.deref();
if (obj) {console.log(obj.name); // daotin
}
留神:正确应用它们须要认真思考,如果可能,最好防止应用它们。
应用 FinalizationRegistry
对象能够在垃圾回收器回收对象时执行回调函数。
// 构建监听对象被垃圾回收器革除的回调
const registry = new FinalizationRegistry(heldValue => {console.log('----', heldValue);
});
const obj = {};
const token = {};
// 注册监听
registry.register(obj, "obj deleted!", token);
// 勾销监听
registry.unregister(token);
// 可能很久当前,回调执行
// ---- obj deleted!
register 参数别离为:
•须要监听的对象•执行回调函数的参数•勾销监听用的标识符
参考链接:
•https://h3manth.com/ES2021•https://juejin.cn/post/697851…
•https://mp.weixin.qq.com/s/pRkTLu6mocANvl8UDwZPwg#at
— End —
你好,我是前端队长 Daotin,专一分享前端与认知。心愿在这里,和你分享我的前端学习和工作教训,记录个人成长。
想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿态。