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

更新日期: 2022-05-19阅读: 1.1k标签: 特性

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工作原理的描述更加准确。这种变化应该会减少引擎之间实现起来的差异。

翻译来源:https://www.infoworld.com/article/3658393/8-great-new-javascript-language-features-in-es12.html

链接: https://fly63.com/article/detial/11534

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

ES6新特性--var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

Angular 8的新特性介绍

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

Js的用途和特性

JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

十个超级实用的 JS 特性

你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!