ES系列总结（六）可选链路操作符 Optional Chaining 1.1 简介在业务开发中，如果读取对象内部的某个

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1. 可选链路操作符

Optional Chaining

1.1 简介

在业务开发中，如果读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，直接读取接口中的一个名字的字段name，它处于对象中很深的层级如 res.data.info.name，安全的写法是写成下面这样。

const name = (res && res.data && res.data.info && res.data.info.name) || 'defaultName'

上面例子中，name 属性在对象的第四层，所以需要判断四次，去校验每一层是否有值。

这样的层层判断非常繁琐，因此 ES2020 引入了“可选链操作符”来简化上面的写法，改写后的语法如下。

const name = res?.data?.info?.name || 'defaultName'

1.2 基本使用

let myMap = new Map()
myMap.set('artist', { name: 'Alice', age: 23 })
myMap.get('doctor')?.name // undefined
myMap.get('artist')?.name // 'Alice'

表达式在对象中的取值

let obj = { food1: 'aaa', food2: 'bbb' }
    prop = 'food'
    type = '2'
let nestedProp = obj?.[prop + type] // 'bbb'

函数调用

const Fn = () = > {console.log('run')}
let result = Fn?.() // 'run'

访问数组

const arr = [1,2]
let arrayItem = arr?.[42] // undefined

短路计算

当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算，例如：

let left = null
let i = 0
let result = left?.[i++]
 
console.log(i) // i 将不会被递增，仍然输出 0

delete 运算符

和短路计算类似，当左操作数是null 或 undefined，将直接返回undefined，而不进行delete 运算。

delete a?.b

2. 空值合并操作符

Nullish Coalescing

2.1 简介

当读取对象属性的时候，有时候需要为它们指定默认值。常见做法是通过||运算符来实现。

const object = { test: 0 }
const text = object.test || 'Hello World~' // 'Hello World~'

而有时候在开发中，可能只想要给属性值为null 或 undefined的情况设置默认值，也就是保持属性值为0、false和''的情况。

这个时候就可以用到ES11的新特性-空值合并操作符，写做??。空值合并操作符是一个逻辑操作符，当左操作数为null或undefined的时候，返回右侧操作数

2.2 基本使用

const object = { test: 0, test2: null }
const text = object.test ?? 'Hello World~' // 0
const text2 = object.test2 ?? 'Hello World~' // 'Hello World~'

短路计算

如果左操作数是 null 或 undefined，表达式将不会被计算，例如：

function foo() {
  console.log('调用 foo')
}
console.log(false ?? foo()) // foo未执行
console.log(undefined ?? foo()) // '调用foo'
和逻辑操作符共同使用时，需要加上()以区分
const small = true, medium = false, huge = true;
small && medium ?? huge // 报错
small ?? medium || huge // 报错
加上表明优先级
(small && medium) ?? huge // false
small ?? (medium || huge) // true

3. Promise.allSettled

3.1 简介

首先回顾Promise.all是ES6的方法，用于接受多个promise实例，当所有实例的状态都变为fulfilled时，返回一个结果数组；当有一个实例状态变为reject时则返回Promise.reject，其他请求的结果将不再正常返回。

有的时候我们希望哪怕有实例状态变为了reject，其他请求的结果依然能正常返回，对于这种情况，ES2020就引入了Promise.allSettled()方法。

3.2 基本使用

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 200, 'reject'))
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'resolve'))
const promises = [promise1, promise2]
 
Promise.allSettled(promises).then((res) => res.forEach((item) => console.log('result', item)))
// result {status: "rejected", reason: "reject"}
// result {status: "fulfilled", value: "resolve"}