在做vue3项目中遇到了 (? . ) 这个东西, 故来整理一下
?. 表示:可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。操作符的功能类似于链式操作符,不同之处在于,在引用为空(null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值
简而言之, 就是判断对象的某个属性是否存在,如果存在那么就返回整个属性的值,否则返回undefined
const testObj = {
id: 101,
name: 'xiaohua',
hobby: {
like: 'swimming'
}
}
console.log(testObj.hobby?.like) // swimming
console.log(testObj.like?.like) // undefined
console.log(testObj.like?.like || 'hello') // hello
而与其类似的双问号 ?? 表示:只有左侧的值为null或undefined的时候才使用右侧的值。
console.log(testObj.like?.like ?? 'hello') // hello
在 JavaScript 中,双问号(??)和或运算符(||)都可以用来设置默认值,但是它们处理 Falsy 值的方式不同。
双竖杠||,只要前面的值转为布尔值为false时,就取后面,否则取前面,如undefined、null、false、空字符串和数值0
而双问号则为:前面的值为null、undefined,则取后面的值,否则都取前面的值。
// ??
console.log(undefined ?? 2); // 2
console.log(null ?? 2); // 2
console.log(0 ?? 2); // 0
console.log("" ?? 2); // ''
console.log(true ?? 2); // true
console.log(false ?? 2); // false
// ||
console.log(undefined || 2); // 2
console.log(null || 2); // 2
console.log(0 || 2); // 2
console.log("" || 2); // 2
console.log(true || 2); // true
console.log(false || 2); // 2