随着 JavaScript 语言的不断发展，新的特性也在不断涌现。ES11（2020）中有两个非常实用的特性，分别是 nullish 合并与 optional chaining。本文将介绍这两个特性的详细内容，并提供示例代码，帮助前端开发者更好地理解和运用它们。
nullish 合并（Nullish Coalescing）
nullish 合并运算符（??）是一个比较新的 JavaScript 运算符，它可以帮助我们更好地处理 null 和 undefined 值。在运算时如果左侧的操作数为 undefined 或 null，那么它会返回右侧的操作数；如果左侧的操作数是一个已定义的值，那么它会返回左侧的操作数。
举个例子：
const foo = null ?? 'bar'; console.log(foo); // 输出 'bar' const baz = undefined ?? 'qux'; console.log(baz); // 输出 'qux' const quux = 0 ?? 42; console.log(quux); // 输出 0
在其中，?? 运算符会检测左侧的操作数是否是 null 或者 undefined，如果是，它会返回右侧的操作数。但是如果左侧的操作数是 0，空字符串或者 false，?? 仍然会返回左侧的操作数值，因为它们在布尔值上下文中被视为 true。
在开发过程中，nullish 合并通常被用来检测或者设置默认值，举个例子：
function getUser(userName, password) {
const user = existingUser ?? { userName, password };
// do something else
return user;
}在上面的代码中，如果 existingUser 的值为 null 或者 undefined，那么它会使用新的对象 { userName, password } 代替。
Optional Chaining
Optional Chaining 运算符（?.）是另外一个非常实用的特性，它允许我们在对象链式访问的时候安全地检查属性或方法是否存在，避免错误抛出以及在多次判断中节约时间。
举个例子：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
--------- ---------
-
--
----- -------- - -------------------------
---------------------- -- -- ---------在上面的代码中，我们使用了 Optional Chaining 运算符，如果 user.address.city.name 存在，那么它就会返回 cityName，否则会返回 undefined。
Optional Chaining 运算符可以和 nullish 合并运算符（??）结合使用：
-- -------------------- ---- -------
----- ---- - -
----- ------
-------- -
--------- ---------
-
--
----- -------- - ------------------------ -- ----------
---------------------- -- -- ---------在上面的代码中，如果 cityName 不存在，那么它就会返回 'Unknown' 字符串。
总结
在本文中，我们介绍了 ES11 中的两个新特性 nullish 合并和 optional chaining。它们能够帮助开发者处理 null 和 undefined 值、减少代码中的出错及加速代码运行。在实际开发中，我们可以使用这两个运算符来提高代码的可读性和可维护性。希望这篇文章能够帮助你更好地了解和运用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455f4ed968c7c53b0948ba9