ES11 中使用 Nullish Coalescing Operator 解决 undefined 与 null 的问题

在 JavaScript 开发中，经常会遇到判断一个变量是否为 undefined 或 null 的情况。以前，我们常常使用 || 运算符来解决 undefined 和 null 的问题，但是它还存在一些缺点。为了解决这些问题，ES11 引入了 Nullish Coalescing Operator（空值合并运算符），本文将为大家详细介绍它的用法和指导意义。

问题

在 JavaScript 中，我们经常需要判断一个变量是否为 undefined 或 null，比如：

const result = value || 'default';

上面的代码中，如果 value 为 undefined 或 null，变量 result 就会取到默认值 'default'，否则就取到 value 的值。这种写法的问题在于，当 value 的值为 falsy 值时，写法会产生问题。

// 将强制转换为 false 的值认为是 falsy 值，例如：false、0、''、null、undefined、NaN
const falseyValue = '';
const result1 = falseyValue || 'default'; // 'default'

const falsyValue = null;
const result2 = falsyValue || 'default'; // 'default'

在第一个例子中，falseyValue 的值为 ''，即为 falsy 值，按照 || 运算符的规则它会被转化为 false，导致 result1 取到默认值 'default'。在第二个例子中，falsyValue 的值为 null，同样由于 || 运算符的规则，它也会被转化为 false，所以 result2 也取到了默认值 'default'，但实际上我们希望它取到 null。

解决方案

为了解决上述问题，ES11 引入了 Nullish Coalescing Operator（空值合并运算符），它是由两个问号（??）组成的，用于判断一个值是否为 null 或 undefined。

使用方法如下：

const result = value ?? 'default';

上面的代码中，如果 value 的值为 null 或 undefined，表达式就会返回 'default'，否则就返回 value 的值。在这里，?? 运算符不会把 falsey 值当作是 null 或 undefined，它只有在这两个值存在时才会生效。

const falseyValue = '';
const result1 = falseyValue ?? 'default'; // ''

在上面的代码中，falseyValue 虽然为 falsy 值，但是由于它不是 null 或 undefined，因此 ?? 运算符会返回 ''。因此，值为 falsy 的变量也不会被当作 null 或 undefined。

const falsyValue = null;
const result2 = falsyValue ?? 'default'; // 'default'

在上面的代码中，falsyValue 的值为 null，所以 ?? 运算符会返回默认值 'default'。因为它是一个真正的 null 或 undefined 值。

总结

Nullish Coalescing Operator（空值合并运算符）是 ES11 新增的一个语法，在判断变量是否为 null 或 undefined 时非常有用。相较于 || 运算符，?? 运算符能够更加严格地判断变量是否为 null 或 undefined。因此，在实际开发中，合理运用 ?? 运算符能够有效地避免空值错误，提高代码质量和开发效率。

示例代码

const value1 = null;
const value2 = undefined;
const value3 = false;
const value4 = 0;
const value5 = '';

const result1 = value1 ?? 'default'; // 'default'
const result2 = value2 ?? 'default'; // 'default'
const result3 = value3 ?? 'default'; // false
const result4 = value4 ?? 'default'; // 0
const result5 = value5 ?? 'default'; // ''

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