ES2020常用特性介绍

可选链操作符( ?. )

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。

const obj = {
  name: 'zhangsan',
  cat: {
    name: 'li'
  },
  say() {
    console.log('hhh')
  }
};

const dogName = obj.dog?.name;
console.log(dogName); // undefined

console.log(obj.cat?.name) // li
console.log(obj?.say()) // 'hhh'
console.log(obj?.say1()) // 报错：Uncaught TypeError: obj?.say1 is not a function
console.log(obj?.say1?.()) // undefined

BigInt

BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数。而在其他编程语言中，可以存在不同的数字类型，例如:整数、浮点数、双精度数或大斐波数。

let n = BigInt(100)
typeof n // "bigint"
n === 100 // false
n == 100 // true

String.prototype.trimStart() / String.prototype.trimEnd()

分别去掉首尾字符串空格，ES5的String.prototype.trim()用于去掉头尾空格，而String.trimStart()去掉字符串首空格，String.trimEnd()去掉尾空格

let str = '   asdfg    ';
str.trimStart(); // 'asdfg    '
str.trimEnd(); // '   asdfg'

Object.fromEntries()

ES8引入了Object.entries把一个对象转为[key, value]键值对的形式，可以运用于像 Map 这种结构中, Object.fromEntries()用于把键值对还原成对象结构

let arr = [['foo','bar']];
Object.fromEntries(arr) // {foo: "bar"}

let obj = {a: 1, b: 2}
Object.entries(obj) // [["a", 1], ["b", 2]]

Array.prototype.flat() / Array.prototype.flatMap()

把数组展平是Array原型给我们带来的新特性，通过传入层级深度参数（默认为1），来为下层数组提升层级。如果想提升所有层级可以写一个比较大的数字甚至是Infinity，但不推荐使用

let arr = [1, 2, 3, [4, 5, 6, [8, 9]], 7];

arr.flat(1) // [1, 2, 3, 4, 5, 6, [8, 9], 7]
arr.flat(2) // [1, 2, 3, 4, 5, 6, 8, 9, 7]
arr.flat(Infinity) // [1, 2, 3, 4, 5, 6, 8, 9, 7]

Array.prototype.flatMap()是Array.prototype.map()和Array.prototype.flat()的组合，通过对map调整后的数据尝试展平操作

[1, 2, [3, 4]].flatMap(v => {
  if (typeof v === 'number') {
    return v * 2
  } else {
    return v.map(v => v * 2)
  }
})
// [2, 4, 6, 8]

catch 的参数改为可选

在进行try...catch错误处理过程中，如果没有给catch传参数的话，代码就会报错。新规范中可以省略catch绑定的参数和括号

const isValid = params => {
  try {
    return true;
  } catch {
    return false;
  }
};

Symbol.prototype.description

description 是一个只读属性，它会返回 Symbol 对象的可选描述的字符串。

let a = Symbol(123);

console.log(a) // Symbol(123)
typeof a // "symbol"

a.description // "123"
typeof a.description // "string"

动态引入import

允许js文件动态引入，并且不需要模块处理器可直接使用，动态导入(返回Promise),import命令被JS引擎静态分析，先于模块内的其他语句执行，无法取代require()的动态加载功能，提案建议引入import()来代替require(),require()是同步加载，import()是异步加载,用于按需加载、条件加载、模块路径动态化等场景

const loadJs = async (num) => {
    if (num === 1) {
        const a = await import('../xxx.js')
    }
}
loadJs(1)

Promise.allSettled()

该Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

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

// "fulfilled"
// "rejected"