ECMAScript 2020 的新增功能

JavaScript 是最流行的编程语言之一，每年都会添加新功能。 本文介绍 ecmascript 2020（也称为 es11）中添加的新功能。

在 ECMAScript 2015（也称为 ES6）推出之前，JavaScript 开发非常缓慢。 但自 2015 年以来，每年都会添加新功能。 请注意，虽然现代浏览器并不支持所有功能，但由于 JavaScript 编译器 Babel，新功能已经可用。 本文介绍了 ECMAScript 2020 (ES11) 中的一些最新功能。

可选链可选链调用

所有人大多数开发者都会遇到这种情况问题：

类型错误：无法读取未定义的属性“x”

此错误意味着您正在访问不属于该对象的属性。

访问对象属性

const Flowers = {colours: { red: true }}console.log(flower.colors.red ) //正常运行 console.log(flower.species.lily) // 抛出错误： TypeError: Unable to read property 'lily' ofunknown

这种情况下，JavaScript 引擎会抛出类似 throw 的错误 然而，有时一个值是否存在并不重要，因为你知道它存在。 因此，可选的链式调用很有用。

我们是由问号和点组成的可选链接运算符可用于指示不应引发错误。 如果没有值，则返回未知。

console.log(flower.species?.lily) // 输出未定义

访问数组或调用函数时也可以使用可选的链式调用。

访问数组

letflowers = ['Lily', 'Daisy', 'Rose']console.log(flowers[1 ] ) // 输出: daisyflowers = n ullconsole.log(flowers[1]) // 抛出错误: TypeError: property '1' in nullconsole.log(flowers?.[1]) // 输出：未知

函数调用

let plantFflowers = () => { return 'orchids'}console.log(plantFflowers( )) //输出： orchidsplantFflowers = nullconsole.log(plantFflowers()) // 抛出错误： TypeError: plantFflowers 不是函数 console.log(plantFflowers?.()) // 输出：未定义

Nullish Coalescing Merging Null value

当前，要为变量提供后备值，逻辑使用运算符||。 仍然需要。 虽然这适用于很多情况，但在某些特殊场景下并不适用。 例如，初始值是布尔值或数字。 例如，假设您要为变量分配一个数字。 如果变量的初始值不是数字，则默认为 7：

let nNumber = 1let myNumber = number || 7

变量 myNumber 等于 1，因为左边的 (number) 是真实值 1。 但是如果变量 number 是 0 而不是 1 呢？

let number = 0let myNumber = number || 7

0 是一个假值，所以 0 仍然是一个数字。 变量 myNumber 被分配右侧值 7。 但结果并不是我们想要的。 幸运的是，连接运算符由两个问号组成： ?? 您可以检查变量编号是否为数字，而无需编写任何其他代码。

let number = 0let myNumber = number ?? 7

只有当左侧的值为空或未定义时，运算符右侧的值才有效。 因此，本例中变量 myNumber 的值为 0。

私有字段

许多具有类的编程语言允许您将它们定义为公共、受保护或私有属性。 。 公共属性可以从类或子类外部访问，受保护属性只能从子类访问，私有属性只能从类内部访问。 JavaScript 从 ES6 开始就支持类语法，但直到现在才引入私有字段。 要定义私有属性，必须在其前面添加井号 #。

class Flower { #leaf_color = "green"; 构造函数(name) { this.name = name; return this. #leaf_color; }}const orchid = new Flower("orchid");console.log(orchid.get_color()); // 输出：greenconsole.log(orchid.#leaf_color) // 错误：语法错误：私有字段 '#leaf_color' 必须在封闭类中声明

从外部访问类的私有属性将不可避免地报告错误。

静态字段静态字段

当使用类时要使用方法中，必须首先实例化该类，如下所示。

class Flower { add_leaves() { console.log("添加叶子"); }}constrose = new w Flower();rose.add_leaves();Fflower.add_leaves() // 抛出错误： TypeError: Flower.add_leaves 不是函数

您正在尝试访问 Flower 类的以下方法。 如果不实例化就会出错。 但是，由于静态字段，类方法可以使用 static 关键字声明并从外部调用。

class Flower {constructor(type) { this.type = type; } static create_flower(type) { return new Flower(type); } }}const Rose = Flower.create_flower("Rose"); // 正常操作

顶级 Await 顶级 Await

目前，如果您使用await 来检索函数的结果，则使用await 的函数必须使用async 关键字进行定义。

const func = async () => { const response = wait fetch( url )}

问题在于，除非使用立即调用的函数表达式（IIFE），否则基本上不可能在全局范围内等待结果。

(async () => { const response = wait fetch(url)})( )

但是，随着顶级 After Await 的引入，您不需要将代码包装在像这样的异步函数中：

const response = wait fetch(url)

在解决模块依赖关系或初始源不可用且需要备份源时，此功能非常有用

let Vuetry { Vue = wait。 import('url_1_to_vue')} catch { Vue = wait.import('url_2_to_vue)}

Promise.allSettled 方法

如果你想等待多个 Promise 返回结果，请使用 Promise.all( [你可以使用promise_1, Promise_2])但问题是Promise.all([promise_1, Promise_2]) 如果一个请求失败，您可能希望另一个请求的结果成功返回。

promise_1 = Promise.resolve('hello')promise_2 = new Promise((resolve,reject) = 。 > setTimeout(拒绝, 200, '问题'))Promise.allSettled([promise_1, Promise_2]) .then(([promise_1_result, Promise_2_result]) => { console.log(promise_1_result) // 输出: {Status: 'fulfilled', Value: 'hello'} console.log(promise_2_result) //输出：{状态：“已拒绝”，原因：“问题”}）

成功 Promise 返回一个带有状态和值的对象，失败的 Promise 返回一个带有状态和原因的对象。

动态导入 动态导入

您可能在 Webpack 的模块绑定中使用过动态导入。 不过，对此功能的本机支持已经到来。

// Alert.jsexport 的默认值 { show() { // 代码 }}// 使用 Alert.js 文件 import('/components/Alert.js') .then( Alert => { Alert.show () })

考虑到许多应用程序使用以下内容： 使用 webpack 等模块打包器来转换和优化代码。 这个功能仍然不是很有用。

MatchAll 匹配所有项目

搜索 MatchAll 时的字符为对于字符串中的所有正则表达式匹配和位置很有用。

const 正则表达式 = /\b(apple)+\b/;const 水果 ="梨、苹果、香蕉、苹果、橙子、苹果";for (const match of Fruits.match(regex)) { console.log(match); // 输出 // // 'apple' // 'apple'

相比之下，matchAll 返回更多信息，包括找到匹配项的索引。

for (const match of Fruits.matchAll(regex)) { console.log(match);}// 输出 // // [// 'apple',// 'apple',// 索引: 6,//输入:'梨,苹果,香蕉,苹果,橙子,苹果',//组:未定义//],//[//'苹果',//'苹果',//索引:21, // 输入：'梨，苹果，香蕉，苹果，橙子，苹果'，//组：未定义//]，//[//'苹果'，//'苹果'，//索引：36，//输入： 'pear, apple,banana,apple,orange,apple',// groups:unknown// ]

globalThis Global 对象

JavaScript 可以在浏览器或 Node.js 中使用 它可以在多种环境中运行，例如 。 浏览器中可用的全局对象是变量 window，但在 Node.js 中它是一个称为 global 的对象。 引入globalThis是为了在不同的环境中使用统一的全局对象。

// 浏览器窗口 == globalThis // true// node.jsglobal == globalThis // true

BigInt

JavaScript 中可以准确表示的最大数字是 2^53 - 1。 BigInt 允许您创建更大的数字。

const theBiggerNumber = 9007199254740991nconst EvenBiggerNumber = BigInt(9007199254740991)

结论

我希望你能找到这篇文章 如果您像我一样，您会对 JavaScript 的新功能感到兴奋。 如果您想了解更多信息，请查看 tc39 委员会的官方 Github 存储库。

推荐教程：《JS教程》

PHP快速学习视频免费教程（从初学者到高手）

如何学习PHP？ 我该如何开始学习PHP？我应该从哪里学习PHP？如何快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• ECMAScript 2020的新功能

本文由主机参考刊发，转载请注明：ECMAScript 2020 的新增功能 https://zhujicankao.com/142848.html