ES12（也称为 ES2021）是 JavaScript 语言的最新版本，其中最大的更新之一是可选链（Optional Chaining）。可选链是一种简化代码的方法，可以减少代码中的条件语句和错误处理。在本文中，我们将深入探讨可选链的概念、用法和示例。
什么是可选链？
可选链是一种新的语法，用于访问可能不存在的对象属性。在 JavaScript 中，如果我们尝试访问一个不存在的属性，会抛出一个错误。例如，如果我们要访问一个名为 person 的对象的 name 属性，我们通常会这样写代码：
const name = person.name;
但如果 person 对象不存在，我们将会得到一个错误。在这种情况下，我们必须使用条件语句来检查 person 是否存在，然后才能安全地访问 name 属性：
const name = person ? person.name : undefined;
这种方式会使代码变得冗长且难以阅读。可选链提供了一种更简单的解决方案。
如何使用可选链？
使用可选链，我们可以在访问对象属性时，使用问号 ? 来表示属性可能不存在。例如，我们可以使用可选链来访问 person 对象的 name 属性：
const name = person?.name;
如果 person 对象不存在，这个语句将会返回 undefined，而不是抛出错误。这使得代码更加简洁和易于阅读。
可选链还可以在多层嵌套的对象中使用。例如，假设我们有一个名为 person 的对象，它包含一个名为 address 的属性，然后 address 对象又包含一个名为 city 的属性。我们可以使用可选链来访问 city 属性：
const city = person?.address?.city;
如果 person 或 address 对象不存在，这个语句将会返回 undefined。
我们还可以在属性访问之后使用可选链调用函数。例如，假设我们要调用 person 对象的 getName 函数：
const name = person?.getName();
如果 person 对象不存在，这个语句将会返回 undefined。
可选链示例
下面是一个示例，演示了如何使用可选链来访问可能不存在的对象属性：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ---- ------
------ -----
--
--
-------------------------- -- -------
----------------------------------- -- ---- -----
-------------------------------------- -- ---------在这个示例中，我们创建了一个名为 person 的对象，它包含一个名为 name 的属性和一个名为 address 的属性。address 属性又包含一个名为 city 的属性和一个名为 state 的属性。在第一个 console.log 语句中，我们使用可选链来访问 person 对象的 name 属性。在第二个 console.log 语句中，我们使用可选链来访问 person 对象的 address 对象的 city 属性。在第三个 console.log 语句中，我们使用可选链来访问 person 对象的 address 对象的 country 属性，但是这个属性不存在，所以返回 undefined。
总结
可选链是一种简化代码的方法，可以减少代码中的条件语句和错误处理。它允许我们在访问可能不存在的对象属性时，使用问号 ? 来表示属性可能不存在。可选链还可以在多层嵌套的对象中使用，以及在属性访问之后使用可选链调用函数。在使用可选链时，我们应该注意对它的正确使用，以避免潜在的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f9d2efd10417a2225b6344