当前框架盛行，导致大多数前端人员都是在做一些常规的JS代码开发。在JS代码编写的过程中，我们又不得不面对两个神奇的值：null 和 undefined，可能一不小心就导致控制台报错了。
随着ECMAScript的演进，在 ECMAScript 2020标准引入了两个神奇的运算符：?? 和 ?.，是的针对null和undefined的操作变得更加简洁明了。
一. 空值合并运算符（??）
1、运算规则
当左侧操作数为null 或 undefined时，返回右侧操作数，否则返回左侧操作数。
2、特点
- 属于逻辑运算符；
- 针对
null和undefined的运算； - 与逻辑或运算符（||）不同 ``
3、代码示例：
const nullVal = null;
const undefinedVal = undefined;
const emptyStr = "";
const zeroNum = 0;
console.log(nullVal ?? '右侧操作数'); // 右侧操作数
console.log(undefinedVal ?? '右侧操作数'); // 右侧操作数
console.log(emptyStr ?? '右侧操作数'); // "" （空字符串虽然是假值，但不是 null 或者 undefined）
console.log(zeroNum ?? '右侧操作数'); // 0 （0虽然是假值，但不是 null 或者 undefined）
二、可选链操作运算符（?.）
1、运算规则：
允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效
2、特点：
- 操作类似（
.）链式调用，但是遇到null或undefined时不会引起报错； - 与函数一起使用时，如果函数没有返回值，就无法判断函数对否被调用；
3、代码示例：
const obj= { name: 'Alice', cat: { name: 'Dinah' } };
const dogName = obj.dog?.name;
console.log(dogName); // 输出: undefined
// console.log(obj.dog.name);
// 会报错：Uncaught TypeError: Cannot read properties of undefined (reading 'name')
// 注意：与函数一起使用时，如果函数没有返回值，就无法判断函数对否被正常调用
console.log(obj.someNonExistentMethod?.());
// 输出: undefined
四、注意
这两个针对null和undefined的运算符在数据处理中是非常有用的，不仅可以简化代码，在一定程度上也能够提高代码的可读性和健壮性。然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 环境中可能不被支持。
