在 JavaScript 中，我们经常需要对空值或者 undefined 值进行判断，以保证代码的正确性。在 ES2020 中，Nullish Coalescing Operator 这个新特性的出现，为我们处理这个问题提供了一种更加简单、优雅的方式。
什么是 Nullish Coalescing Operator？
Nullish Coalescing Operator 是一个新的逻辑运算符，用于判断某个值是否为 null 或 undefined。它的语法形式为双问号（??），表示如果左侧的值为 null 或 undefined，则返回右侧的值，否则返回左侧的值。
下面是一个简单的示例：
const foo = null ?? 'default'; console.log(foo); // 输出 'default' const bar = 'hello' ?? 'default'; console.log(bar); // 输出 'hello'
在这个示例中，我们使用 ?? 运算符对 foo 和 bar 进行了赋值。由于 foo 的值为 null，所以它的值被赋为了 'default'；而 bar 的值为 'hello'，所以它的值不会被改变。
Nullish Coalescing Operator 和 || 运算符的区别
在 JavaScript 中，我们通常使用 || 运算符来判断某个值是否为 falsy 值。但是，|| 运算符在判断 falsy 值的时候，会将 0、''、false 等值也视为 falsy 值。这个时候，就需要使用额外的判断语句来排除这些情况。
Nullish Coalescing Operator 就是为了解决这个问题而出现的。它只会在左侧的值为 null 或 undefined 时返回右侧的值，而不会将 0、''、false 等值也视为 falsy 值。因此，使用 Nullish Coalescing Operator 可以让我们的代码更加简洁、易读。
下面是一个使用 || 运算符和 ?? 运算符的比较示例：
-- -------------------- ---- ------- ----- --- - - -- ---------- ----------------- -- -- --------- ----- --- - -- -- ---------- ----------------- -- -- --------- ----- --- - ----- -- ---------- ----------------- -- -- --------- ----- --- - ---- -- ---------- ----------------- -- -- ---------
在这个示例中，我们分别使用了 || 运算符和 ?? 运算符对 foo、bar、baz 和 qux 进行了赋值。由于 || 运算符将 0、''、false 等值也视为 falsy 值，所以 foo、bar 和 baz 的值都被赋为了 'default'；而 Nullish Coalescing Operator 只会在左侧的值为 null 或 undefined 时返回右侧的值，所以 qux 的值被赋为了 'default'。
Nullish Coalescing Operator 和 && 运算符的结合使用
在实际开发中，我们经常需要同时判断多个变量的值是否为 null 或 undefined，然后根据不同的情况进行不同的操作。在这种情况下，可以使用 Nullish Coalescing Operator 和 && 运算符的结合使用，来进行更加复杂的逻辑判断。
下面是一个使用 Nullish Coalescing Operator 和 && 运算符的示例：
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- ----- -------- ---------- -- ----- ---- - --------- -- ---------- ----- --- - -------- -- --- ----- ------- - ------------ -- ------------------- -- ---------- ------------------ -- -- ------- ----------------- -- -- -- --------------------- -- -- ---------
在这个示例中，我们使用 Nullish Coalescing Operator 和 && 运算符对 data 对象中的 name、age 和 address 进行了赋值。由于 name 的值不为 null 或 undefined，所以它的值不会被改变；而 age 的值为 null，所以它被赋为了默认值 18；address 的值为 undefined，所以我们使用了 && 运算符来判断 data.address 是否为 null 或 undefined，如果是，则返回 'Unknown'。
结论
Nullish Coalescing Operator 是 ES2020 中的一个新特性，它可以更加简单、优雅地处理 null 和 undefined 值的判断。与 || 运算符相比，它不会将 0、''、false 等值也视为 falsy 值，因此在实际开发中，我们可以更加方便地使用它来判断变量的值是否为 null 或 undefined。同时，与 && 运算符的结合使用，可以让我们处理更加复杂的逻辑判断。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676342a4856ee0c1d41c6770