使用 ES11 的 nullish 合并运算符有效判空-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常需要判断变量是否为 null 或者 undefined。在 ES6 中，我们可以使用默认参数值和逻辑或运算符来实现简单的判空。但是这种方式存在一些缺陷，比如当变量的值为 0 或者空字符串时，也会被判断为空。在 ES11 中，引入了 nullish 合并运算符，可以有效地解决这个问题。

nullish 合并运算符

nullish 合并运算符（??）是一个新的二元运算符，它可以判断左侧的操作数是否为 null 或者 undefined，如果是，则返回右侧的操作数，否则返回左侧的操作数。这个运算符的行为类似于逻辑或运算符，但是它只会在左侧的操作数为 null 或者 undefined 时才会返回右侧的操作数。

下面是一个简单的示例：

const foo = null ?? 'default';
console.log(foo); // 'default'

const bar = 'bar' ?? 'default';
console.log(bar); // 'bar'

在上面的代码中，第一个例子中，foo 的值为 null，所以使用 nullish 合并运算符返回了默认值 'default'。而在第二个例子中，bar 的值为 'bar'，所以不会使用默认值。

nullish 合并运算符的优势

使用 nullish 合并运算符有以下几个优势：

精确判断空值：nullish 合并运算符只会在左侧的操作数为 null 或者 undefined 时才会返回右侧的操作数，而不会像逻辑或运算符一样将其他 falsy 值也视为空值。
更加简洁：使用 nullish 合并运算符可以将判空的逻辑写得更加简洁，不需要使用繁琐的 if 判断语句。
更加高效：使用 nullish 合并运算符可以避免不必要的计算，提高代码的执行效率。

示例代码

下面是一个示例代码，演示了如何使用 nullish 合并运算符判断变量是否为空：

// javascriptcn.com 代码示例
function printUserInfo(userInfo) {
  const name = userInfo.name ?? 'Unknown';
  const age = userInfo.age ?? 'Unknown';
  const gender = userInfo.gender ?? 'Unknown';

  console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}`);
}

printUserInfo({ name: 'Alice', age: 20, gender: undefined }); // Name: Alice, Age: 20, Gender: Unknown
printUserInfo({ name: 'Bob', age: null, gender: 'male' }); // Name: Bob, Age: Unknown, Gender: male
printUserInfo({}); // Name: Unknown, Age: Unknown, Gender: Unknown

在上面的代码中，我们定义了一个函数 printUserInfo，接收一个包含用户信息的对象作为参数。在函数内部，我们使用 nullish 合并运算符来判断每个属性是否为空，并给出默认值。这样可以保证在输出用户信息时，不会出现 undefined 或者 null 的情况。

总结

nullish 合并运算符是 ES11 中新增的一个运算符，它可以精确判断变量是否为空，并且使用起来更加简洁和高效。在实际开发中，我们可以使用 nullish 合并运算符来优化判空逻辑，提高代码的可读性和执行效率。

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