如何在 ES11 中使用 Nullish Coalescing 操作符处理空值-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，我们常常需要判断变量是否为 null 或 undefined 来避免报错，但是传统的写法比较繁琐，例如：

const num = null;
const value = num ?? 0; // 如果 num 为 null，则 value 为 0，否则为 num

在 ES11 中，新增了 Nullish Coalescing 操作符（??），它可以更方便地处理空值判断，不仅代码更易读，而且还可以避免一些潜在的错误。

Nullish Coalescing 操作符介绍

Nullish Coalescing 操作符（??）是一个逻辑运算符，用于确定一个值是 null 或 undefined 时，将该值替换为默认值。它可以在一个表达式中返回第一个定义的变量。例如：

const num = null;
const value = num ?? 0; // 如果 num 为 null 或 undefined，则 value 为 0，否则为 num

在上面的代码中，如果 num 为 null 或 undefined，则 value 的值为 0，否则为 num 的值。

Nullish Coalescing 操作符与 Boolean 运算符的区别

在 JavaScript 中，我们常常使用 Boolean 运算符转换数据类型，例如：

const num = 0;
const value = num || 10; // 如果 num 为 falsy，则 value 为 10，否则为 num

上面的代码中，如果 num 为 falsy（如 0、null、undefined、空字符串等），则 value 的值为 10。

与布尔运算符不同，nullish 操作符只会在值为 null 或 undefined 时返回默认值，因此非 null 或 undefined 的 falsy 值不会被判断为 null 或 undefined。

const num = 0;
const value = num ?? 10; // 如果 num 为 null 或 undefined，则 value 为 10，否则为 num

在上面的代码中，num 为 0，并非 null 或 undefined，因此 value 的值为 0。

Nullish Coalescing 操作符的嵌套使用

Nullish Coalescing 操作符可以与其他运算符一起使用，例如：

const num = null;
const value = num || false ?? true; // 如果 num 为 null 或 undefined，则 value 为 true，否则为 num 或 false

在上面的代码中，如果 num 为 null 或 undefined，则值为 true，否则为 num 或 false。

Nullish Coalescing 操作符的实际应用

在实际开发中，Nullish Coalescing 操作符用于处理空值判断非常方便，例如：

const obj = {
  name: 'Jack',
  age: null,
  country: undefined
};
const name = obj.name ?? 'Unknown'; // 如果 obj.name 为 null 或 undefined，则 name 为 'Unknown'，否则为 obj.name
const age = obj.age ?? 18; // 如果 obj.age 为 null 或 undefined，则 age 为 18，否则为 obj.age
const country = obj.country ?? 'China'; // 如果 obj.country 为 null 或 undefined，则 country 为 'China'，否则为 obj.country

在上面的代码中，我们可以很方便地处理空值，而不用使用传统的判断方法。

总结

Nullish Coalescing 操作符是 JavaScript 中一个非常实用的新特性，它可以更方便地处理空值判断。通过使用 Nullish Coalescing 操作符，我们可以简化代码实现，并避免一些潜在的错误。在实际开发中，我们可以将 Nullish Coalescing 操作符用于处理空值判断，提高代码的可读性和可维护性。

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