在 ECMAScript 2021 中，Nullish Coalescing 操作符是一个非常有用的功能，它使我们能够更方便地处理 null 和 undefined 值。本文将详细介绍 Nullish Coalescing 操作符的使用方法，并提供示例代码和实用技巧。
什么是 Nullish Coalescing 操作符
在 JavaScript 中，常常需要处理变量值为 null 或 undefined 的情况。通常我们使用逻辑运算符 || 来处理这种情况，例如：
const foo = null || 'default value'; console.log(foo); // 'default value'
上面的代码中，如果变量 foo 的值为 null 或 undefined，我们会将它赋值为 'default value'。然而，|| 运算符存在一个问题，它会将一些 falsy 值（如空字符串 ''、数字 0、布尔值 false）误认为是 null 或 undefined，从而导致不必要的错误。例如：
const bar = '' || 'default value'; console.log(bar); // 'default value'
在上面的代码中，虽然变量 bar 的值为 ''，但 || 运算符将它误认为是 null 或 undefined，导致我们得到了一个不正确的结果。为了解决这个问题，Nullish Coalescing 操作符应运而生。
Nullish Coalescing 操作符（??）是一个新的逻辑运算符，它只在变量值为 null 或 undefined 时才返回默认值。例如：
const baz = null ?? 'default value'; console.log(baz); // 'default value'
在上面的代码中，我们使用 ?? 运算符来处理变量 baz 的值为 null 或 undefined 的情况，并正确地得到了默认值 'default value'。
如何使用 Nullish Coalescing 操作符
使用 Nullish Coalescing 操作符非常简单，只需要在需要处理 null 或 undefined 值的变量后面加上 ?? 运算符，然后跟上默认值即可。例如：
const foo = null ?? 'default value'; const bar = undefined ?? 'default value'; const baz = 'non-null value' ?? 'default value'; console.log(foo); // 'default value' console.log(bar); // 'default value' console.log(baz); // 'non-null value'
在上面的代码中，我们分别处理了变量 foo 和 bar 的值为 null 或 undefined 的情况，并得到了正确的默认值。同时，我们还处理了变量 baz 的值为非 null 或 undefined 的情况，并得到了它本身的值。
实用技巧
除了基本用法之外，Nullish Coalescing 操作符还有一些实用技巧，可以帮助我们更方便地处理 null 和 undefined 值。
使用 Nullish Coalescing 操作符设置默认参数
在函数调用时，我们经常需要设置默认参数值。在 ECMAScript 2020 之前，我们通常使用 || 运算符来实现这个功能。例如：
function func(param) {
const defaultParam = 'default value';
param = param || defaultParam;
console.log(param);
}
func(); // 'default value'
func('custom value'); // 'custom value'在 ECMAScript 2021 中，我们可以使用 Nullish Coalescing 操作符来更方便地实现这个功能。例如：
function func(param) {
const defaultParam = 'default value';
param ??= defaultParam;
console.log(param);
}
func(); // 'default value'
func('custom value'); // 'custom value'在上面的代码中，我们使用 ??= 运算符来设置默认参数值。如果函数调用时传入的参数为 null 或 undefined，我们会将它赋值为默认值 'default value'。
使用 Nullish Coalescing 操作符避免错误
在处理变量值为 null 或 undefined 的情况时，我们经常需要使用短路运算符来避免错误。例如：
const foo = obj && obj.prop1 && obj.prop1.prop2;
在 ECMAScript 2021 中，我们可以使用 Nullish Coalescing 操作符来更简洁地实现这个功能。例如：
const foo = obj?.prop1?.prop2;
在上面的代码中，我们使用 ?. 运算符来避免 obj、obj.prop1 和 obj.prop1.prop2 为 null 或 undefined 的情况，并得到正确的结果。
总结
Nullish Coalescing 操作符是 ECMAScript 2021 中一个非常实用的功能，它使我们能够更方便地处理 null 和 undefined 值。本文介绍了 Nullish Coalescing 操作符的基本用法和实用技巧，并提供了示例代码和实用技巧。在实际开发中，我们可以使用 Nullish Coalescing 操作符来提高代码的可读性和可维护性，从而更快地开发出高质量的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661600ffd10417a2225e2d85