ES2020来了

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

新功能概览

  1. 可选链运算符 - Optional Chaining
  2. 空值合并运算符 - Nullish coalescing Operator
  3. 标准化的全局对象 - globalThis
  4. Promise.allSettled
  5. String.prototype.matchAll
  6. BigInt
  7. for-in mechanics
  8. 异步加载模块 - 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 = '<p>JS</p><p>正则表达式</p>';
const reg = /<\w+>(.*?)<\/\w+>/g;
console.log(str.match(reg));

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

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

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

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

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

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

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

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

/*
output:
第一次迭代:
[
  "<p>JS</p>",
  "JS",
  index: 0,
  input: "<p>JS</p><p>正则表达式</p>",
  groups: undefined
]
第二次迭代:
[
  "<p>正则表达式</p>",
  "正则表达式",
  index: 9,
  input: "<p>JS</p><p>正则表达式</p>",
  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有两种方式:

  1. 在整数字面量后面加n
let bigIntNum = 9007199254740993n;
  1. 使用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