ES2020来了

ES2020发布了新特性 https://github.com/tc39/proposals

新功能概览

可选链运算符 - Optional Chaining
空值合并运算符 - Nullish coalescing Operator
标准化的全局对象 - globalThis
Promise.allSettled
String.prototype.matchAll
BigInt
for-in mechanics
异步加载模块 - import()

详细介绍

1. 可选链运算法

我们有时候为了访问深层嵌套的属性，一不小心就会报undefined的错，需要写一个很长的&&链去检查每个属性是否存在，代码如下

  let name = result && result.data && result.data.info && result.data.info.name;

如果不这么做，很可能会报程序异常 Uncaught TypeError: Cannot read property 'xxx' of undefined,为了简化上述的代码，ES2020新增了可选链运算符，就是在需要判断是否存在的属性后面加上?，代码如下：

let name = result?.data?.info?.name;

可选运算符也可以作用到方法上，如下

let name = getUserInfo?.().data?.info?.name;

2.空值合并运算法 - Nullish coalescing Operator

获取对象的属性的时候，我们经常需要为null/undefined的属性设置默认值。现在我们都是使用||运算符来处理，例如：

let userInfo = {};
let name = userInfo.name || 'Lucky';

但是，这么做会导致 false 、0 , ' '等属性值被覆盖掉，导致运算结果不准确，为了避免这种情况，ES2020新增了 空值合并运算符 ??，代码如下：

const result = {
  data: {
    nullValue: null,
    numberValue: 0,
    textValue: '',
    booleanValue: false
  }
};
const undefinedValue = result.data.undefinedValue ?? 'default value';
// 'default value'
const nullValue = result.data.nullValue ?? 'default value';
// 'default value'
const numberValue = result.data.numberValue ?? 200;
// 0
const textValue = result.data.textValue ?? 'default value';
// ''
const booleanValue = result.data.booleanValue ??  true;
// false

3. 标准化的全局对象-globalThis

Javascript在不同的环境中获取全局对象的方式不同：
node: 通过 global;
浏览器：通过window、self等，甚至通过this，但是this的指向比较复杂，依赖当前的执行上下文;

过去获取全局对象，可通过下面的函数：

const getGlobal = () => {
  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');
}
const globals = getGlobal(); 

if (typeof globals.setTimeout !== 'function') { 
  // 此环境中没有 setTimeout 方法！
}

ES2020提供的globalThis，目的就是提供一种标准化方式访问全局对象。上述的方法就可以直接改成

if (typeof globalThis.setTimeout !== 'function') {
  //  此环境中没有 setTimeout 方法！
}

4.Promise.allSettled

Promise.all可以并发执行多个任务，但是Promise.all有个缺陷，那就是只要其中有一个任务出现异常了，就会直接进入catch的流程，所有任务都会挂掉，这不是我们想要的。

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 'ok'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'bad'));
const promises = [promise1, promise2];

Promise.all(promises)
  .then(result => {
    // 不会触发
   })
  .catch((err) => {
    console.log(err); // bad
  })
  .finally(() => {
    // 会触发，获取不到我们想要的内容
  })

这时候需要一个方法来保证如果一个任务失败了，其他任务还会继续执行，这样才能最大限度的保障业务的可用性。
ES2020提供的Promise.allSettled可以解决这个问题，Promise.allSettled会返回一个promise,这个返回的promise会在所有输入的promise resolve或reject之后触发。看代码：

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 'ok'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'bad'));
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then((results) => results.forEach((result) => console.log(result)));

// output:
// {status: "fulfilled", value: "ok"}
// {status: "rejected", reason: "bad"}

5. String.prototype.matchAll

我们先来看一下 String.prototype.match

const str = 'JS
正则表达式';
const reg = /<\w+>(.*?)<\/\w+>/g;
console.log(str.match(reg));

// output: ['JS
', '正则表达式']

可以看出返回的数组里包含了父匹配项，但未匹配到子项('JS'、'正则表达式')。
移除全局搜索符g试试

const str = 'JS
正则表达式';
const reg = /<\w+>(.*?)<\/\w+>/; // 这里把 g 去掉了
console.log(str.match(reg));

// output: 
/*
["JS
", "JS", index: 0, input: "JS
正则表达式", groups: undefined]
*/

这样可以获取到匹配的父项，包括子项，但只能获取到一个满足的匹配字符。

如何获取到全局所有匹配项，包括子项呢？
ES2020提供了一种简易的方式：String.prototype.matchAll,该方法会返回一个迭代器。

const str = 'JS
正则表达式';
const reg = /<\w+>(.*?)<\/\w+>/g; // 这里是带 g 的
const allMatches = str.matchAll(reg);

for (let item of allMatches) {
    console.log(item);
}

/*
output:
第一次迭代：
[
  "JS",
  "JS",
  index: 0,
  input: "JS
正则表达式",
  groups: undefined
]
第二次迭代：
[
  "正则表达式",
  "正则表达式",
  index: 9,
  input: "JS
正则表达式",
  groups: undefined
]
*/

能看到每次迭代中可获取所有的匹配，以及本次陪陪的成功的一些其他的信息。

6. BigInt

JS中Number类型只能安全的表示-(2^53-1)至2^53-1范围的值，即Number.MIN_SAFF_INTERGER 至 Number.MAX_SAFF_INTERGER,超出这个范围的整数计算或者表示会丢失精度。
比如，我们在开发过程中，有时候订单id会特别长，返回到浏览器就会失去精度，只能用字符串来传。

image.png

ES2020提供了一个新的数据类型：BigInt。使用BigInt有两种方式：

在整数字面量后面加n

let bigIntNum = 9007199254740993n;

使用BigInt函数

let bigIntNum = BigInt(9007199254740993);

通过BigInt，我们就可以安全的进行大数整型计算了。

let big = 9007199254740994n + 9007199254740994n; // 结果为 18014398509481988n

注意：
BigInt 跟 number 不严格相等

0n === 0    //false
0n == 0    // true

BigInt不能跟number 一起运算

1n + 2 
// VM8334:1 Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions...

不能使用+把BigInt转化成number

+1n
// TypeError: Cannot convert a BigInt value to a number
Number(1n)
// 1

7. for-in mechanics

之前在不同的引擎下for int循环出来的内容顺序可能是不一样的，现在标准化了。

8. 异步加载模块 - import()

有时候我们需要动态加载一些模块，这时候就可以使用ES2020提供的import()了

// utils.js
export default {
  test: function () {
    console.log('test')
  }
}

// index.js
import('./utils.js')
  .then((module) => {
    module.default.test();
  })

后记

项目中使用ES2020,只需要在babel配置文件中添加

{
  "presets":  ["es2020"]
}

参考资料

https://github.com/tc39/proposals/blob/master/finished-proposals.md
https://zhuanlan.zhihu.com/p/100251213