空值合并运算符：在 ES9 中处理零和 NULL 值的新方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会遇到处理零和 NULL 值的情况。ES9 中新增了一个空值合并运算符，可以帮助我们更方便地处理这些情况。

空值合并运算符是什么？

空值合并运算符（nullish coalescing operator）是一个双问号（??）符号。它用于检查一个值是否为 null 或 undefined，如果是则返回一个默认值，否则返回该值本身。

const foo = null ?? 'default'; // 'default'
const bar = undefined ?? 'default'; // 'default'
const baz = 'hello' ?? 'default'; // 'hello'

在上面的示例中，当 foo 和 bar 的值为 null 或 undefined 时，它们将返回默认值 'default'。而当 baz 的值为字符串 'hello' 时，它将返回该值本身。

空值合并运算符与 || 运算符的区别

在 ES6 中，我们通常使用 || 运算符来处理零和 NULL 值。但是，|| 运算符有一个缺点，它会将所有假值都视为 null 或 undefined，包括空字符串、0、false 等。这可能会导致一些意外的结果。

const foo = '' || 'default'; // 'default'
const bar = 0 || 'default'; // 'default'
const baz = false || 'default'; // 'default'

在上面的示例中，|| 运算符将空字符串、0、false 都视为假值，因此它们都返回了默认值 'default'。而空值合并运算符只会将 null 和 undefined 视为假值，因此它不会将空字符串、0、false 视为假值。

const foo = '' ?? 'default'; // ''
const bar = 0 ?? 'default'; // 0
const baz = false ?? 'default'; // false

在上面的示例中，空值合并运算符将空字符串和 false 视为真值，因此它们都返回了原始值。只有当值为 null 或 undefined 时，它才会返回默认值 'default'。

空值合并运算符的应用

空值合并运算符可以用于处理函数参数的默认值，例如：

function greet(name) {
  name = name ?? 'World';
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, World!
greet('Alice'); // Hello, Alice!

在上面的示例中，如果没有传递参数 name，它将默认为 'World'。

空值合并运算符还可以用于处理对象的属性值，例如：

const config = {
  host: process.env.HOST ?? 'localhost',
  port: process.env.PORT ?? 8080,
};

console.log(config.host); // 'localhost' 或 process.env.HOST 的值
console.log(config.port); // 8080 或 process.env.PORT 的值

在上面的示例中，如果环境变量中没有设置 HOST 或 PORT，它们将默认为 'localhost' 和 8080。

总结

空值合并运算符是一个在 ES9 中新增的运算符，它可以帮助我们更方便地处理零和 NULL 值。与 || 运算符相比，它只将 null 和 undefined 视为假值，避免了一些意外的结果。我们可以将空值合并运算符用于处理函数参数的默认值和对象的属性值等场景中。

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