js可选链(?.)是什么意思 双问号

在做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