ECMAScript 2021 中的可选链：解决 JavaScript 的冗长问题
在 JavaScript 中，我们经常需要访问对象的属性或方法，但是当对象的某个属性或方法不存在时，就会出现错误，这就需要我们进行一些冗长的判断来避免这种错误。但是在 ECMAScript 2021 中，新增了可选链（Optional Chaining）这一特性，可以很好地解决这个问题。
什么是可选链？
可选链是一种新的语法，用来简化访问对象属性或方法时的冗长判断。它使用问号（?）来表示属性或方法是否存在，如果存在则返回该属性或方法的值，否则返回 undefined。
示例代码：
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- -------- - ----- ---------- --------- --------- - -- -- ---- ----- -------- - --- -- ----------- -- --------------------- -- ----- ----- -------- - -----------------------展开代码
在上面的代码中，我们创建了一个对象 obj，其中包含了一个嵌套的 address 对象。我们需要获取 address 对象中的 district 属性，如果使用传统的写法，需要进行冗长的判断，而使用可选链则可以非常简洁地实现。
可选链的使用
可选链的使用非常简单，只需要在需要判断的属性或方法之前加上问号（?）即可。下面是一些示例代码：
- 访问对象的属性
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- -------- - ----- ---------- --------- --------- - -- -- ---- ----- -------- - --- -- ----------- -- --------------------- -- ----- ----- -------- - -----------------------展开代码
- 调用对象的方法
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- ---------- - ------------------- -- ---- -- --------------- - -- -- ---- -- ---- -- ------------- - --------------- - -- ----- ------------------展开代码
- 访问数组的元素
const arr = [1, 2, 3]; // 传统写法 const firstElement = arr && arr[0]; // 可选链写法 const firstElement = arr?.[0];
需要注意的是，可选链只能在 JavaScript 引擎支持的环境中使用，如果需要在旧版本的浏览器中使用，需要进行一些兼容性处理。
可选链的嵌套使用
在实际的开发中，我们经常需要对对象进行深层次的访问，这时候可选链的嵌套使用就非常方便了。下面是一些示例代码：
-- -------------------- ---- ------- ----- --- - - ----- ------ ---- --- -------- - ----- ---------- --------- ---------- ------- - ----- -------- ------ ------- --- - - -- -- ---- ----- ---------- - --- -- ----------- -- ------------------ -- ------------------------ -- ----- ----- ---------- - ---------------------------展开代码
在上面的代码中，我们需要获取 obj 对象中的 address 对象中的 street 对象中的 name 属性，如果使用传统的写法，需要进行四次冗长的判断，而使用可选链则可以非常简洁地实现。
结语
可选链是 ECMAScript 2021 中的一个重要特性，可以大大简化访问对象属性或方法时的冗长判断。在实际的开发中，我们经常需要对对象进行深层次的访问，这时候可选链的嵌套使用就非常方便了。需要注意的是，可选链只能在 JavaScript 引擎支持的环境中使用，如果需要在旧版本的浏览器中使用，需要进行一些兼容性处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2e1a3a941bf7134597ad6
