您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

js:可选链运算符(?.)和空值合并运算符(??)

时间:05-22来源:作者:点击数:

文档:

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
表达式左侧取值 ??返回值 ||返回值
null default default
undefined default default
0 0 default
NaN NaN default
false false default
'' '' default
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门