JS 中的 ?. 和 ??

• 1. 可选链操作符 (?.)
• 2. 空值合并操作符 (??)

1. 可选链操作符 (?.)

可选链操作符 允许读取位于连接对象链深处的属性值，而不必明确验证链中的每个引用是否有效

?. 可选链操作符的功能类似于 . 链式操作符，不同之处在于引用为空的情况下不会引起错误，该表达式短路返回值

下面代码运行有错误，原因很简单， user.age 的值是 undefined，从 undefined 中读取 num 属性当然会报错

const user = { name: 'liang' }
// liang
console.log(user.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'num')
console.log(user.age.num);

上面代码抛出的错误会导致后面的程序无法执行，有种场景，即使 num 读取不到，也要让程序正常执行，应该怎么做 ?

我们可以使用 ?. 操作符解决这个问题:

此时 user.age.num 有值的话会正常输出，找不到时返回 undefined 而不是直接抛出错误异常

console.log(user.age?.num);

当找不到 num 时，我们想要设置个默认值，可以配合 ?? 使用

console.log(user.age?.num ?? 18);

2. 空值合并操作符 (??)

在实际开发中，?? 遇到的次数也不是太多，但还是非常有必要知道这个东西用法的

空值合并操作符(??): 只有当左侧为 null 或 undefined 时，才会返回右侧的数

与逻辑或操作符（||）不同，逻辑或操作符左侧的值为假值时返回右侧操作符。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的问题，比如遇到假值 ''、0、false

通过以下代码可验证区别，当 user 对象中没有 sex 属性时默认值为 2（0 女 1 男 2 未知）

站长源码网

const user = { name: 'maria', sex: 0 }
console.log(user.sex ?? 2); // 0
console.log(user.sex || 2);// 2

空值合并操作符 (??) 和 可选链操作符 (?.) 配合使用就非常美妙

console.log(user.age?.num ?? 18);