在 ES10 中正确使用 nullish coalescing 运算符-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中正确使用 nullish coalescing 运算符

在前端开发中，我们经常需要处理变量为空或未定义的情况，为了避免出现 TypeError，我们通常使用逻辑或运算符 || 进行默认值的设置：

let name = '';
let defaultName = 'Unknown';
let displayName = name || defaultName; // 当 name 为空时，使用 defaultName
console.log(displayName);  // 'Unknown'

在大多数情况下，这种方式是可靠的。然而，如果 name 取值为 0 或者 false 等“假值”，就会出现问题。基于这个问题，ES10 中加入了 nullish coalescing 运算符 ??，它的作用是取两个操作数中非 nullish 类型（null 或 undefined）的值。和逻辑或有些相似，但 ?? 只有左侧操作数为 nullish 时才会返回右侧操作数。

下面是使用 nullish coalescing 运算符的例子：

let height;
let minHeight = 100;
console.log(height ?? minHeight); // 100

在上例中，因为 height 未定义，所以返回默认值 minHeight。需要注意的是，如果 height 取值为 0 或 ''，它们不属于 nullish 类型，仍然将从左侧取值。

除了提供了更加严谨的判断方式，nullish coalescing 运算符还可以让我们更方便地处理函数的默认参数。以之前的逻辑或为例，定义默认参数时需要对每个值都进行判空操作：

function greet(user) {
  user = user || 'Guest';
  console.log(`Welcome, ${user}!`);
}

greet();          // Welcome, Guest!
greet('Alice');   // Welcome, Alice!
greet(null);      // Welcome, Guest!

这种方式的问题在于，如果 user 取值为 0 或者空字符串，将会被忽略。为了达到我们预期的默认值效果，我们需要更加严谨的判断：

// javascriptcn.com 代码示例
function greet(user) {
  user = user === undefined ? 'Guest' : user;
  console.log(`Welcome, ${user}!`);
}

greet();          // Welcome, Guest!
greet('Alice');   // Welcome, Alice!
greet(null);      // Welcome, null!
greet(0);         // Welcome, 0!

使用 nullish coalescing 运算符，我们可以更加方便地实现相同的功能：

function greet(user = 'Guest') {
  console.log(`Welcome, ${user}!`);
}

greet();          // Welcome, Guest!
greet('Alice');   // Welcome, Alice!
greet(null);      // Welcome, null!
greet(0);         // Welcome, 0!

需要注意的是，nullish coalescing 运算符的优先级低于其他运算符。在使用时，最好加上括号，以便代码的清晰与易读。

总结：

nullish coalescing 运算符是 ES10 中的新特性，它可以更加方便、严谨地处理变量为空或未定义的情况。在使用时需要注意非 nullish 值的处理方式，以及运算符的优先级问题。对于函数默认参数的设置，建议使用 nullish coalescing 运算符进行简洁易读的设置。

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