ECMAScript,简称 ES,是 JavaScript 的标准化语言规范,每年都会发布新的版本。2020 年发布的 ECMAScript 2020(ES2020)中含有一些值得关注的新特性,这些特性可以让 JavaScript 编程更加高效、简洁。
本文将介绍 ES 2020 中的新特性,并通过示例来演示这些特性的使用方法。
Promise.allSettled
Promise 是 JavaScript 异步编程的基石,经常会在 Node.js 和浏览器端的代码中用到。Promise.all 可以同时执行多个 Promise 并等待它们全部完成,但如果其中某个 Promise 出现了异常,Promise.all 就会提前停止执行。
ES2020 新增了 Promise.allSettled,它和 Promise.all 功能类似,但是它会一直执行所有 Promise 直到全部执行完毕,然后返回每个 Promise 的执行结果。无论 Promise 是否成功或失败,Promise.allSettled 都会把执行结果返回,这对于需要获取每个 Promise 的执行结果的情况很有用。
例如,假设我们有如下三个异步请求:
const p1 = fetch('/api/data1') const p2 = fetch('/api/data2') const p3 = fetch('/api/data3')
我们可以通过 Promise.allSettled 来并行执行这三个请求:
Promise.allSettled([ p1, p2, p3 ]).then(results => { console.log(results) })
输出的结果会是一个数组,里面包括每个 Promise 的执行结果。
Nullish 合并运算符
在 JavaScript 中,如果我们想要检查变量是否是 null 或 undefined,经常会使用 || 运算符,例如:
const name = value || 'default'
然而,这种方式有一个弊端,当 value 的值为 0 或空字符串时,|| 运算符仍然会返回默认值。
ES2020 引入了 Nullish 合并运算符 ??,它只会对 null 和 undefined 进行判定,0 或空字符串等值不会触发默认值。例如:
const name = value ?? 'default'
当 value 的值为 null 或 undefined 时,name 的值就会是默认值 'default'。
可选链
在 JavaScript 开发中,我们经常需要访问对象的属性或方法。但是,当我们访问的对象是 undefined 或 null 时,就会引发 TypeError 异常。为了避免这种异常,我们必须进行很多的判断操作,这会导致代码显得冗长、复杂。
ES2020 引入了可选链(Optional chaining)符号 ?.,用于简化链式调用和属性访问时的 null 和 undefined 判断。它可以让我们在访问对象的属性或方法时,直接判定是否是 null 或 undefined,即使中间出现 null 或 undefined,也不会抛出 TypeError 异常。
例如,我们有以下这个对象:
const person = { name: 'Tom', address: { city: 'Beijing' } }
我们可以使用可选链符号来访问 address 对象中的 city 属性,示例代码如下:
const city = person?.address?.city
当 person 对象为 null 或者 undefined 时,返回值也是 undefined,避免了抛出 TypeError 异常。
数组的扩展运算符应用于对象
在 ES2020 之前我们在相互拷贝两个对象时不能直接使用扩展运算符,我们需要使用 Object.assign 或者遍历对象的属性,使得拷贝的对象不会引用同一内存地址。
ES2020 增加了数组的扩展运算符(...)的应用于对象,我们可以使用这个运算符来快速进行对象的拷贝。示例代码如下:
const obj1 = { name: 'Tom', age: 20, gender: 'male' } const obj2 = { ...obj1 }
上述代码中,通过扩展运算符操作符“...”将 obj1 对象中的所有属性解构到 obj2 中,从而得到了 obj1 的一个拷贝。
数字分隔符
ES2020 新增了数字分隔符(_),它可以在数字中间插入下划线,便于阅读数字的长度和值。例如:
const number = 1_000_000
这样的代码可以避免我们数位过多而出现错误的情况,在代码中阅读数字也更加可读。
总结
ES2020 在语言规范和语言使用上的实用和提升是非常显著的。以上列举的这些新特性都是为了提高 JavaScript 编程的效率,帮助开发人员提高开发效率和代码可读性,让开发人员快速掌握语言规范和应用场景。
学习这些特性意义重大,开发人员可以更加高效、简洁地编写功能,提高开发速度和代码质量。当我们熟练掌握这些新特性后,相信会对前端工作效率的提升有着明显的好处。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647cca6a968c7c53b07bee26