空值合并 - 别再让 Falsy 欺骗你

语言瞬息万变。如果你读过我的其他文章，你就会知道我喜欢关注 JavaScript 的最新动态和最精彩的内容。

就在上周，TC39（ECMAScript 背后的委员会）批准了一些很棒的新功能。本周我们将深入探讨空值合并。这个名字有点拗口，不是吗？

让我们来分析一下。

使用或设置默认值

在编程中，我们经常无法确定某个值是否存在，而是希望设置一个默认值。实现这一点有几种不同的方法，但最常见的一种是使用 或 ，用 表示||。

let snippet = null

let snippet = snippet || "code snippet"

在此示例中，snippet设置为null。由于我们始终需要一个字符串，因此我们将使用 或 运算符重新赋值。除非为假值snippet，否则此表达式将保持不变。当 为假值 时，表达式将解析为“代码片段”。这是因为 JavaScript 中的假值是指“在布尔上下文中遇到时被视为假的值”，就像我们上面的例子一样。snippet

虚假值

或运算符超级好用！但在 JavaScript 中，假值有点棘手。它们不仅包括null和这样的值undefined，还包括0、false和空字符串。哎呀！这意味着这个表达式的计算结果会和我们想要的略有不同。

let age = 0

let age = age || 1

在这个例子中，age变成了1。但这0是一个有效的年龄！我们​​不希望这样。我们只想1在age不是数字时默认为 。

请注意，有一个函数isNaN可以检查这一点，但我们现在忽略这种情况。

我们很快发现，还有很多其他情况也会导致问题。我特别喜欢的是空字符串的情况。通常情况下，你不需要null字符串变量，因为当你尝试操作它时会抛出错误。但空字符串是可以的。

let message = ""

let message = message || "Welcome to DEV"

然而，在 JavaScript 中，空字符串是假的！所以message即使我们不想这样，它也会设置为“Welcome to DEV”。

请注意，我们可以检查的类型stringValue，但这很烦人。

随之而来的是空值合并

这就是新增功能的全部内容。我们可以||用空值合并运算符 来替换我们的检查??。此运算符的使用方法与 大致相同||，但有一个主要区别。如果 运算符左侧的值是null或 ，undefined则将使用默认值（右侧）。否则，将忽略默认值。

让我们看一下这三个例子。

let snippet = null

let snippet = snippet ?? "code snippet"

这仍然会解析为"code snippet". snippetis null。

如果是零这样的假值怎么办？

let age = 0

let age = age ?? 1

age仍然是0！0不是null或undefined，因此运算符的右侧参数被忽略。

最后是我们的空字符串示例。

let message = ""

let message = message ?? "Welcome to DEV"

message保持为空字符串，正如我们想要的那样。

这太棒了

不是吗？！多年来，Falsy 值引发了不少意外的副作用，让我苦恼不已，所以我对这个功能非常期待。敬请期待其他新功能。接下来我们将讨论可选链式调用。