如何使用 ES11 中的 Nullish Coalescing 操作符处理变量默认值

在前端开发中，我们经常需要对变量进行默认值的处理。在 ES6 中，我们可以使用默认参数来实现这一功能。但是，当变量值为 falsy 值（如 0、''、null、undefined）时，这种方式就会出现问题。在 ES11 中，Nullish Coalescing 操作符的出现就解决了这个问题。

什么是 Nullish Coalescing 操作符

Nullish Coalescing 操作符（??）是一个逻辑运算符，它用于处理变量默认值。当左侧操作数为 null 或 undefined 时，它会返回右侧操作数。否则，它会返回左侧操作数。

如何使用 Nullish Coalescing 操作符

使用 Nullish Coalescing 操作符非常简单，只需要在需要处理默认值的变量后面加上 ??，并紧跟着默认值即可。例如：

const foo = null ?? 'default'; // 'default'
const bar = undefined ?? 'default'; // 'default'
const baz = '' ?? 'default'; // ''

上面的例子中，变量 foo 和 bar 分别为 null 和 undefined，它们的默认值都被设置为了 'default'。而变量 baz 的值为 ''，它的默认值为 ''。

Nullish Coalescing 操作符与 || 操作符的区别

在 ES6 中，我们使用 || 操作符来处理默认值。但是，|| 操作符在处理 falsy 值时会出现问题，因为它会将 0、''、false 等值视为 falsy 值。而 Nullish Coalescing 操作符只会在左侧操作数为 null 或 undefined 时返回右侧操作数。例如：

const foo = 0 || 'default'; // 'default'
const bar = '' || 'default'; // 'default'
const baz = false || 'default'; // 'default'

上面的例子中，变量 foo、bar 和 baz 的值均为 'default'，这与我们的预期不符。而使用 Nullish Coalescing 操作符时，我们可以得到正确的结果。例如：

const foo = 0 ?? 'default'; // 0
const bar = '' ?? 'default'; // ''
const baz = false ?? 'default'; // false

上面的例子中，变量 foo、bar 和 baz 的默认值分别为 0、'' 和 false。

总结

Nullish Coalescing 操作符是 ES11 中的一个新特性，用于处理变量默认值。它与 || 操作符的区别在于，它只在左侧操作数为 null 或 undefined 时返回右侧操作数。在实际开发中，我们可以使用 Nullish Coalescing 操作符来处理变量默认值，避免出现意外的结果。

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