[TOC] #### 1. 可选链操作符 (?.) --- **可选链操作符** 允许读取位于连接对象链深处的属性值，而不必明确验证链中的每个引用是否有效 `?.` 可选链操作符的功能类似于 `.` 链式操作符，不同之处在于引用为空的情况下不会引起错误，该表达式短路返回值 下面代码运行有错误，原因很简单， `user.age` 的值是 `undefined`，从 `undefined` 中读取 `num` 属性当然会报错 ```javascript 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` 而不是直接抛出错误异常 ```javascript console.log(user.age?.num); ``` 当找不到 `num` 时，我们想要设置个默认值，可以配合 `??` 使用 ```javascript console.log(user.age?.num ?? 18); ``` #### 2. 空值合并操作符 (??) --- 在实际开发中，`??` 遇到的次数也不是太多，但还是非常有必要知道这个东西用法的 空值合并操作符(??): 只有当左侧为 `null` 或 `undefined` 时，才会返回右侧的数 与逻辑或操作符（`||`）不同，逻辑或操作符左侧的值为假值时返回右侧操作符。也就是说，如果使用 `||` 来为某些变量设置默认值，可能会遇到意料之外的问题，比如遇到假值 `''`、`0`、`false` 通过以下代码可验证区别，当 user 对象中没有 sex 属性时默认值为 2（0 女 1 男 2 未知） ```javascript const user = { name: 'maria', sex: 0 } console.log(user.sex ?? 2); // 0 console.log(user.sex || 2);// 2 ``` **空值合并操作符 (??)** 和 **可选链操作符 (?.)** 配合使用就非常美妙 ```javascript console.log(user.age?.num ?? 18); ```