ECMAScript 2020 的 Nullish Coalescing 运算符详解及应用场景

ECMAScript 2020 中引入了 Nullish Coalescing 运算符，它可以帮助我们更方便地处理 null 或 undefined 的情况。在本文中，我们将对 Nullish Coalescing 运算符进行详细的介绍，并讨论它的应用场景。

Nullish Coalescing 运算符

Nullish Coalescing 运算符是双问号运算符（??），它可以用来判断一个变量是否为 null 或 undefined，并在变量为 null 或 undefined 时返回一个默认值。它的语法如下：

const result = variable ?? defaultValue;

其中，variable 是要进行判断的变量，defaultValue 是默认值。如果 variable 的值为 null 或 undefined，则返回 defaultValue，否则返回 variable 的值。

与传统的逻辑或运算符（||）不同，Nullish Coalescing 运算符只在变量为 null 或 undefined 时返回默认值，而不是在变量为假值时返回默认值。例如：

const a = null;
const b = undefined;
const c = 0;
const d = '';

console.log(a || 'default'); // 'default'
console.log(b || 'default'); // 'default'
console.log(c || 'default'); // 0
console.log(d || 'default'); // 'default'

console.log(a ?? 'default'); // 'default'
console.log(b ?? 'default'); // 'default'
console.log(c ?? 'default'); // 0
console.log(d ?? 'default'); // ''

在上面的例子中，a 和 b 的值为 null 和 undefined，使用逻辑或运算符时都会返回默认值。而使用 Nullish Coalescing 运算符时，它们也会返回默认值。而 c 和 d 的值为 0 和空字符串，使用逻辑或运算符时只有空字符串会返回默认值，而使用 Nullish Coalescing 运算符时都不会返回默认值。

应用场景

Nullish Coalescing 运算符可以用来处理许多场景，例如：

1. 设置默认值

当我们需要设置一个变量的默认值时，可以使用 Nullish Coalescing 运算符。例如：

const name = getName() ?? 'Guest';

在上面的例子中，如果 getName() 返回 null 或 undefined，则 name 的值将被设置为 'Guest'。

2. 避免错误

在访问对象属性或数组元素时，如果对象或数组不存在，会抛出错误。可以使用 Nullish Coalescing 运算符来避免这种错误。例如：

const person = {
  name: 'John',
  age: 30
};

const city = person.address?.city ?? 'Unknown';

在上面的例子中，如果 person 对象没有 address 属性，或 address 属性的值为 null 或 undefined，则 city 的值将被设置为 'Unknown'。

3. 链式调用

在链式调用中，如果中间的对象不存在，会抛出错误。可以使用 Nullish Coalescing 运算符来避免这种错误。例如：

const result = person?.address?.city ?? 'Unknown';

在上面的例子中，如果 person 对象或 address 属性不存在，或它们的值为 null 或 undefined，则 result 的值将被设置为 'Unknown'。

总结

Nullish Coalescing 运算符是 ECMAScript 2020 中引入的新运算符，它可以帮助我们更方便地处理 null 或 undefined 的情况。它与传统的逻辑或运算符不同，只在变量为 null 或 undefined 时返回默认值。Nullish Coalescing 运算符可以用来设置默认值、避免错误和链式调用等场景。在实际开发中，我们应该根据具体情况灵活使用。

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