ES11（即 ES2020）是 ECMAScript 的最新版本，引入了许多新特性和改进。其中，Nullish Coalescing 和 Optional Chaning 两个特性是前端开发中最实用的功能之一。这篇文章将详细介绍这两个特性，并提供示例代码。
Nullish Coalescing（空值合并）
Nullish Coalescing 是一种用于 JavaScript 中处理空值（null 或 undefined）的新运算符。在之前的版本中，我们通常使用逻辑运算符 || 来处理空值，例如：
const foo = null || "default value"; console.log(foo); // 输出："default value"
但是，当我们使用 || 运算符时，可能会导致一些问题。例如：
const foo = "" || "default value"; console.log(foo); // 输出："default value"
这是因为，"" 的布尔值为 false，所以 || 运算会返回 "default value"。但是，"" 并不是空值，因此这可能会导致意外的结果。
Nullish Coalescing 运算符 ?? 解决了这个问题。它仅在变量值为 null 或 undefined 时才返回默认值，例如：
const foo = null ?? "default value"; console.log(foo); // 输出："default value" const bar = "" ?? "default value"; console.log(bar); // 输出：""
Nullish Coalescing 运算符 ?? 与逻辑运算符 || 的区别在于，空字符串和数字 0 等值并不会触发默认值的返回。只有 null 或 undefined 才能触发。
Optional Chaning（可选链）
Optional Chaning 是一种用于 JavaScript 中访问对象属性的新语法。在之前的版本中，我们通常使用条件语句来检查对象属性是否存在，例如：
-- -------------------- ---- -------
----- ---- - -
----- -
----- --------
---- --
-
--
-- ----- -- --------- -- --------------- -
---------------------------- -- ----------
-这非常麻烦，尤其是当我们需要访问多层嵌套的属性时。Optional Chaning 极大地简化了这个过程。它允许您使用 ?. 语法来访问可能不存在的对象属性，例如：
const name = data?.user?.name; console.log(name); // 输出："Alice" const address = data?.user?.address?.city; console.log(address); // 输出：undefined
使用可选链 ?. 时，如果访问的属性值不存在，则返回 undefined。这比手动检查每个属性是否存在要简单得多。
总结
Nullish Coalescing 和 Optional Chaning 两个特性是在 ES11 中非常实用的功能。Nullish Coalescing 运算符 ?? 用于处理空值，而 Optional Chaning ?. 用于访问可能不存在的对象属性。它们在处理实际问题时非常好用，可以大大简化代码并提高代码质量。
示例代码
以下是使用 Nullish Coalescing 和 Optional Chaning 的示例代码：
-- -------------------- ---- -------
-- ------- ---------- --
----- ------------ - -------- -------
----- --- - ---- -- -------------
----------------- -- ----------- ------
----- --- - -- -- -------------
----------------- -- -----
-- -------- ------- --
----- ---- - -
----- -
----- --------
---- --
-
--
----- ---- - -----------------
------------------ -- ----------
----- ------- - --------------------------
--------------------- -- ------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65955184eb4cecbf2d9809e3