在开发前端应用时，我们经常会用到对象和数组的属性和方法，然而这些属性和方法并不总是存在的，当我们试图访问不存在的属性或方法时，就会导致程序出错。
早些时候，我们通常会用 if 语句来检查对象或数组中是否存在某个属性或方法，但这样做可能会让代码变得冗长和复杂。现在，ES11 为我们带来了一种新的语法糖——optional chaining 操作符，它可以让我们避免这些冗长的 if 语句，并大大简化代码。
optional chaining 操作符是什么？
optional chaining 操作符是一个问号和一个点号的组合（?），它允许我们在访问对象或数组属性或方法的时候，检查它是否存在，如果存在则取值，如果不存在则返回 undefined。这就让我们能够安全地访问深层嵌套的属性和方法，不再需要使用 if 语句来判断某个属性或方法是否存在。
optional chaining 操作符的语法
optional chaining 操作符的语法很简单，就是一个问号和一个点号组合（?.）。这个操作符可以跟在任何对象或数组的属性或方法后面，表示如果该属性或方法存在，则取它的值。例如：
----- --- - -
----- -------
---- ---
---- -
------ --------- ----------
-------- ----- ------
--
--
----------------------- -- ------
----------------------------- -- --------- ---------
-------------------------------- -- ---------在这个示例中，我们使用 optional chaining 操作符访问了 obj 对象的 name 属性和 job 对象的 title 属性。在第一个例子中，name 属性存在，所以输出了 'John'；在第二个例子中，job 和 title 属性都存在，所以输出了 'Software Engineer'。在第三个例子中，address 属性不存在，所以返回了 undefined。
optional chaining 操作符的应用场景
- 检查对象或数组属性是否存在
使用 optional chaining 操作符，我们可以方便地检查对象或数组属性是否存在。例如：
----- ---- - -
--- ----
----- -------
-------- -
----- ---- ------
-------- --------
--
--
-- --- -------- -------- ---
-- ------------- -- ------------------ -
-------------------------------
-
-- -- -------- -------- ---
--------------------------------- -- ---- -----在这个示例中，我们使用 optional chaining 操作符检查了 user 对象的 address 属性和 city 属性是否存在，并输出了城市名称。在以前的写法中，我们需要使用 if 语句来判断 address 属性和 city 属性是否存在，这样会让代码变得复杂。
- 访问数组元素
使用 optional chaining 操作符，我们可以方便地访问数组元素，避免了访问不存在的索引。例如：
----- --- - --- -- --- -- --- -------- -------- --- -- -------- - -------------------- - -- -- -------- -------- --- ---------------------- -- - ----------------------- -- ---------
在这个示例中，我们使用 optional chaining 操作符访问了 arr 数组的第二个元素和第十个元素。由于 arr 数组只有三个元素，所以访问第十个元素时返回了 undefined。
optional chaining 操作符的注意事项
- 不能用在赋值语句中
optional chaining 操作符不能用在赋值语句中，例如 user?.address?.city = 'New York' 是无效的。
- 不能用在函数调用中
optional chaining 操作符不能用在函数调用中，例如 obj?.foo() 是无效的。
总结
optional chaining 操作符是一种非常方便的语法糖，它可以让我们避免冗长的 if 语句，并大大简化代码。使用 optional chaining 操作符，我们可以安全地访问对象或数组的深层属性和方法，避免了访问不存在的属性或方法时出现的程序错误。它虽然不能完全替代 if 语句，但在某些场景下能够帮助我们编写更简洁、清晰的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664c6b18d3423812e4b3dd70