ES11新特性介绍

没错在我们ES6还没有完全整明白的时候，ES7、8、9、10、11都已经出来了。

使用ES11需要安装的babel插件

plugins: [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-syntax-bigint"
  ],

ES11 新特性

Nullish coalescing Operator(空值处理)

如果表达式在 ?? 的左侧运算符求值为undefined或null，返回其右侧。

let user = {
    u1: 0,
    u2: false,
    u3: null,
    u4: undefined
    u5: '',
}
let u1 = user.u1 || '用户1'  // 用户1
let u2 = user.u2 || '用户2'  // 用户2
let u3 = user.u3 || '用户3'  // 用户3
let u4 = user.u4 || '用户4'  // 用户4
let u5 = user.u5 || '用户5'  // 用户5
// es11语法
let u1 = user.u1 ?? '用户1'  // 0
let u2 = user.u2 ?? '用户2'  // false
let u3 = user.u3 ?? '用户3'  // 用户3
let u4 = user.u4 ?? '用户4'  // 用户4
let u5 = user.u5 ?? '用户5'  // ''

Optional chaining（可选链）

?.用户检测不确定的中间节点，如果不存在中间节点则返回undefined。避免了程序报错直接导致整个应用挂掉

let user = {
    age: 18
}
let u1 = user.childer.name // TypeError: Cannot read property 'name' of undefined
// es11 语法
let u1 = user.childer?.name // undefined

Promise.allSettled

使用 Promise.all 来并发两个接口，如果其中任意一个异常，则两个区域都无法正常渲染。Promise.allSettled 则可以避免这个问题

Promise.all([
    new Promise.reject('a1'),
    new Promise.resolve('a2')
]).then((ret) => {
    // 不会执行
    console.log(ret)
}).catch((error) => {
    // 因为有一个promise返回为reject。所以程序只会走到这里
    // 输出：a1
    console.log(error) 
})

// 使用es11的Promise.allSettled
Promise.allSettled([
    new Promise.reject('a1'),
    new Promise.resolve('a2')
]).then((ret) => {
    // 输出 
    // 0: {status: "fulfilled", value: "a1"},
    // 1: {status: "rejected", value: "a2"}
    console.log(ret)
    
    // 这样可以过滤掉rejected，避免整段程序运行错乱
    handleFun(ret.filter(el => el.status !== 'rejected'))
})

Dynamic import

可以按需获取的动态 import

const util = './util.js'
import(util).then((module) => {
    module.fun1();
    module.fun2();
});

(async () => {
  const util = './util.js';
  const module = await import(util)
  const fun1 = module.fun1(1);
  const fun2 = module.fun1(2);
})();

BigInt

BigInt是第7个基本类型，它是一个任意精度的整数。变量可以代表2⁵³不仅是在9007199254740992处的最大值。

// 创建方法一：在整数后面加 n
let bigInt = 9999999999999999n;
// 创建方法二：BigInt函数
let bigInt2 = BigInt(9999999999999999);
let bigInt3 = BigInt('9999999999999999');

// bigIng类型可以进行更大的值计算
let sum = bigInt + bigInt2 // 19999999999999999n
sum.toString() // 19999999999999999 使用toString可以去掉后面的n

// bigint是一种新的原始类型
typeof 9999999999999999n; // -> 'bigint'

String.protype.matchAll

原有的 match() 方法仅返回完整的匹配结果，却不会返回特定正则表达式组。而 matchAll()返回的迭代器不仅包括精确的匹配结果，还有全部的正则模式捕获结果

var str = 'From 2019.01.29 to 2019.01.30';
var allMatchs = str.matchAll(/(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/g);

for (const match of allMatchs) {
  console.log(match);
}
// [
//   [
//     '2019.01.29',
//     '2019',
//     '01',
//     '29',
//     index: 5,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: [Object: null prototype] { year: '2019', month: '01', day: '29' }
//   ],
//   [
//     '2019.01.30',
//     '2019',
//     '01',
//     '30',
//     index: 19,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: [Object: null prototype] { year: '2019', month: '01', day: '30' }
//   ]
// ]

globalThis

全局this。在浏览器中它是 window, 在 worker 中它是 self, 在 Node.js 中它是global。有了globalThis后不管在哪个平台都可以用它来表示顶级的this