完全搞懂 ES11 新特性：空值合并操作符

在前端开发中，我们经常需要为变量设置默认值，以防止出现 undefined 或 null 的情况。在 ES11 中，引入了空值合并操作符，为确定变量默认值提供了一种新方式。

空值合并操作符是什么？

空值合并操作符（Nullish Coalescing Operator）是一个双问号（??）符号，用于判断一个值是否为 null 或 undefined。如果是，那么它会返回一个默认值。

空值合并操作符与逻辑或操作符（||）的区别在于，逻辑或操作符在判断 null 或 undefined 时，会将其转换为 false，导致返回默认值。而空值合并操作符只有在值为 null 或 undefined 时才会返回默认值。

空值合并操作符的语法

空值合并操作符的语法如下：

defaultValue = value1 ?? value2;

其中，value1 是需要判断的值，value2 是默认值。

如果 value1 的值不为 null 或 undefined，那么 defaultValue 就等于 value1 的值。如果 value1 的值为 null 或 undefined，那么 defaultValue 就等于 value2 的值。

空值合并操作符的示例

下面是一个使用空值合并操作符的示例：

const foo = null;
const bar = 0;
const baz = undefined;

const result1 = foo ?? 'default'; // 'default'
const result2 = bar ?? 'default'; // 0
const result3 = baz ?? 'default'; // 'default'

在这个示例中，result1 的值为 'default'，因为 foo 的值为 null。result2 的值为 0，因为 bar 的值不为 null 或 undefined。result3 的值为 'default'，因为 baz 的值为 undefined。

空值合并操作符的指导意义

空值合并操作符为确定变量的默认值提供了一种新方式，可以简化代码的编写。同时，它也可以避免在判断变量是否为 null 或 undefined 时出现错误。

使用空值合并操作符时，需要注意的是，它只能判断一个值是否为 null 或 undefined。如果需要判断多个值，需要使用逻辑运算符。

另外，空值合并操作符在一些老版本的浏览器中可能不支持，需要进行兼容性处理。

总结

空值合并操作符是 ES11 中的新特性，用于确定变量的默认值。它的语法简单明了，可以避免在判断变量是否为 null 或 undefined 时出现错误。使用空值合并操作符时，需要注意兼容性问题，并结合逻辑运算符进行多个值的判断。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650c11aa95b1f8cacd6279fc