又见空值合并运算符：ECMAScript 2020 中的 null 连接
在 ECMAScript 2020 中，我们迎来了一个新的空值合并运算符——null 连接（nullish coalescing operator）。该运算符以 ?? 表示，可以在判断空值时提供更加简洁并易于理解的写法。
在了解 null 连接之前，我们先来看下普通的或运算符（||）如何判断空值。通常我们会这样写：
const foo = null || 'bar'; console.log(foo); // 输出 "bar"
上面的代码中，|| 运算符会对两个值进行判断，只要其中有一个是 true 就返回该值。在这里，null 被认为是 falsy 值，所以返回了字符串 "bar"。
但是，如果我们使用 || 运算符时遇到的是 falsy 值而非 null，就会发生意料之外的结果：
const foo = '' || 'bar'; console.log(foo); // 输出 ""
可以看到，当左操作数是 falsy 值时，|| 运算符并不会判断左侧的值是否为 null，而是返回左侧值。这导致代码逻辑不仅不严谨，还容易引发难以察觉的 bug。
为了解决这个问题，null 连接应运而生。当使用 null 连接时，我们只会考虑操作数是否为 null 或 undefined。其规则如下：
- 如果左操作数为 null 或 undefined，则返回右操作数；
- 如果左操作数不为 null 或 undefined，则返回左操作数。
因此，在使用 null 连接时，我们就能够更加精确地判断空值。下面是一个示例代码：
const foo = null ?? 'bar'; console.log(foo); // 输出 "bar" const baz = '' ?? 'qux'; console.log(baz); // 输出 ""
上面的代码中，foo 的值为右侧的 'bar'，因为左侧为 null；baz 的值为左侧的 ''，因为左侧不是 null 或 undefined。
null 连接不仅在判断空值时非常有用，还能在多个变量赋值时使用。下面是一个示例代码：
-- -------------------- ---- ------- ----- -------- - - ------ -------- ------ ----- ------- ---------- -- ----- - ----- - ------- ----- - ---- ------ - ---- - - --------- ------------------ ------ -------- -- -- ------ --- ---------- ----- - ------ - - ------- ------ - - ---- ------- - - ---- - - --------- -------------- -- --- -- -- ------ --- ---- ----- - ------ - - ------- ------ - - ---- ------- - - ---- - - - ------ ----- ------ ---------- ------- ------- -- -------------- -- --- -- -- ----- --- -----
上面的代码中，我们使用解构赋值将 settings 对象的值赋给多个变量。如果 settings 对象中的值是 null 或 undefined，就会使用我们提供的默认值。这个方法不仅简洁，还能够有效地避免因变量为 falsy 值而引发的 bug。
总结
null 连接是 ECMAScript 2020 中新增的一个空值合并运算符，其可以更加准确地判断空值，有效避免变量是 falsy 值时引发的 bug。在实际编写代码时，我们可以使用 null 连接来简化代码并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a120bd48841e9894d652f4