ECMAScript 2020 中的新特性之五：Nullish Coalescing Operator-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 中，新增了一个叫做 Nullish Coalescing Operator 的操作符。这个操作符可以帮助我们更方便地处理 null 或 undefined 的情况，让我们来看看它的具体用法和意义。

什么是 Nullish Coalescing Operator

Nullish Coalescing Operator 的写法是 ??，它的作用是当左侧的值为 null 或 undefined 时，返回右侧的值，否则返回左侧的值。这个操作符的优先级比较低，因此在使用时需要注意它的位置和括号的使用。

Nullish Coalescing Operator 与 || 的区别

在 JavaScript 中，我们经常使用逻辑或操作符 || 来处理默认值的情况。但是，|| 操作符存在一些问题，例如当左侧的值为假值（false、0、''等）时，也会触发默认值的赋值，这可能会导致一些意想不到的结果。

Nullish Coalescing Operator 则只会在左侧的值为 null 或 undefined 时触发默认值的赋值，这样可以避免上述问题。下面是一个使用 || 和 ?? 的对比：

const foo = '' || 'default'; // foo 的值为 'default'
const bar = null || 'default'; // bar 的值为 'default'

const baz = '' ?? 'default'; // baz 的值为 ''
const qux = null ?? 'default'; // qux 的值为 'default'

从上述例子中可以看出，|| 操作符会在左侧的值为假值时触发默认值的赋值，而 ?? 操作符只会在左侧的值为 null 或 undefined 时触发默认值的赋值。

Nullish Coalescing Operator 的应用场景

Nullish Coalescing Operator 可以用来处理默认值的情况，特别是在处理函数参数时非常有用。下面是一个使用 Nullish Coalescing Operator 处理函数参数默认值的例子：

// javascriptcn.com 代码示例
function greet(name, message) {
  name = name ?? 'stranger';
  message = message ?? 'Hello';
  console.log(`${message}, ${name}!`);
}

greet(); // 输出：'Hello, stranger!'
greet('John'); // 输出：'Hello, John!'
greet('John', 'Hi'); // 输出：'Hi, John!'

上述例子中，我们使用了 Nullish Coalescing Operator 来处理 name 和 message 的默认值，当这两个参数为 null 或 undefined 时，会使用默认值 'stranger' 和 'Hello'。

总结

Nullish Coalescing Operator 是 ECMAScript 2020 中新增的操作符，它可以用来处理 null 或 undefined 的情况，避免使用 || 操作符可能出现的问题。它的应用场景包括处理函数参数默认值等。在实际开发中，我们可以根据具体情况来选择使用 || 或 ?? 操作符。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65854106d2f5e1655dfeaca6