ES12 中 8 个很棒的新 JavaScript 语言特性

·  阅读 9737

ES12 中 8 个很棒的新 JavaScript 语言特性

JavaScript 语言规范,也被称为 ECMAScript 或 ES,每年都会根据需求进行修改,这不,ECMAScript 2022就来了。

虽然 JavaScript 最初是一种脚本语言,但 ECMAScript 规范指出,该语言“现在被用于多种环境和较大规模的编程应用场景。”因此,JavaScript 现在应该被理解为一种功能齐全的通用型编程语言。

让我们来看看 ECMAScript 2021 引入了哪些 JavaScript 新功能吧!

String.prototype.replaceAll

replaceAll()方法接受一个字符串或正则表达式:模式pattern,这是它的第一个参数。第二个参数是模式的替换,参数名为replacement。给定这两个参数,replaceAll()将返回一个新字符串,该字符串是源字符串处理之后的字符串,其中所有pattern都替换为replacement

replaceAll()方法的工作方式与replace()完全相同,但作用于字符串中的所有出现的pattern,而不仅仅是第一个。

 let quote = "all the world's a stage, and all the men and women merely players";
 let newQuote = quote.replaceAll("all", "most of");
 console.log(newQuote);
复制代码

promise.any()

promise.any()方法接受一组promise,并允许您通过返回新的promise来响应第一个成功完成的promise。

如果任何一个 Promise 出错,promise.any()仍然会根据集合中的第一个已解决的 Promise 进行操作。

如果传入的 Promise 都没有解析,则该方法返回被拒绝的 Promise。

promise.any()——全部解决

 const promise1 = new Promise((resolve, reject) => {
   setTimeout(resolve, 1000, "1 second");
 });
 ​
 const promise2 = new Promise((resolve, reject) => {
   setTimeout(resolve, 2000, "2 second");
 });
 ​
 let promises = [promise1, promise2];
 ​
 Promise.any(promises).then((firstResolved) => {
   console.log(firstResolved); // outputs “1 second”
 })
复制代码

promise.any()——全部被拒绝

 const promise1 = new Promise((resolve, reject) => {
   setTimeout(reject, 1000, "1 second");
 });
 ​
 const promise2 = new Promise((resolve, reject) => {
   setTimeout(reject, 2000, "2 second");
 });
 ​
 let promises = [promise1, promise2];
 ​
 Promise.any(promises).then((firstResolved) => {
   console.log(firstResolved);
 }).catch((err) => { console.log("error: " + err) }) // outputs error: AggregateError: All promises were rejected
复制代码

AggregateError

AggregateError是一种特殊的错误子类,它将许多错误组合成一个汇总对象。

在上面promise.any()——全部被拒绝的例子中返回了一个AggregateError。该错误包含描述错误的消息和包含有关每个错误的详细信息的数组。

 AggregateError: All promises were rejected
   errors: Array(2)
     0: "1 second"
     1: "2 second"
       length: 2
   message: "All promises were rejected"
   stack: "AggregateError: All promises were rejected"
复制代码

New logical assignment operators

ECMAScript 2021 推出新的逻辑运算符||??&&

Nullish assignment (??=)

我们可以使用 ??= 来测试变量是否为 null 或未定义。如果变量为 null 或未定义,您可以将表达式的右侧分配给变量。

 let quote = "When goodness is lost there is morality.";
 let existingQuote = "A leader is best when people barely know he exists";
 let nonExistingQuote = null;
 existingQuote ??= quote;
 nonExistingQuote ??= quote;
 console.log(existingQuote); // A leader is best when people barely know he exists
 console.log(nonExistingQuote); // When goodness is lost there is morality.
复制代码

当作用于存在的变量时,例如existingQuote,空赋值运算符什么也不做。但是,当作用在nonExistingQuote上时,它会分配一个新值。

And assignment (&&=)

和赋值运算符 ( &&=)用于表达式的左侧。如果左侧不为null或未定义,则分配表达式的右侧。如果它是假的,则什么也不做。

 let emptyString = "";
 emptyString &&= "bar";
 console.log (emptyString); // “”
 ​
 let nonEmptyString = "foo";
 nonEmptyString &&= "bar";
 console.log(nonEmptyString); // “bar”
复制代码

Or assignment (||=)

or赋值运算符与您刚刚看到的 and 赋值运算符作用相反

 let emptyString = "";
 emptyString ||= "bar";
 console.log (emptyString); // “bar”
 ​
 let nonEmptyString = "foo";
 nonEmptyString ||= "bar";
 console.log(nonEmptyString); // “foo”
复制代码

WeakRef

WeakRef用于引用目标对象,而不会将其从垃圾回收器中拿出。一个常见的用例是WeakRef为大对象实现缓存或映射,“不希望大对象仅仅因为它出现在缓存或映射中而保持活动状态。”

FinalizationRegistry

该规范提供了消耗许多文件句柄的长时间运行进程的示例。在这种情况下,使用FinalizationRegistry可以确保没有句柄泄漏。

WeakRef一样,FinalizationRegistry更适合平台和框架开发人员的工具箱,而不是应用程序开发人员。

Numeric literal separators 数字分隔符

 let distanceToSun = 91772000000;
 let distanceToSun = 91_772_000_000;
复制代码

上面两种赋值结果一样,可以让我清楚的查看大数字。

Array.prototype.sort improvements

这更像是一个注释而不是一个功能。ECMAScript 2021 规范对Array.prototype.sort工作原理的描述更加准确。这种变化应该会减少引擎之间实现起来的差异。

翻译来源:8 great new JavaScript language features in ES12 | InfoWorld www.infoworld.com/article/365…

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改