ES 2021 新特性提前知,附案例
共 6354字,需浏览 13分钟
·
2021-02-05 09:30
转自:bb老猫
https://juejin.cn/post/6914538946751889422
简介
ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 并没有像 ES2015 那样提出很多新特性,但却合并了一些有用的特性。
本文将会用通俗易懂的代码示例来介绍 ES2021 的新特性。当然在这之前,你需要了解 JavaScript 的基础知识。
以下是 ES2021 的新特性概览:
String.prototype.replaceAll
Promise.any
WeakRef
逻辑赋值运算符 数字分隔符
String.protype.replaceAll
在 ES2021 之前,要替换掉一个字符串中的所有指定字符,我们可以这么做:
const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replace(/\+/g, '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌
ES2021 则提出了 replaceAll
方法,并将其挂载在 String 的原型上,可以这么用:
const fruits = '🍎+🍐+🍓+';
const fruitsWithBanana = fruits.replaceAll('+', '🍌');
console.log(fruitsWithBanana); //🍎🍌🍐🍌🍓🍌
Promise.any
Promise.any
方法和 Promise.race
类似——只要给定的迭代中的一个 promise 成功,就采用第一个 promise 的值作为它的返回值,但与 Promise.race
的不同之处在于——它会等到所有 promise 都失败之后,才返回失败的值:
const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));
const promises = [
myFetch('/endpoint-1'),
myFetch('/endpoint-2'),
myFetch('/endpoint-3'),
];
// 使用 .then .catch
Promise.any(promises) // 任何一个 promise 成功。
.then(console.log) // 比如 ‘3’
.catch(console.error); // 所有的 promise 都失败了
// 使用 async-await
try {
const first = await Promise.any(promises); // 任何一个 promise 成功返回。
console.log(first);
}catch (error) { // 所有的 promise 都失败了
console.log(error);
}
WeakRef
WeakRef
提案主要包含两个新功能:
可以通过 WeakRef
类来给某个对象创建一个弱引用可以通过 FinalizationRegistry
类,在某个对象被垃圾回收之后,执行一些自定义方法
上述两个新功能可以同时使用,也可以单独使用,取决于你的需求。
一个 WeakRef
对象包含一个对于某个对象的弱引用,被称为 目标 或 引用。通过弱引用一个对象,可以让该对象在没有其它引用的情况下被垃圾回收机制回收。
WeakRef
主要用来 缓存 和 映射 一些大型对象,当你希望某个对象在不被其它地方引用的情况下及时地被垃圾回收,那么你就可以使用它。
function toogle(element) {
const weakElement = new WeakRef(element);
let intervalId = null;
function toggle() {
const el = weakElement.deref();
if (!el) {
return clearInterval(intervalId);
}
const decoration = weakElement.style.textDecoration;
const style= decoration === 'none' ? 'underline' : 'none';
decoration = style;
}
intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById("link");
toogle(element);
setTimeout(() => element.remove(), 10000);
FinalizationRegistry
接收一个注册器回调函数,可以利用该注册器为指定对象注册一个事件监听器,当这个对象被垃圾回收之后,会触发监听的事件,具体步骤如下。
首先,创建一个注册器:
const registry = new FinalizationRegistry(heldValue => {
// ....
});
接着注册一个指定对象,同时也可以给注册器回调传递一些参数:
registry.register(theObject, "some value");
逻辑赋值运算符
译者注:赋值运算符 和 表达式 的区别可以 看这里。
逻辑赋值运算符结合了 逻辑运算符 和 赋值表达式。逻辑赋值运算符有两种:
或等于(||=) 且等于(&&=)
// 或等于
| a | b | a ||= b | a (运算后) |
| true | true | true | true |
| true | false | true | true |
| false | true | true | true |
| false | false | false | false |
a ||= b
// 等同于:
a || (a = b);
// 且等于
| a | b | a &&= b | a (运算后) |
| true | true | true | true |
| true | false | false | false |
| false | true | false | false |
| false | false | false | false |
a &&= b
// 等同于:
a && (a = b);
数字分隔符
通过这个功能,我们利用 “(_,U+005F)” 分隔符来将数字分组,提高数字的可读性:
1_000_000_000 // 十亿
101_475_938.38 // 亿万
const amount = 12345_00; // 12,345
const amount = 123_4500; // 123.45 (保留 4 位小数)
const amount = 1_234_500; // 1,234,500
0.000_001 // 百万分之一
1e10_000 // 10^10000
const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xA0_B0_C0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;
总结
JavaScript 是一门动态类型语言,这在某些方面来说对于 web 开发是有益的。自 ES2015 之后,JavaScript 正在快速发展。在这篇文章里面,我们着重回顾了 ES2021 的一些新特性。
尽管你的项目可能并不会用到这些新特性,但是它们的确为项目开发提供了多种可能性,不是么?
1.看到这里了就点个在看支持下吧,你的「点赞,在看」是我创作的动力。
2.关注公众号
程序员成长指北
,回复「1」加入高级前端交流群!「在这里有好多 前端 开发者,会讨论 前端 Node 知识,互相学习」!3.也可添加微信【ikoala520】,一起成长。
“在看转发”是最大的支持