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

【稿件】前言

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

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

可选链操作符（Optional Chaining）

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

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

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

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

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

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

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

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

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

空位合并操作符（Nullish coalescing Operator）

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

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

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

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

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

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

例如有以下代码：

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

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

Promise.allSettled

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

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

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

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

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

Promise.allSettled的支持情况：

String.prototype.matchAll

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

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

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

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

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

String.prototype.matchAll的支持情况：

Dynamic import

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

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

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

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

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

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

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

Dynamic import的支持情况：

BigInt

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

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

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

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

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

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

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

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

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

BigInt的支持情况：

globalThis

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

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

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

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

过去获取全局对象，可通过一个全局函数：

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

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

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

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

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

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

globalThis的支持情况：

参考文章

  • TC39 Proposals

  • MDN文档

  • 种草 ES2020 新特性

  • ES2020 Features in simple examples

  • New Features In ES2020 You Should Check

  • 5 ECMAScript Proposals To Look Out For In ES2020

作者简介：

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

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

网站名称：不容错过！ES2020的七大新特性
链接URL：http://www.hantingmc.com/qtweb/news19/376319.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App开发知识

同城分类信息

标志设计　　 　广安搬家公司　　 　成都集团网站建设　　 　迷你发光字　　 　德阳电信服务器托管　　 　云服务器　　 　香港云虚拟主机　　 　成都网站设计　　 　温江做网站　　 　东电技改　　 　微信公众号开发　　 　成都酒店服定制　　 　广安网站建设　　 　主机租用　　 　成都法律咨询　　 　主动防护网　　 　等级保护测评　　 　成都展柜定制　　 　云主机　　 　Android开发