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

原创

彭世瑜 2023-11-27 10:08:38 博主文章分类：博主任务 ©著作权

文章标签 运算符可选链 Web 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

文档：

可选链运算符（?.）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