ES2020新特性

时间 2020-03-05

标签 es2020 特性繁體版

原文原文链接

前言

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

本文以简单的代码示例来介绍 ES2020新特性。这样，你能够很快理解这些新功能，而不须要多么复杂的解释。更多优质文章请猛戳GitHub博客前端

可选链操做符（Optional Chaining）

可选链 可以让咱们在查询具备多个层级的对象时，再也不须要进行冗余的各类前置校验。java

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

因而，你就要修改你的代码来处理来处理属性链中每个可能的undefined对象，好比：git

let nestedProp = obj && obj.first && obj.first.second;
复制代码

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

有了可选链式调用，能够大量简化相似繁琐的前置校验操做，并且更安全：正则表达式

let nestedProp = obj?.first?.second;
复制代码

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

可选链操做符的支持状况： promise

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

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

let c = a ? a : b // 方式1
let c = a || b // 方式2
复制代码

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

let x = {
  profile: {
    name: '浪里行舟',
    age: ''
  }
}
console.log(x.profile.age || 18) //18
复制代码

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

let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;
复制代码

例若有如下代码：

const x = null;
const y = x ?? 500;
console.log(y); // 500
const n = 0
const m = n ?? 9000;
console.log(m) // 0
复制代码

空位合并操做符的支持状况：

Promise.allSettled

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

const promises = [
 Promise.resolve(1),
 Promise.resolve(2),
 Promise.reject('error')
];

Promise.all(promises)
 .then(responses => console.log(responses))
 .catch(e => console.log(e)) // "error"
复制代码

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

Promise.allSettled([
  Promise.reject({ code: 500, msg: '服务异常' }),
  Promise.resolve({ code: 200, list: [] }),
  Promise.resolve({ code: 200, list: [] })
]).then(res => {
  console.log(res)
  /*
        0: {status: "rejected", reason: {…}}
        1: {status: "fulfilled", value: {…}}
        2: {status: "fulfilled", value: {…}}
    */
  // 过滤掉 rejected 状态，尽量多的保证页面区域数据渲染
  RenderContent(
    res.filter(el => {
      return el.status !== 'rejected'
    })
  )
})
复制代码

Promise.allSettled跟Promise.all相似, 其参数接受一个Promise的数组, 返回一个新的Promise, 惟一的不一样在于, 它不会进行短路, 也就是说当Promise所有处理完成后,咱们能够拿到每一个Promise的状态, 而不论是否处理成功。

Promise.allSettled的支持状况：

String.prototype.matchAll

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

function collectGroup1 (regExp, str) {
  const matches = []
  while (true) {
    const match = regExp.exec(str)
    if (match === null) break
    matches.push(match[1])
  }
  return matches
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`)) // [ 'foo', 'bar', 'baz' ] 复制代码

值得注意的是，若是没有修饰符 /g, .exec() 只返回第一个匹配。如今经过String.prototype.matchAll方法，能够一次性取出全部匹配。

function collectGroup1 (regExp, str) {
  let results = []
  for (const match of str.matchAll(regExp)) {
    results.push(match[1])
  }
  return results
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`)) // ["foo", "bar", "baz"] 复制代码

上面代码中，因为string.matchAll(regex)返回的是遍历器，因此能够用for...of循环取出。

String.prototype.matchAll的支持状况：

Dynamic import

如今前端打包资源愈来愈大，前端应用初始化时根本不须要所有加载这些逻辑资源，为了首屏渲染速度更快，不少时候都是动态导入（按需加载）模块，好比懒加载图片等，这样能够帮助您提升应用程序的性能。

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

el.onclick = () => {
  import('/modules/my-module.js')
    .then(module => {
      // Do something with the module.
    })
    .catch(err => {
      // load error;
    })
}
复制代码

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

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

let module = await import('/modules/my-module.js');
复制代码

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

Dynamic import的支持状况：

BigInt

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

var num = Number.MAX_SAFE_INTEGER;  // -> 9007199254740991

num = num + 1; // -> 9007199254740992

// 再次加 +1 后没法正常运算
num = num + 1; // -> 9007199254740992

// 两个不一样的值，却返回了true
9007199254740992 === 9007199254740993  // -> true
复制代码

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

建立 BigInt 类型的值也很是简单，只须要在数字后面加上 n 便可。例如，123 变为 123n。也可使用全局方法 BigInt(value) 转化，入参 value 为数字或数字字符串。

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"
复制代码

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

1234567890123456789n * 123n;
// -> 151851850485185185047n
复制代码

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

1n < 2 
// true

1n + 2
// 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 中生效

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

// ES10以前的解决方案
const getGlobal = function(){
  if(typeof self !== 'undefined') return self
  if(typeof window !== 'undefined') return window
  if(typeof global !== 'undefined') return global
  throw new Error('unable to locate global object')
}

// ES10内置
globalThis.Array(0,1,2) // [0,1,2]

// 定义一个全局对象v = { value:true } ,ES10用以下方式定义
globalThis.v = { value:true }
复制代码

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

若是您在浏览器上，globalThis将为window，若是您在Node上，globalThis则将为global。所以，再也不须要考虑不一样的环境问题。

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window
复制代码

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

Object.prototype.isPrototypeOf(globalThis); // true
复制代码

globalThis的支持状况：

欢迎关注公众号：前端工匠，你的成长咱们一块儿见证！