js：可选链运算符（?.）和空值合并运算符（??）

本文主要是介绍js：可选链运算符（?.）和空值合并运算符（??），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文档：

可选链运算符（?.）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
空值合并运算符（??）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

1、可选链运算符（?.）

可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

假设有两个对象，数据而结构如下

let person1 = {cat: {name: 'Tom',},
}let person2 = {}

获取嵌套对象的name属性

// 正常情况下
console.log(person1.cat.name) // Tom// 直接取嵌套对象的数据会抛出异常
console.log(person2.cat.name) 
// TypeError: Cannot read properties of undefined (reading 'name')

使用可选链运算符（?.）就可以很好的规避这个问题

console.log(person2.cat?.name) // undefined// 等价于
console.log(person2.cat && person2.cat.name) // undefined

2、空值合并运算符（??）

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

示例

// 空值合并运算符（??）
console.log(null ?? 'default'); // default
console.log(undefined ?? 'default'); // default
console.log(0 ?? 'default'); // 0
console.log(NaN ?? 'default'); // NaN
console.log(false ?? 'default'); // false
console.log('' ?? 'default'); // ''// 逻辑或运算符（||）
console.log(null || 'default'); // default
console.log(undefined || 'default'); // default
console.log(0 || 'default'); // default
console.log(NaN || 'default'); // default
console.log(false || 'default'); // default
console.log('' || 'default'); // default