ES12中新的JavaScript 语言特性

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

JavaScript 语言规范,也称为 ECMAScript 或 ES,是一个动态文档,每年都会根据不断变化的需求进行修改。虽然 JavaScript 最初是一种脚本语言,但 ECMAScript 规范概述指出,该语言“现在被用于许多不同环境和规模的全方位编程任务。”因此,JavaScript 被更好地理解为一种功能齐全的通用用途的编程语言。

随着即将发布的 ECMAScript 2022 版本即将发布,让我们来看看 ECMAScript 2021 中引入的新 JavaScript 语言功能。

String.prototype.replaceAll

replaceAll() 方法将一个字符串或正则表达式(称为模式)作为其第一个参数。第二个参数是模式的替换。给定第一个和第二个参数,replaceAll() 返回一个新字符串,它将作为源字符串,其中模式的所有实例都被替换为替换。源字符串不受影响。

在 ECMAScript 2021 中,replaceAll() 与 ECMAScript 2020 的 matchAll() 一起改进了 JavaScript 内置 String 对象的固有功能。

replaceAll() 方法的工作方式与 replace() 完全相同,但适用于字符串中的所有匹配项,而不仅仅是第一个匹配项。经过多年不得不使用库或手动编码的解决方案,这是一个受欢迎的补充。

在示例1中,我例举了一个简单的示例,其中我们修改了一些莎士比亚作品。

示例1、 replaceAll()

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.all() 的对比,后者在任何错误或拒绝时停止;与 promise.allSettled() 相比,它可以让您观察在集合中解决的所有promise,即使存在中间错误。)

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

如果传入的 Promise 都没有解析,则 promise.any() 方法返回一个被拒绝的 Promise。它返回的错误是 AggregateError,它也是 ECMAScript 2021 引入的一种新错误类型。AggregateError 表示遇到的所有错误的摘要。

我们可以使用 promise.any() 将多个 Promise 汇总为一个。该承诺将解决首先解决的集合,忽略错误和拒绝。

下面有一个简单的示例。

示例2、promise.any()——全部解决

接着,我们开始看示例3,其中所有的 Promise 最终都因为被拒绝而失败。

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”
})

示例3、promise.any()——全部被拒绝

在示例3 中,我们添加了一个 catch 处理程序,它在两个 Promise 都被拒绝后触发。请注意,AggregateError 是一个包含有关失败承诺的信息的对象。

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,它是 ECMAScript 2021 中的另一个新特性。

AggregateError

AggregateError 是一种特殊的错误子类,它将许多错误组合成一个汇总对象。如您所见,特性 3 中的 promise.any() 方法创建了一个 AggregateError。

在该示例中,传递给 promise.any() 的所有promise都失败了,因此该方法返回了 AggregateError。错误包含描述错误的消息和包含有关每个错误的详细信息的数组。

但是在示例4 显示了返回的错误内容。

示例4、 AggregateError

如上所示,AggregateError 可以通过 AggregateError.errors 访问导致错误的承诺消息。

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"

新的逻辑赋值运算符

JavaScript 有熟悉的数学赋值运算符,例如 +=,它可以一次性执行运算和赋值,作为一种方便。ECMAScript 2021 为逻辑运算符 ||、?? 和 && 添加了类似的支持。

让我们来看看其中的每一个。

空赋值 (??=)

我们可以使用 nullish 赋值运算符来测试变量是否为 null 或undefined。如果变量为 null 或undefined,我们可以将表达式的右侧分配给变量。

接着,我们继续看示例5中的一个示例。

示例5、 ??= 实际赋值

请注意,当用于存在的变量时,例如 existingQuote,nullish 赋值运算符什么也不做。但是,当在 nonExistingQuote 上使用时,它会为报价分配一个新值。

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 的字符串为空(在JavaScript 中是一个假值),nullish 赋值也不会替换它;它将保持为空字符串。这就是运算符的本质:它只测试 null 或 undefined。

和赋值 (&&=)

和赋值运算符 (&&=) 测试表达式的左侧。如果左侧为真,则分配表达式的右侧。如果它是假的,则操作员什么也不做。

下面我们看特性6中的一个简单的示例。

示例6、赋值运算符 ( &&=)

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

let emptyString = "";
emptyString &&= "bar";
console.log (emptyString); // “”
let nonEmptyString = "foo";
nonEmptyString &&= "bar";
console.log(nonEmptyString); // “bar”

在特性6 中,第一个控制台日志输出一个空字符串。这是因为空字符串是虚假的,因此 &&= 运算符不会为其分配新值。第二个控制台输出“bar”。这是因为 nonEmptyString 是“foo”,这是一个真值。

&&= 是一种边缘情况运算符,但在您需要时很有用。

或赋值 (||=)

or 赋值运算符与您刚刚看到的 and 赋值运算符相反。我们可以使用清单 6 中的相同示例,这次将 &&= 替换为 ||=。

示例 7、||= 实际赋值

let emptyString = "";
emptyString ||= "bar";
console.log (emptyString); // “bar”
let nonEmptyString = "foo";
nonEmptyString ||= "bar";
console.log(nonEmptyString); // “foo”

如果表达式的左侧是假的,||= 赋值运算符解析到右侧。因此,在这种情况下,emptyString 变为“bar”。nonEmptyString 变量保持其真实值“foo”。

WeakRef

WeakRef 用于引用目标对象,而不会将其从垃圾收集中保存。这是一个相当深奥的语言功能,工作编码人员很少使用。WeakRef 的一个常见用例是实现大对象的缓存或映射,“不希望大对象仅仅因为它出现在缓存或映射中而保持活动状态。”

因此,如果发现自己正在为大型实体构建缓存解决方案,请记住 WeakRef 存在。否则,如果不确定是否需要 WeakRef 变量引用,应该避免使用它。(规范本身建议避免使用。)

FinalizationRegistry

JavaScript 几乎与 Java 弃用 Object.finalize() 几乎同时引入了 FinalizationRegistry,这有点编程讽刺。这些特征实际上是相似的。与 WeakRef 一样,规范警告开发人员远离用户定义的终结器。

但是,对于某些用例,新的 FinalizationRegistry 可能正是我们所需要的。该规范提供了消耗许多文件句柄的长时间运行进程的示例。在这种情况下,使用 FinalizationRegistry 可以确保没有句柄被泄露。

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

Numeric literal separators

数字分隔符是一种很好的方式,可以让我们更轻松地查看大量数字。JavaScript 不能像自然语言那样使用逗号,因为那个符号已经被占用了。因此,ECMAScript 2021 引入了下划线。

第一输入方式:

let distanceToSun = 91772000000;

第二种输入方式:

let distanceToSun = 91_772_000_000;

但是第二种方式更容易阅读。

Array.prototype.sort improvements

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

来源: WEB前端开发社区

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

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

点击更多...

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