ES-2020新特性
一：可选链式调用
1.访问对象属性
const flower = {
colors: {
red: true
}
}
console.log(flower.colors.red) // 正常运行
console.log(flower.species.lily) // 抛出错误：TypeError: Cannot read property 'lily' of undefined
console.log(flower.species ？ flower.species.lily ：null) // 先判断存在再取值
console.log(flower.colors?.red) // 输出 true
console.log(flower.species?.lily) // 输出 undefined
2.访问数组属性优点：对象里有缺少字段或者后端应该返回{}的时候返回Null或undifind报错，而不用使用三木运算判断
展开源码
const flower = {
colors: {
red: true
},
arr: [1,2,3]
}
let flowers = ['lily', 'daisy', 'rose']
console.log(flowers[1]) // 输出：daisy
flowers = null
console.log(flowers[1]) // 抛出错误：TypeError: Cannot read property '1' of null
console.log((flowers && flowers.length) ? flowers[1] : undefined) // 常规判断
console.log(flowers?.[1]) // 输出：undefined
优点：对象里有缺少字段或者后端应该返回[]的时候返回Null或undifind或[]报错，而不用使用三木运算判断
3.调用函数
展开源码
let plantFlowers = () => {
return 'orchids'
}
console.log(plantFlowers()) // 输出：orchids
plantFlowers = null
console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function aa instanceof Function
console.log((plantFlowers instanceof Function) ? plantFlowers() : null) // 判断函数类型再调用 instanceof Function
console.log(plantFlowers?.()) // 输出：undefined
二：空值合并
展开源码
let number = 1
// let number = 0
let myNumber = number || 7
let myNumber = number ?? 7
myNumber
优点：操作符右边的值仅在左边的值等于null 或 undefined 时有效，如果接口返回01，或true/false时用||逻辑会有问题可以用??
三：私有字段
展开源码
class Flower {
#leaf_color = "green";
constructor(name) {
this.name = name;
}
get_color() {
return this.#leaf_color;
}
}
const orchid = new Flower("orchid");
console.log(orchid.get_color()); // 输出：green
console.log(orchid.#leaf_color) // 报错：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class
// 现在才引入了私有字段。要定义私有属性，必须在其前面加上散列符号：#。如果我们从外部访问类的私有属性，势必会报错。
四：Promise.allSettled 方法
展开源码
promise_1 = Promise.resolve('hello')
promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'problem'))
Promise.all([promise_1, promise_2])
.then(([promise_1_result, promise_2_result]) => {
console.log(promise_1_result)
console.log(promise_2_result)
})
// 输出Promise {
Promise.allSettled([promise_1, promise_2])
.then(([promise_1_result, promise_2_result]) => {
console.log(promise_1_result) // 输出：{status: 'fulfilled', value: 'hello'}
console.log(promise_2_result) // 输出：{status: 'rejected', reason: 'problem'}
})
优点：有接口报错时不影响其他接口返回，报错接口也会返回status和reason
五：globalThis 全局对象
展开源码
// 浏览器
window == globalThis // true
globalThis.location
// node.js
global == globalThis // true
优点：浏览器中可用的全局对象是变量window，但在 Node.js 中是一个叫做 global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis
不常用的新特性：
[if !supportLists]1. [endif]
静态字段
[if !supportLists]2. [endif]
[if !supportLists]3. [endif]
顶级Await
[if !supportLists]4. [endif]
[if !supportLists]5. [endif]
Dynamic Import 动态引入（考虑到许多应用程序使用诸如webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用）
[if !supportLists]6. [endif]
[if !supportLists]7. [endif]
MatchAll 匹配所有项
[if !supportLists]8. [endif]
[if !supportLists]9. [endif]
BigInt：JavaScript 中能够精确表达的最大数字是 2^53 - 1。而 BigInt 可以用来创建更大的数字