可选链 (Optional Chain) 是 ES10 引入的一种新特性，它主要是为了解决在访问深层次嵌套的对象时，出现属性不存在而导致程序抛出异常的问题。本篇文章将详细介绍可选链的语法、使用方式和注意事项，并通过实例演示其在实际开发中的效果和应用场景。
语法
可选链是一种新的运算符 ?.，该运算符的作用是，在访问某个对象属性的时候，如果该属性不存在，则不会报错，而是返回 undefined，从而避免程序崩溃。
下面是可选链的语法格式：
obj?.prop obj?.[expr] arr?.[index] func?.(args)
上述语法中，obj 可以是对象、数组、函数等，而 prop、expr、index、args 均为属性或者参数。
示例
让我们通过以下示例来了解可选链的具体作用。
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- --- --------- - ------ ------------ ------ ----------------- - - --------------------------------- -- ----------- ------------------------------- -- -------- ---------- ------ ---- -------- ------ -- ---------展开代码
在上述代码中，程序在访问 user.contacts.phone 属性时不会出错，输出结果为 "123456789"；而在访问 user.address.city 属性时，因为 address 属性不存在，所以程序会抛出异常。
现在，我们用可选链来重写上面的示例：
-- -------------------- ---- ------- ----- ---- - - ----- -------- ---- --- --------- - ------ ------------ ------ ----------------- - - ---------------------------------- -- ----------- -------------------------------- -- ---------展开代码
在使用可选链后，我们发现在访问 user.address?.city 属性时不会报错，程序会返回 undefined。
应用场景
可选链主要应用在对嵌套对象的访问中，它可以避免程序在访问不存在的属性时崩溃，提高代码的健壮性。同时，它也可以使代码更加简洁、清晰明了。下面是一个菜单导航的示例：
-- -------------------- ---- ------- ----- ---- - - ----- - ------ ------- ---- --- -- --------- - ------ ----------- ---- ------------ --------- - --------- - ------ ----------- ---- -------------------- -- --------- - ------ ----------- ---- --------------------- --------- - -------- - ------ ---------- ---- ---------------------------- -- ---- - ------ ------ ---- ------------------------ - - - - - - ---------------------------------------------------------------- -- ----- ------------------------------------------------------------------ -- -------- ---------- ------ ---- -------- ------- -- ---------展开代码
在访问嵌套的对象属性时，当属性不存在时，程序会抛出异常。接下来用可选链重新编写上述代码：
-- -------------------- ---- ------- ----- ---- - - ----- - ------ ------- ---- --- -- --------- - ------ ----------- ---- ------------ --------- - --------- - ------ ----------- ---- -------------------- -- --------- - ------ ----------- ---- --------------------- --------- - -------- - ------ ---------- ---- ---------------------------- -- ---- - ------ ------ ---- ------------------------ - - - - - - --------------------------------------------------------------------- -- ----- ----------------------------------------------------------------------- -- ---------展开代码
在使用可选链之后，我们发现在访问属性时不会因为属性不存在而报错，而是返回 undefined。
注意事项
在使用可选链时，需要注意以下几个事项：
- 可选链仅在触及
null或undefined时短路，可以在深层访问到任意值。 - 可选链只能在 JavaScript 的严格模式下使用。
- 可选链不能用于赋值运算符左侧。
总结
可选链是一项非常实用的特性，它能避免程序因为未处理嵌套对象属性不存在而崩溃，提高了代码的健壮性和清晰度。在日常开发中，我们应尽可能采用可选链的方式访问对象属性，避免使用不严谨的方式导致程序出错。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb65625ad90b6d0420592b
