前言

日常工作中可能会遇到对空值判断的情况，之前一直是用if或者||来进行判定的，但是大家都知道，有时对于falsy的值(比如0)，我们是想保留它的，但是如果是上面的方式，就必须要特殊判断。之前就一直是用的手写的方式，前几天突然发现新的ES标准已经帮我们解决了这个问题了。才发现自己关注ES标准还是不够，以后要多多关注这个。确实好用。

在JavaScript ES2020（ECMAScript 11）标准中，引入了两个非常实用的新操作符来简化对潜在未定义或null值的处理：空值合并操作符（Nullish Coalescing Operator ??）和可选链操作符（Optional Chaining Operator ?.）。此外，在ES2021（ECMAScript 12）中还引入了空值合并赋值操作符（Nullish Coalescing Assignment Operator ??=）。

空值合并操作符（??）

空值合并操作符 ?? 用于在左侧表达式值为 null 或 undefined 时返回右侧表达式的值，否则返回左侧表达式的值。这有助于避免因变量未定义或值为 null 导致的问题，并且它只在左侧值严格为 null 或 undefined 时才切换到右侧表达式，不同于逻辑或操作符 ||，后者在左侧值为假值（包括但不限于 null、undefined、''、0、NaN）时都会选择右侧值。

例如：

let user = null;
let username = user ?? 'defaultUser';
console.log(username); // 输出 "defaultUser"

// 对比逻辑或操作符 ||
let age = user.age || 25; // 如果user为null，使用逻辑或操作符会得到25，而不管user是否存在

空值合并赋值操作符（??=）

空值合并赋值操作符 ??= 是一种简化的赋值形式，仅当左侧变量为 null 或 undefined 时，才会执行右侧的赋值操作。

例如：

let myVariable;
myVariable ??= 'defaultValue'; // 因为myVariable是undefined，所以现在myVariable被赋值为'defaultValue'
console.log(myVariable); // 输出 "defaultValue"

let existingValue = 'Hello';
existingValue ??= 'World'; // 因为existingValue已有非null和非undefined的值，所以不执行右侧赋值
console.log(existingValue); // 输出 "Hello"

可选链操作符（?.）

可选链操作符 ?. 允许我们在访问深度嵌套的对象属性时，如果路径中的某个中间属性不存在或者为 null 或 undefined，那么整个表达式的结果也将直接变为 undefined，而不会抛出错误。这对于安全地尝试访问潜在不存在的对象属性非常有用。

例如：

let person = { address: { city: 'New York' } };
let city = person?.address?.city; // 如果person或person.address存在，则输出 "New York"，否则输出undefined
// 数组和函数形式下
arr?.[0]
func?.()