前言
在前端开发中,经常需要从一个庞杂的对象或数组中获取某些属性或元素,然而这些属性或元素并不总是存在的,而且在不同场合下可能会存在不同的嵌套深度,这就需要我们在取值的时候做出相应的判断,一般来说会采用 if...else 语句来处理。
ES11 中新增的可选链操作符(Optional Chaining Operator),可以让我们用一种更简单、更优雅的方式来访问对象嵌套中的属性或方法,并且可以避免出现意外的错误,本文将详细介绍如何使用。
可选链操作符的简介
可选链操作符是 ES11 中新增的一项语法特性,它由问号(?)和点号(.)组成,其作用是当对象某个属性或方法不存在时,不再像以往那样报错,而是返回 undefined。
下面是一些示例:
----- --- - - -- - -- - -- - - - - ---------------------- -- - ---------------------- -- ---------- ------ ---- -------- --- -- --------- ------------------------ -- - ------------------------ -- ---------
可以看到,当使用可选链操作符时,如果要取值的属性或方法不存在时,不会报错而是返回 undefined。
如何使用可选链操作符
这里将介绍如何使用可选链操作符来代替传统的 if...else 语句。
1. 基本用法
假设有这样一个对象:
----- ---- - - ----- ----- ---- --- -------- ------ ----- ------- -------- - --------- ----- ----- ----- --------- ----- - -
如果要获取用户的地址区县信息,我们可以用如下的 if...else 语句来处理:
--- -------- - -- -- ------------- -- ---------------------- - -------- - --------------------- - --------------------- -- -----
这里需要判断 user.address 和 user.address.district 是否存在,如果存在则将 user.address.district 赋值给变量 district。
而如果使用可选链操作符,可以写成这样:
----- -------- - ---------------------- --------------------- -- -----
这样代码看起来更简洁明了。
2. 链式用法
假设有这样一个对象:
----- ---- - - ------ - - ----- ----- ------ - -- - ----- ----- ------ - -- - ----- ----- ------ -- - - -
现在要获取第一个商品的名称和价格,首先我们需要获取 data.items[0],然后再从中取出名称和价格,传统的写法如下:
--- ---- - -- --- ----- - - -- ----------- -- -------------- - ---- - ------------------ ----- - ------------------- - ----------------- ------ -- ---- -
而使用可选链操作符,则可以这样写:
----- ---- - ---------------------- ----- ----- - ----------------------- ----------------- ------ -- ---- -
这样代码看起来更简洁,并且可以避免意外的错误。
总结
使用可选链操作符可以让代码更加简洁明了,并且有助于避免因为属性或方法不存在而导致的错误。但是在使用时也需要注意一些细节,如空数组的判断和安全导航的使用等。通过本文的介绍,相信大家已经了解了可选链操作符的基本用法和链式用法,并能够在代码中灵活运用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6491ece148841e9894fdfa65