如何正确使用 ES2021 的双问号运算符来处理 undefined 和 null？

在 JavaScript 中，undefined 和 null 是两个特殊的值，经常会在代码中出现。但是，对于这两个值的处理方式却有很多细节需要注意。在 ES2021 中，新增了双问号运算符（??），可以帮助我们更方便地处理 undefined 和 null，本文将介绍如何正确使用它。

双问号运算符的作用

双问号运算符（??）是一个逻辑运算符，用于判断一个值是否为 null 或 undefined。它的作用相当于三元运算符（?:）的简化版，可以用来处理默认值的问题。它的语法如下：

a ?? b

如果 a 不为 null 或 undefined，则返回 a 的值，否则返回 b 的值。它的返回值只有两种可能，不会出现其他情况。

常见使用场景

1. 判断变量是否为 null 或 undefined

在 JavaScript 中，我们经常需要判断一个变量是否为 null 或 undefined，如果是，则给它赋上默认值。在 ES2021 之前，我们通常使用 || 运算符来实现：

let a = null;
let b = a || 'default';
console.log(b); // 'default'

这种方式虽然简单，但是存在一些问题。如果 a 的值是 0、''、false 或者其他 falsy 值，那么它们也会被判断为 false，导致默认值被赋上。而双问号运算符则可以准确地判断 null 或 undefined：

let a = null;
let b = a ?? 'default';
console.log(b); // 'default'

2. 处理函数参数

在开发过程中，我们经常需要给函数的参数设置默认值。在 ES2020 之前，我们通常使用 || 运算符来实现：

function foo(a, b) {
  a = a || 'default';
  b = b || 'default';
  console.log(a, b);
}
foo(null, 'test'); // 'default', 'test'

这种方式也存在问题，如果 a 的值是 0、''、false 或者其他 falsy 值，那么它们也会被判断为 false，导致默认值被赋上。而双问号运算符则可以准确地判断 null 或 undefined：

function foo(a, b) {
  a = a ?? 'default';
  b = b ?? 'default';
  console.log(a, b);
}
foo(null, 'test'); // 'default', 'test'

3. 处理对象属性

在处理对象属性时，我们经常需要判断属性是否存在，如果不存在则给它赋上默认值。在 ES2020 之前，我们通常使用 || 运算符来实现：

const obj = {
  a: null
};
obj.a = obj.a || 'default';
console.log(obj.a); // 'default'

这种方式也存在问题，如果 a 的值是 0、''、false 或者其他 falsy 值，那么它们也会被判断为 false，导致默认值被赋上。而双问号运算符则可以准确地判断 null 或 undefined：

const obj = {
  a: null
};
obj.a = obj.a ?? 'default';
console.log(obj.a); // 'default'

注意事项

在使用双问号运算符时，需要注意以下几点：

1. 双问号运算符的优先级比大多数运算符都要低，因此需要加上括号来确保运算顺序正确。

2. 双问号运算符只能判断 null 或 undefined，不能判断其他 falsy 值。

const a = 0;
const b = a ?? 'default'; // 0

在上面的例子中，0 是一个 falsy 值，但是双问号运算符并没有将它判断为 null 或 undefined，而是返回了它本身的值。

总结

本文介绍了 ES2021 的双问号运算符（??）的作用和常见使用场景，以及注意事项。双问号运算符可以帮助我们更方便地处理 undefined 和 null，避免了一些常见的问题。在实际开发中，建议使用双问号运算符来处理默认值的问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6688b866dc1ed1a61bb0ae96