在 ECMAScript 2021 中，Nullish Coalescing 操作符成为了 JavaScript 中的一个新特性。该操作符可以帮助我们更加优雅地处理 null 和 undefined 值。在本文中，我们将深入探讨 Nullish Coalescing 操作符，以及如何在项目中合理地使用它。
Nullish Coalescing 操作符是什么
在 JavaScript 中，经常会遇到需要对 null 或 undefined 进行特殊处理的情况。为了解决这个问题，我们通常会使用短路运算符（&& 或 ||）来判断一个值是否为 null 或 undefined。例如，下面的代码展示了如何使用短路运算符来处理 null 或 undefined 值。
const options = { timeout: 3000 };
const interval = options.interval || 1000; // interval 为 1000，因为 options.interval 为 undefined上述代码中，我们使用了短路运算符 || 来判断 options.interval 是否为真值（即不为 null 或 undefined）。如果 options.interval 为真值，则会将 interval 赋值为 options.interval。否则，会将 interval 赋值为 1000。
然而，短路运算符并不适用于所有情况。有些值（例如 0 或空字符串）在 JavaScript 中被认为是 falsy 值，但它们并不是 null 或 undefined。在上述例子中，如果 options.interval 的值为 0，那么 interval 的值也会被赋为 1000，这并不是我们想要的行为。
为了解决这个问题，我们可以使用 Nullish Coalescing 操作符（??），它只在左侧的操作数为 null 或 undefined 时才返回右侧的操作数。下面的代码展示了如何使用 Nullish Coalescing 操作符来处理 null 或 undefined 值。
const options = { timeout: 3000, interval: 0 };
const interval = options.interval ?? 1000; // interval 为 0，因为 options.interval 不为 null 或 undefined上述代码中，我们使用了 Nullish Coalescing 操作符 ?? 来判断 options.interval 是否为 null 或 undefined。如果 options.interval 不为 null 或 undefined，则会将 interval 赋值为 options.interval。否则，会将 interval 赋值为 1000。
如何优雅地使用 Nullish Coalescing 操作符
使用 Nullish Coalescing 操作符可以帮助我们更加优雅地处理 null 和 undefined 值。但是，我们仍然需要注意一些细节，以避免代码出现意外的行为。下面是一些使用 Nullish Coalescing 操作符的实用技巧。
1. 使用 Nullish Coalescing 操作符设置默认值
使用 Nullish Coalescing 操作符可以方便地设置默认值。例如，下面的代码展示了如何使用 Nullish Coalescing 操作符设置默认值。
const options = { timeout: 3000 };
const interval = options.interval ?? 1000; // interval 为 1000，因为 options.interval 为 undefined
const message = options.message ?? 'Hello, world!'; // message 为 'Hello, world!'，因为 options.message 为 undefined上述代码中，我们使用 Nullish Coalescing 操作符来判断 options.interval 和 options.message 是否为 null 或 undefined。如果它们为 null 或 undefined，则会分别将 interval 和 message 赋值为 1000 和 'Hello, world!'。
2. 不要将 Nullish Coalescing 操作符与逻辑或运算符混淆
使用 Nullish Coalescing 操作符时，必须清楚它与逻辑或运算符（||）的区别。逻辑或运算符可以处理 falsy 值，但 Nullish Coalescing 操作符只处理 null 或 undefined 值。例如，下面的代码展示了在使用逻辑或运算符时可能发生的错误。
const options = { timeout: 3000, interval: 0 };
const interval = options.interval || 1000; // interval 为 1000，因为 options.interval 为 0上述代码中，我们使用了逻辑或运算符 || 来判断 options.interval 是否为真值。因为 options.interval 的值为 0，它被视为 falsy 值，导致 interval 被赋值为 1000。
如果我们使用 Nullish Coalescing 操作符，则会得到正确的结果。
const options = { timeout: 3000, interval: 0 };
const interval = options.interval ?? 1000; // interval 为 0，因为 options.interval 不为 null 或 undefined3. 注意对象和数组的特殊处理
在对象和数组中，Nullish Coalescing 操作符和逻辑或运算符的行为略有不同。当对象或数组的某个属性为 null 或 undefined 时，Nullish Coalescing 操作符只会返回该属性的值，而不会返回整个对象或数组。例如，下面的代码展示了如何使用 Nullish Coalescing 操作符处理对象和数组。
const options = { timeout: 3000, array: [undefined] };
const interval = options.interval ?? 1000; // interval 为 1000，因为 options.interval 为 undefined
const value = options.array[0] ?? 'default'; // value 为 'default'，因为 options.array[0] 为 undefined上述代码中，我们使用 Nullish Coalescing 操作符来判断 options.interval 和 options.array[0] 是否为 null 或 undefined。如果它们为 null 或 undefined，则会将 interval 和 value 分别赋值为 1000 和 'default'。
总结
在 ECMAScript 2021 中，Nullish Coalescing 操作符成为了 JavaScript 中的一个新特性，它可以帮助我们更加优雅地处理 null 和 undefined 值。使用 Nullish Coalescing 操作符可以方便地设置默认值，并避免逻辑或运算符中的一些问题。在处理对象和数组时，需要注意 Nullish Coalescing 操作符的特殊处理行为。在项目中合理地使用 Nullish Coalescing 操作符可以使代码更加健壮和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520e61595b1f8cacd8582c0