复习：ES6~ES12的一些新特性归纳（ES11、ES12）

ES11相关的特性（2020）

• Nullish coalescing Operator(空值处理)：

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

let user = {
    u1: 0,
    u2: false,
    u3: null,
    u4: undefined,
    u5: ''
}
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(可选链)：

?.用户检测不确定的中间节点

let obj = {};
            
let name = obj.children.name;
console.log(name);   //  Uncaught TypeError: Cannot read properties of undefined (reading 'name')
            
let user = obj.children?.user;
console.log(user);  // undefined

• Promise.allSettled：

返回一个在所有给定的promise已被决议或被拒绝后决议的promise，并带有一个对象数组，每个对象表示对应的promise结果。

const p1 = Promise.resolve(3);
const p2 = 43;
const p3 = new Promise((resolve,reject) => reject('已被协议拒绝p3'));
const p4 = new Promise((resolve,reject) => reject('已被协议拒绝p4'));
const pList = [p1,p2,p3,p4];
Promise.allSettled(pList).then(value => console.log(value));

image.png

• import()导入：

按照一定的条件或者按需加载模块的时候，动态import() 是非常有用的。而静态型的 import 是初始化加载依赖项的最优选择。

// 一般初始化静态导入
import * as myModule from '/modules/my-module.js';  // 导入整个模块的内容
import {myExport} from '/modules/my-module.js'; // 导入单个接口
import {foo, bar} from '/modules/my-module.js';  // 导入多个接口

//  动态的导入
import('/modules/my-module.js')
    .then(module => {
      module.loadPageInto(main);
    })
    .catch(err => {
      main.textContent = err.message;
});

• globalThis：

全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）
浏览器：window
worker：self
node：global

this.window.XMLHttpRequest === 'function'; // true

globalThis.XMLHttpRequest === 'function'; //true 

ES12相关的特性（2021）

• replaceAll：

返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉

const str = 'test demo';

str.replaceAll('t','a'); // 'aesa demo'

• Promise.any：

Promise.any()接收一个Promise可迭代对象，只要其中的一个promise成功，就返回那个已经成功的promise。如果可迭代对象中没有一个promise成功（即所有的promise都失败/拒绝），就返回一个失败的promise。

const pErr = new Promise((resolve, reject) => {
  reject("总是失败");
});

const pSlow = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "最终完成");
});

const pFast = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "很快完成");
});

Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value); // 只要其中的一个成功了就返回那个成功的promise
})
//  很快完成

• WeakRefs：

使用WeakRefs的Class类创建对对象的弱引用（对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为）

• 逻辑运算符和赋值表达式：

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的复合赋值运算符有：

a ||= b
// 等价于
a = a || (a=b)

a &&= b
// 等价于
a = a && (a = b)

a ??= b
// 等价于
a = a ?? (a = b)

• 数字分隔符：

数字分隔符，可以在数字之间创建可视化分隔符，通过_来分隔数字，使得数字更具有可读性。

const  money = 1_000_000_000_000; // 1000000000000
// 等价于
const money = 1000000000000;