ES11 在 2020 年正式发布，并带来了很多有意思的新特性。其中，nullish coalescing (null 合并运算符) 在 JavaScript 领域中备受关注，它能够为我们的代码添加一些精致的语法糖。本篇文章将会详细介绍 nullish coalescing 的定义、使用方式、示例和优点，希望能够给读者带来深入的学习和指导意义。
什么是 nullish coalescing？
首先，我们需要了解 nullish coalescing 的定义。在 JavaScript 中，当我们需要检测一个变量是否为 null 或 undefined 时，常用的方式是通过 || 运算符进行判断。例如：
let foo = null || 'default'; let bar = undefined || 'default'; console.log(foo); // 'default' console.log(bar); // 'default'
在这段代码中，当变量 foo 的值为 null 时，通过 || 运算符的短路特性，'default' 会被赋给 foo。同样地，当变量 bar 的值为 undefined 时，也会赋上默认值。这是一个非常常见的逻辑。
然而，|| 运算符的行为可能会带来一些副作用。当变量的值为 false、0 或空字符串（''）时，它们也会被视为“假值”，进而赋上默认值。这个行为常常不被预期。
为了解决这个问题，nullish coalescing 运算符 ?? 被提出。与 || 运算符不同，它只会在变量的值为 null 或 undefined 时才进行默认赋值。其他“假值”将被认为不是 null 或 undefined。例如：
let baz = null ?? 'default'; let qux = undefined ?? 'default'; let quux = '' ?? 'default'; console.log(baz); // 'default' console.log(qux); // 'default' console.log(quux); // '' 空字符串不是 null 或 undefined
如何使用 nullish coalescing？
现在，我们已经大致地了解了 nullish coalescing 运算符的定义和行为。那么，它如何应用到我们的代码中呢？
使用 nullish coalescing 运算符非常简单。只需要在可能出现 null 或 undefined 的变量后面加上 ?? 运算符，然后在后面紧跟默认值即可。例如：
let user = { name: 'Alice', age: null };
let name = user.name ?? 'Unknown';
let age = user.age ?? 18;
console.log(name); // 'Alice'
console.log(age); // 18 user.age 为 null，取默认值 18可以看出，我们在上面的代码中使用了 nullish coalescing 运算符来为两个变量赋上默认值。当 user 对象中的 name 属性为非 null 或 undefined 值时，默认值会被忽略。
示例
让我们进一步探讨 nullish coalescing 的用法。在下面的示例中，我们将使用 ES2020 的 nullish coalescing 和 optional chaining 运算符来获取嵌套对象中的属性。
-- -------------------- ---- -------
--- ---- - -
----- --------
------ -----
-------- -
----- -----------
------- ----
-
--
--- ---- - ---------- -- ----------
--- ----- - ----------- -- ----------
--- ---- - ------------------- -- ----------
--- ------ - --------------------- -- ----------
------------------ -- -------
------------------- -- ---------
------------------ -- ----------
-------------------- -- ---------这里，我们首先使用 optional chaining 运算符 ?. 来检查嵌套对象中的属性是否存在。如果属性存在，它会返回属性的值。如果不存在，则返回 undefined。
接着，我们通过 nullish coalescing 运算符 ?? 给变量赋上默认值。例如，当 user 对象中的 email 属性为 null 或 undefined 时，给它赋上默认值 'Unknown'。同样的，当 user 对象中的 address 属性不存在或者 address 对象中的 street 属性为 null 或 undefined 时，都会给它们赋上默认值 'Unknown'。
nullish coalescing 的优点
nullish coalescing 运算符的出现，使得我们在给变量赋默认值时更加精确，不会受到“假值”的限制。它可以帮助我们写出更加清晰和简洁的代码。此外，与其他语言类似，nullish coalescing 运算符也可以用于判断函数参数是否存在并给它们默认值。例如：
-- -------------------- ---- ------- -------- ----------- ---- - ---- - ---- -- ---------- --- - --- -- --- ------ ------ -------- --- --- ------ ----- ------ - --------------------- -- ------ -------- --- --- -- ----- ----- ---------------------------- -- ------ ------ --- --- -- ----- ----- ------------------------- ----- -- ------ ----- --- --- -- ----- -----
可以看出，当函数的参数没有被传递时，它们的值将会是 null 或 undefined。使用 nullish coalescing 运算符，我们可以为这些变量添加默认值，并让整个函数更加健壮。
总结
在本篇文章中，我们了解了 nullish coalescing 运算符的定义、使用方式和示例，以及它带来的优点。nullish coalescing 是 ES11 中一个有用的新特性，可以帮助我们编写更加精致和健壮的代码。尽管它的使用场景可能比较有限，但了解并掌握这个运算符仍然是我们编写 JavaScript 代码的必要技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2f1bcf6b2d6eab3e3e503