在 JavaScript 中，我们常常需要进行连锁判断，以确保某个属性或方法是否存在，否则就会出现代码中断的情况。ES10 中新增的 optional chaining 和 nullish coalescing 运算符，可以有效地解决这个问题。
Optional Chaining 运算符
Optional Chaining 运算符（?.）是一种简化连锁判断的语法糖，它可以在访问对象的属性或方法时，避免出现 undefined 或 null 的情况。
以前，我们可能会写出这样的代码：
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.method()) {
// do something
}现在，我们可以使用 Optional Chaining 运算符简化代码：
if (obj?.prop1?.prop2?.method()) {
// do something
}如果 obj、prop1、prop2 或 method 中的任何一个不存在，Optional Chaining 运算符都会返回 undefined，不会中断代码的执行。
Nullish Coalescing 运算符
Nullish Coalescing 运算符（??）是一种用于判断变量是否为 null 或 undefined 的运算符，它可以在变量为 null 或 undefined 时，返回默认值。
以前，我们可能会写出这样的代码：
const value = (input !== null && input !== undefined) ? input : 'default';
现在，我们可以使用 Nullish Coalescing 运算符简化代码：
const value = input ?? 'default';
如果 input 为 null 或 undefined，Nullish Coalescing 运算符会返回 'default'，否则会返回 input。
示例代码
下面是一个使用 Optional Chaining 和 Nullish Coalescing 运算符的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -
----- -------
-------- -
----- ---- ------
------ ----
-
-
--
----- ---- - ----------------------- -- ----------
----- ------- - -------------------------- -- ----------
------------------ -- ---- -----
--------------------- -- ---------在这个示例中，我们使用 Optional Chaining 运算符避免了访问不存在的属性，使用 Nullish Coalescing 运算符设置了默认值，使代码更加简洁和可读。
总结
Optional Chaining 和 Nullish Coalescing 运算符是 ES10 中新增的两个语法糖，它们可以有效地解决 JavaScript 中连锁判断的问题，使代码更加简洁和可读。在编写 JavaScript 代码时，我们应该积极使用它们，以提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dfccc51886fbafa4cf89bf