利用 ES10 新特性: nullish 合并运算符-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，有时候需要设置默认值或者避免空值导致的错误。在以往的代码中，我们可能会使用 || 运算符或者三元运算符来处理这个问题。然而，ES10 引入了一个新的运算符 —— nullish 合并运算符，可以很好的解决这个问题。本文将会详细介绍 nullish 合并运算符，并给出一些实例。

nullish 合并运算符

nullish 合并运算符（??）是 ES10 新引入的一种运算符，它可以用于合并两个值或变量，提供默认值，避免空值的情况。与 || 运算符不同的是，当左侧的操作数为 null 或 undefined 时，才会选取右侧的操作数。

const foo = null ?? 'default value'; // result: 'default value'
const bar = 'specified value' ?? 'default value'; // result: 'specified value'

上面的代码中，当 foo 值为 null 时，nullish 合并运算符将返回 'default value'，而当 bar 值为 'specified value' 时，nullish 合并运算符将返回 'specified value'。

nullish 合并运算符与 || 运算符的区别

对比 nullish 合并运算符与 || 运算符，你会发现它们的区别主要在于判断空值的情况。|| 运算符会将 false、0、'' 等非空值也视为假值，当左侧操作数为假值时，才会返回右侧的操作数。而 nullish 合并运算符只在左侧操作数为 null 或 undefined 时返回右侧操作数。

// javascriptcn.com 代码示例
const foo = false || 'default value'; // result: 'default value'
const bar = '' || 'default value'; // result: 'default value'
const baz = null || 'default value'; // result: 'default value'
const qux = undefined || 'default value'; // result: 'default value'

const foo1 = false ?? 'default value'; // result: false
const bar1 = '' ?? 'default value'; // result: ''
const baz1 = null ?? 'default value'; // result: 'default value'
const qux1 = undefined ?? 'default value'; // result: 'default value'

实例应用

给定默认值

在实际开发中，我们经常需要为变量或函数设置默认值。可以通过 nullish 合并运算符来完成这个任务。

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

sayHello(); // result: Hello, Guest!
sayHello('Jack'); // result: Hello, Jack!

避免对象属性不存在的错误

当我们访问对象的属性时，如果该属性不存在或者值为 null/undefined，就会抛出 TypeError 的错误。通过 nullish 合并运算符可以避免这个错误。

const person = { name: 'Jack', age: 20 };
const country = person.country ?? 'unspecified'; // result: 'unspecified'

避免函数参数为 null 或者 undefined 的错误

在执行函数时，有些参数可能会被省略或者为空值，此时我们可以使用 nullish 合并运算符避免错误。

function greet(name, age) {
  name = name ?? 'Guest';
  age = age ?? 'Unknown';
  console.log(`Hello, ${name}, ${age} years old.`);
}

greet('Jack', 20); // result: Hello, Jack, 20 years old.
greet(); // result: Hello, Guest, Unknown years old.

总结

nullish 合并运算符是 ES10 中新增的一个运算符，它可以很好地解决默认值和空值问题。相较于 || 运算符，nullish 合并运算符对空值的判断更加严格，只有在左侧操作数为 null 或 undefined 时才会返回右侧操作数。使用 nullish 合并运算符可以避免代码中的错误，提高代码的质量和可读性。

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