不容错过!ES2020的七大新特性

原创
开发 前端
ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。本文以简单的代码示例来介绍 ES2020新特性。

【51CTO.com原创稿件】前言

ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大量新特性。但也添加了许多有趣且有用的特性。

本文以简单的代码示例来介绍 ES2020新特性。这样,你可以很快理解这些新功能,而不需要多么复杂的解释。

可选链操作符(Optional Chaining)

可选链 可让我们在查询具有多个层级的对象时,不再需要进行冗余的各种前置校验。

日常开发中,当需要访问嵌套在对象内部好几层的属性时,可能就会得到臭名昭著的错误Uncaught TypeError: Cannot read property...,这种错误,让整段程序运行中止。

于是,你就要修改你的代码来处理属性链中每一个可能的undefined对象,比如:

  1. let nestedProp = obj && obj.first && obj.first.second

在访问 obj.first.second 之前,要先确认 obj 和 obj.first 的值非 null(且不是 undefined)。

有了可选链式调用 ,可以大量简化类似繁琐的前置校验操作,而且更安全:

  1. let nestedProp = obj?.first?.second

如果obj或obj.first是null/undefined,表达式将会短路计算直接返回undefined。

可选链操作符的支持情况:

空位合并操作符(Nullish coalescing Operator)

当我们查询某个属性时,经常会给没有该属性就设置一个默认的值,比如下面两种方式:

  1. let c = a ? a : b // 方式1 
  2. let c = a || b // 方式2 

这两种方式有个明显的弊端,它都会覆盖所有的假值,如(0, '', false),这些值可能是在某些情况下有效的输入。

  1. let x = { 
  2. profile: { 
  3.   name'浪里行舟'
  4.   age: '' 
  5. console.log(x.profile.age || 18) //18 

上例中age的属性为空字符串,却被等同为假值,为了解决这个问题,ES2020诞生了个新特性--空位合并操作符,用 ?? 表示。如果表达式在??的左侧运算符求值为 undefined 或 null,就返回其右侧默认值。

  1. let c = a ?? b; 
  2. // 等价于let c = a !== undefined && a !== null ? a : b; 

例如有以下代码:

  1. const x = null
  2. const y = x ?? 500; 
  3. console.log(y); // 500 
  4. const n = 0 
  5. const m = n ?? 9000; 
  6. console.log(m) // 0 

空位合并操作符的支持情况:

Promise.allSettled

我们知道 Promise.all 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话,则整个Promise.all 调用会立即终止,并返回一个reject的新的 Promise 对象。

  1. const promises = [ 
  2. Promise.resolve(1), 
  3. Promise.resolve(2), 
  4. Promise.reject('error'
  5. ]; 
  6. ​ 
  7. Promise.all(promises) 
  8. .then(responses => console.log(responses)) 
  9. .catch(e => console.log(e)) // "error" 

假如有这样的场景:一个页面有三个区域,分别对应三个独立的接口数据,使用 Promise.all 来并发请求三个接口,如果其中任意一个接口出现异常,状态是reject这会导致页面中该三个区域数据全都无法出来,这个状况我们是无法接受,Promise.allSettled的出现就可以解决这个痛点:

  1. Promise.allSettled([ 
  2. Promise.reject({ code: 500, msg: '服务异常' }), 
  3. Promise.resolve({ code: 200, list: [] }), 
  4. Promise.resolve({ code: 200, list: [] }) 
  5. ]).then(res => { 
  6. console.log(res) 
  7. /* 
  8.       0: {status: "rejected", reason: {…}} 
  9.       1: {status: "fulfilled", value: {…}} 
  10.       2: {status: "fulfilled", value: {…}} 
  11.   */ 
  12. // 过滤掉 rejected 状态,尽可能多的保证页面区域数据渲染 
  13. RenderContent( 
  14.   res.filter(el => { 
  15.     return el.status !== 'rejected' 
  16.   }) 
  17. }) 

Promise.allSettled跟Promise.all类似,其参数接受一个Promise的数组,返回一个新的Promise唯一的不同在于,它不会进行短路,也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态,而不管是否处理成功。

Promise.allSettled的支持情况:

String.prototype.matchAll

如果一个正则表达式在字符串里面有多个匹配,现在一般使用g修饰符或y修饰符,在循环里面逐一取出。

  1. function collectGroup1 (regExp, str) { 
  2. const matches = [] 
  3. while (true) { 
  4.   const match = regExp.exec(str) 
  5.   if (match === null) break 
  6.   matches.push(match[1]) 
  7. return matches 
  8. console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`)) 
  9. // [ 'foo''bar''baz' ] 

值得注意的是,如果没有修饰符 /g, .exec() 只返回第一个匹配。现在通过String.prototype.matchAll方法,可以一次性取出所有匹配。

  1. function collectGroup1 (regExp, str) { 
  2. let results = [] 
  3. for (const match of str.matchAll(regExp)) { 
  4.   results.push(match[1]) 
  5. return results 
  6. console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`)) 
  7. // ["foo""bar""baz"
  8. ​ 

上面代码中,由于string.matchAll(regex)返回的是遍历器,所以可以用for...of循环取出。

String.prototype.matchAll的支持情况:

Dynamic import

现在前端打包资源越来越大,前端应用初始化时根本不需要全部加载这些逻辑资源,为了首屏渲染速度更快,很多时候都是动态导入(按需加载)模块,比如懒加载图片等,这样可以帮助您提高应用程序的性能。

其中按需加载这些逻辑资源都一般会在某一个事件回调中去执行:

  1. el.onclick = () => { 
  2. import('/modules/my-module.js'
  3.   .then(module => { 
  4.     // Do something with the module. 
  5.   }) 
  6.   .catch(err => { 
  7.     // load error; 
  8.   }) 

import()可以用于script脚本中,import(module) 函数可以在任何地方调用。它返回一个解析为模块对象的 promise。

这种使用方式也支持 await 关键字。

  1. let module = await import('/modules/my-module.js'); 

通过动态导入代码,您可以减少应用程序加载所需的时间,并尽可能快地将某些内容返回给用户。

Dynamic import的支持情况:

BigInt

javascript 在 Math 上一直很糟糕的原因之一是只能安全的表示-(2^53-1)2^53-1的值,即Number.MIN_SAFE_INTEGERNumber.MAX_SAFE_INTEGER,超出这个范围的整数计算或者表示会丢失精度。

  1. var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991 
  2. ​ 
  3. num = num + 1; // -> 9007199254740992 
  4. ​ 
  5. // 再次加 +1 后无法正常运算 
  6. num = num + 1; // -> 9007199254740992 
  7. ​ 
  8. // 两个不同的值,却返回了true 
  9. 9007199254740992 === 9007199254740993 // -> true 

于是 BigInt 应运而生,它是第7个原始类型,可安全地进行大数整型计算 你可以在BigInt上使用与普通数字相同的运算符,例如 +, -, /, *, %等等。

创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可。例如,123 变为 123n。也可以使用全局方法 BigInt(value) 转化,入参 value 为数字或数字字符串。

  1. const aNumber = 111; 
  2. const aBigInt = BigInt(aNumber); 
  3. aBigInt === 111n // true 
  4. typeof aBigInt === 'bigint' // true 
  5. typeof 111 // "number" 
  6. typeof 111n // "bigint" 

只要在数字末尾加上 n,就可以正确计算大数了:

  1. 1234567890123456789n * 123n; 
  2. // -> 151851850485185185047n 

不过有一个问题,在大多数操作中,不能将 BigInt与Number混合使用。比较Number和 BigInt是可以的,但是不能把它们相加。

  1. 1n < 2  
  2. // true 
  3. ​ 
  4. 1n + 2 
  5. // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions 

BigInt的支持情况: 

globalThis

globalThis 是一个全新的标准方法用来获取全局 this 。之前开发者会通过如下的一些方法获取:

  • 全局变量 window:是一个经典的获取全局对象的方法。但是它在 Node.js 和 Web Workers 中并不能使用

  • 全局变量 self:通常只在 Web Workers 和浏览器中生效。但是它不支持 Node.js。一些人会通过判断 self 是否存在识别代码是否运行在 Web Workers 和浏览器中

  • 全局变量 global:只在 Node.js 中生效

过去获取全局对象,可通过一个全局函数:

  1. // ES10之前的解决方案 
  2. const getGlobal = function(){ 
  3. if(typeof self !== 'undefined'return self 
  4. if(typeof window !== 'undefined'return window 
  5. if(typeof global !== 'undefined'return global 
  6. throw new Error('unable to locate global object'
  7. ​ 
  8. // ES10内置 
  9. globalThis.Array(0,1,2) // [0,1,2] 
  10. ​ 
  11. // 定义一个全局对象v = { value:true } ,ES10用如下方式定义 
  12. globalThis.v = { value:true } 

globalThis 目的就是提供一种标准化方式访问全局对象,有了 globalThis 后,你可以在任意上下文,任意时刻都能获取到全局对象。

如果您在浏览器上,globalThis将为window,如果您在Node上,globalThis则将为global。因此,不再需要考虑不同的环境问题。

  1. // worker.js 
  2. globalThis === self 
  3. // node.js 
  4. globalThis === global 
  5. // browser.js 
  6. globalThis === window 

新提案也规定了,Object.prototype 必须在全局对象的原型链中。下面的代码在最新浏览器中已经会返回 true 了:

  1. Object.prototype.isPrototypeOf(globalThis); // true 

globalThis的支持情况:

参考文章

作者简介:

浪里行舟:硕士研究生,专注于前端。个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快速吸收的一系列优质文章!

【51CTO原创稿件,合作站点转载请注明原文作者和出处为51CTO.com】

责任编辑:庞桂玉 来源: 51CTO
相关推荐

2017-07-25 14:15:10

2010-09-29 14:08:31

2020-08-05 10:13:14

JavaScript开发

2010-08-03 13:30:39

AdobeFlexBu

2019-07-04 08:00:00

MySQL存储开发

2020-05-08 09:13:48

前端开发

2018-09-30 14:20:03

编程语言Java新特性

2021-08-16 18:26:22

戴尔

2015-08-07 09:07:45

Java新特性面向未来

2023-11-24 07:50:35

后端网页开发

2016-02-29 15:00:48

2022-05-01 12:19:33

云原生公有云云计算

2019-12-26 09:00:27

云计算悖论智能

2019-07-18 16:46:29

Web开发趋势Node.js

2013-10-16 10:11:35

JavaScript项目框架

2011-08-10 10:41:19

虚拟化VMware ESXi

2022-01-14 12:01:44

人工智能数字化技术

2011-08-21 10:28:33

爱普生喷墨打印机

2019-10-29 09:00:00

AIOps人工智能

2022-09-22 16:17:12

css编程语言开发
点赞
收藏

51CTO技术栈公众号