ES10 中增加了一个新的语法特性：Optional Chaining，意为“可选链”或“链判断运算符”，该特性可以提升前端开发的效率和代码可读性。本文将对 ES10 Optional Chaining 进行详细讲解，并提供一些示例代码。
基本介绍
Optional Chaining 运算符 ?. 可以用于访问嵌套对象和数组的属性和方法，避免了在进行多层次的属性和方法访问时不必要的判断和异常处理。
在访问某个属性或方法时，若该属性或方法不存在，则返回值为 undefined，而不是报错或抛出异常。
语法格式
Optional Chaining 运算符 ?. 的语法格式如下所示：
object?.property // 访问对象属性 object?.method() // 调用对象方法 array?.[index] // 访问数组元素
其中，object 可以是任意类型的对象，property 和 method 均为对象或函数的属性或方法名，array 是数组对象，index 是数组下标。
示例代码
访问对象属性
下列示例代码，展示了 Optional Chaining 运算符 ?. 如何进行对象属性的访问。
-- -------------------- ---- ------- --- --- - --- --- --- ------- -- --- -------- -------- --- -- ---- -- ----- -- ------- -- ---------- - ----------------------- -- -- --- - -- -- -------- -------- --- -------------------------- -- -- --- --- - ----- -------------------------- -- -- ---------
通过上述代码，我们可以看到，使用 Optional Chaining 运算符可以消除繁琐的属性判断。
调用对象方法
下列示例代码，展示了 Optional Chaining 运算符 ?. 如何进行对象方法的调用。
-- -------------------- ---- -------
--- --- - -
----- -
-------------------
-
--
-- --- -------- -------- ---
-- ---- -- -------- -
---------- -- -- -----
-
-- -- -------- -------- ---
------------- -- -- -----
--- - -----
------------- -- --------通过上述代码，我们可以看到，使用 Optional Chaining 运算符可以消除繁琐的方法调用。
访问数组元素
下列示例代码，展示了 Optional Chaining 运算符 ?. 如何进行数组元素的访问。
-- -------------------- ---- ------- --- --- - ----- ---- ----- -- --- -------- -------- --- -- ---- -- ------- - -------------------- -- -- --- - -- -- -------- -------- --- ---------------------- -- -- --- --- - ----- ---------------------- -- -- ---------
通过上述代码，我们可以看到，使用 Optional Chaining 运算符可以消除繁琐的数组元素访问。
注意事项
Optional Chaining 运算符和
?.连用对象和函数时，要注意括号的问题。obj?.foo?.(arg) // 会被解释成 (obj?.foo)?.(arg) obj?.['foo']?.(arg) // 会被解释成 (obj?.['foo'])?.(arg)
Optional Chaining 运算符不适用于
delete运算符、赋值运算符和逗号运算符。Optional Chaining 运算符的优先级较低，如果和其他运算符连用时，需要使用括号进行区分。
总结
本文详细介绍了 ES10 Optional Chaining 的使用方法，并提供了示例代码。Optional Chaining 可以大大简化对多层次对象和数组的访问和方法调用过程中的判断和异常处理，提高代码的可读性和开发效率。但在使用时需要注意运算符的优先级、括号的问题等。希望本文对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64561aed968c7c53b095f3d1