JS中的 问好点(?.) 和 问号问号(??) 操作符

刚来新公司，熟悉公司项目及代码，发现有一句这样的代码if(res?.success) {...}，于是就有点疑问?.是干什么的？

可选链操作符（?.）

MDN介绍：可选链操作符

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

当你需要访问一个嵌套多层对象的某个深层级的属性，但是又不能保证哪个属性是一定存在的，那么我们可能需要进行如下判断：

const animal = {
    cat: {
        name: 'kitty',
        color: 'black'
    },
    dog: {
        name: 'doggie'
    }
}

const catName = animal && animal.cat && animal.cat.name

使用可选链操作符（?.），我们可以这样：

// 可选链操作符将会使表达式更短、更简明
const catName = animal?.cat?.name;

使用了可选链操作符（?.），JavaScript会在尝试访问 animal.cat.name 之前，先对 animal进行判断，如果 animal 为 null 或 undefined，表达式会进行短路计算直接返回 undefined，以此类推。如果animal 不为 null 或 undefined，animal.cat 为 null 或 undefined 也是同样的道理。

空值合并运算符（??）

MDN介绍：空值合并运算符

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

示例：

console.log(null ?? 'default string'); // default string
console.log(0 ?? 'default string')     // 0
console.log(1 ?? 'default string')     // 1
console.log(false ?? 'default string') // false
console.log(true ?? 'default string')  // true
console.log('' ?? 'default string')    // ''
console.log('哈哈' ?? 'default string')    // '哈哈'

与逻辑或操作符 || 的区别

逻辑或操作符会在左侧操作数为假值时返回右侧操作数。当用逻辑或操作符给变量设置默认值，左侧的值为 0 或者 '' 时，仍然会使用默认值，如下：

console.log(null || 'default string'); // default string
console.log(0 || 'default string')     // default string
console.log(1 || 'default string')     // 1
console.log(false || 'default string') // default string
console.log(true || 'default string')  // true
console.log('' || 'default string')    // default string
console.log('哈哈' || 'default string')    // '哈哈'

和可选链操作符一起使用

我们可以在使用可选链操作符时设置默认值

let user = {
    name: 'xq'
}

let userName = user?.name ?? '暂无'