在 JavaScript 中，我们经常需要对对象进行链式访问操作。例如，我们可能需要访问一个对象的属性，而这个属性可能又是一个对象，我们又需要访问这个对象的属性，以此类推。这种链式访问操作可以让我们更方便地获取对象中的数据，但是也容易出现代码冗长、难以阅读和维护等问题。ECMAScript 2020 引入的 Optional Chaining 可以帮助我们简化这种操作，让代码更加简洁和易读。
Optional Chaining 是什么？
Optional Chaining 是 ECMAScript 2020 中引入的一种新特性，用于简化链式访问操作。它可以让我们在访问对象的属性或方法时，不用担心中间的属性不存在或者为 null 或 undefined，而直接返回 undefined。这样可以避免在访问不存在的属性时出现错误，同时也让代码更加简洁和易读。
Optional Chaining 使用问号（?）来表示可能不存在的属性或方法。例如，我们可以使用以下代码来访问一个对象中可能不存在的属性：
-- -------------------- ---- -------
----- --- - -
---- -
---- ---
--
--
--------------------------- -- --
--------------------------- -- ---------
-------------------------------- -- ---------在上面的代码中，我们使用了 Optional Chaining 来访问 foo 对象中的 bar 属性和 baz 属性。如果 foo 对象中不存在 bar 属性或者 bar 属性中不存在 baz 属性，那么这些访问都会返回 undefined。
Optional Chaining 的优点
使用 Optional Chaining 可以带来以下优点：
1. 简化代码
Optional Chaining 可以简化链式访问操作，让代码更加简洁和易读。使用 Optional Chaining，我们可以避免在访问不存在的属性或方法时出现错误，从而减少代码量。
2. 提高代码的健壮性
Optional Chaining 可以让我们在访问不存在的属性或方法时，直接返回 undefined，而不会出现错误。这样可以提高代码的健壮性，避免出现未处理的错误。
3. 方便调试和维护
使用 Optional Chaining 可以让代码更加易读和易于理解，从而方便调试和维护。我们可以更快地找到代码中的问题，并进行修复。
Optional Chaining 的使用场景
Optional Chaining 可以用于访问对象的属性和方法，特别适用于以下场景：
1. 访问深层嵌套的属性
当我们需要访问一个对象中深层嵌套的属性时，可以使用 Optional Chaining 简化代码。以下是一个示例：
-- -------------------- ---- -------
----- ---- - -
----- -----
-------- -
----- -----
------- ------
-------- ---------
--
--
--------------------------------- -- ----
------------------------------------ -- ---------在上面的代码中，我们使用了 Optional Chaining 来访问 user 对象中的 address 属性和 city 属性。如果 user 对象中不存在 address 属性或者 address 属性中不存在 city 属性，那么这些访问都会返回 undefined。
2. 调用可能不存在的方法
当我们需要调用一个对象中可能不存在的方法时，可以使用 Optional Chaining 简化代码。以下是一个示例：
-- -------------------- ---- -------
----- --- - -
---- -
----- -
------------------- ---------
--
--
--
------------------ -- ------- -------
------------------ -- ---------在上面的代码中，我们使用了 Optional Chaining 来调用 obj 对象中的 foo 属性和 bar 方法。如果 obj 对象中不存在 foo 属性或者 foo 属性中不存在 bar 方法，那么这些调用都会返回 undefined。
如何在项目中使用 Optional Chaining
如果你使用的是较新版本的浏览器或 Node.js，那么你可以直接在项目中使用 Optional Chaining。如果你需要支持旧版本的浏览器或 Node.js，那么你可以使用 Babel 转译器来将代码转换为兼容性更好的代码。以下是一个使用 Babel 转译器的示例：
-- -------------------- ---- ------- -- ---- --- ------- ---------- ----------- ---------- ----------------- -- -- -------- -- - ---------- --------------------- - -- -- ----- ------- --- ----- --- --------- ---
在上面的代码中，我们首先安装了 Babel 相关的依赖，然后创建了 .babelrc 文件来指定使用 @babel/preset-env 预设来转译代码。最后，我们使用 npx babel 命令来将 src 目录下的代码转译到 lib 目录下。
总结
Optional Chaining 是 ECMAScript 2020 中引入的一种新特性，用于简化链式访问操作。使用 Optional Chaining 可以让代码更加简洁和易读，同时也可以提高代码的健壮性和方便调试和维护。在项目中使用 Optional Chaining 可以让我们更加高效地编写代码，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c8f2d0add4f0e0ff2ac3c2