在日常前端开发中，我们难免会碰到未定义变量的引用问题，而未处理这种问题会引起一系列未知异常和错误，进而影响用户体验和开发效率。
ES2020（ES12）中新增的可选链（Optional Chaining）语法，有助于优化这一情况的处理。本文将介绍可选链的概念、应用以及示例代码，并提供实用的开发指导。
可选链的概念
可选链是一种条件式的 JavaScript 语法。它使用 ?. 操作符，用于处理对象或数组中可能为空或未定义的值。如果被访问的属性或方法不存在，则返回 undefined，而不是抛出错误。
可选链的应用场景
链式无限空对象引用
假如我们在处理一个嵌套对象的属性时，可能需要引用到更深层嵌套对象下的属性，在访问属性时未作必要检查，会在存在 null 或 undefined 属性时，导致 TypeError, 而程序未能正常运作。
使用可选链可以允许我们在访问深层属性时进行链式查询，不必显式判空，以免在链式操作中引发未处理异常。
示例代码如下：
-- -------------------- ---- -------
----- ----- - -
--- --
--------- -
----- ----- -----
-------- -
-------- -
----- ---- ------
------ -----
---- -------
--
------ -------------------
------ ----
-
--
------ -
- ----- -------- --- --------- - --
- ----- -------- --- --------- - --
- ----- -------- --- --------- - -
-
-
-- ----
-- --------------- -- ---------------------- -- ------------------------------- -
------------------------------------------------
- ---- -
---------------------- --------- -------
-
-- -----
--------------------------------------------------- -- ---- -----
---------------------------------------------------- -- ----
--------------------------------------------------- -- ---------当使用传统写法时，当遇到 {} 中的某些属性或方法未定义或不存在时，代码会抛出 undefined reference error 异常。
而在使用可选链时，在链式操作过程中遇到 undefined 或 null，则直接返回 undefined，不再继续访问下一个属性或方法，这样能够避免运行时抛出异常。
消除重复代码
在前端开发中，我们常常需要对一些配置项进行检查与读取，比如读取用户的语言偏好。在传统写法中，我们需要先判空或检查某种条件的合法性，然后再进行 read 操作；而在使用可选链的方式中，通过链式查询，可以将这些判断逻辑合并，使得代码更加简洁清晰。
-- -------------------- ---- -------
----- ---- - -
----- ----- -----
--------- -
---------- -
----- --------
----- -------- -----
--
--------- -
- ----- -------- ----- -------- -------- --
- ----- -------- ----- ------- ---------- -
-
-
-
-- ----
-- ----- -- ------------- -- ------------------------ -
-----------------------------------------
- ---- -
--------------------- --------- -------- ------- - ----- --- ---- --------
-
-- -----
------------------------------------------ -- -------- --------- -------- ------- - ----- --- ---- --------可选链的使用方法
可选链语法中使用 ?. 操作符，用于链式调用对象属性、数组元素或函数，避免因不存在目标属性或方法而导致的运行时异常。同时，可选链也包含了快捷方式，用于在缺失值时设置默认值。
示例代码如下：
const user = { name: 'john', age: 32, score: { total: 75 } }
console.log(user.score?.total) // 75
console.log(user.score?.average) // undefined
// 快捷方式：如果左侧的值为 null 或 undefined，则返回默认值。
console.log(user.score?.average || 0) // 0
console.log(user.score?.rank || 'Not ranked') // 'Not ranked'对于函数调用，可选链操作符只在函数实体已存在时才执行函数：
const sampleArray = [1, 2, 3, 4, 5] // 调用可选方法 console.log(sampleArray?.slice(0, 1)) // [1] // 若函数不存在，返回 undefined console.log(sampleArray?.explode?.()) // undefined
可选链的内部机制
可选链语法使用短路求值，即只有当左侧的操作数非 null 或者 undefined 时，才会进行右侧的调用操作。
示例代码如下：
-- -------------------- ---- -------
----- ----- - -
--- --
--------- -
----- ----- -----
-------- -
-------- -
----- ---- ------
------ -----
---- -------
--
------ -------------------
------ ----
-
-
-
-- -----------
---------------------------------------------- -- - --- -
-------------------------- -- ---------------------- -- ------------------------------- -- - --- -可选链的兼容性
可选链是 ES2020 引入的新语法，因此在旧的浏览器中不支持。在较新的浏览器中，如chrome81+，firefox75+，Safari13+等等已经支持这一语法。
开发指导
通过以上的介绍，我们已经了解到可选链的作用、使用场景、语法和内部机制。在实际开发中，我们可以运用可选链语法，来避免在访问数组或对象属性时因未做额外判空而引发的异常。同时，请注意较旧的浏览器或机器中可能无法使用此特性。
最后，向大家提供一个能高效使用可选链关键字的建议--不要滥用可选链关键字，当需要对某个已经经过定义和检查的对象进行属性的访问时应当使用传统的对象操作方法，因为过多使用可选链可能会使得代码变得难以阅读和维护。
-- -------------------- ---- ------- ----- ---- - - ----- ------- ---- --- ------ - ------ -- - - -- ----- -- ----------- -- ----------------- - ----------------------------- - ---- - ----------------------- -- ------- ----- - ----- --- ---- -------- - -- ----- -------------------------------
结论
本文介绍了 ES12 中的可选链语法，着重讲解了它的作用、使用场景、语法和内部机制。通过使用可选链，我们能够简化代码判断逻辑，增强代码的可读性和可维护性，避免运行时 errors，提高开发效率。
在使用可选链时，我们应当注意代码兼容性和使用频率，使代码更加健壮、高效和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673720cb317fbffedf0847da