在前端开发中,我们经常需要处理嵌套的对象或数组。在 JavaScript 中,访问这些嵌套的属性或元素可能会出现空值或 undefined 的情况,这时候就需要进行判断。ES12 中引入了 Optional Chaining 语法,可以方便地处理这种情况,本文将详细介绍这一语法的用法和注意事项。
Optional Chaining 的介绍
Optional Chaining 是一种新的语法,用于访问嵌套对象或数组中的属性或元素,当访问的属性或元素不存在时,不会抛出异常,而是返回 undefined。它通过使用问号 ?
来标记可选的属性或元素,简化了代码的书写。
Optional Chaining 的用法
Optional Chaining 可以用于访问对象或数组的属性或元素,下面是几个示例:
访问对象的属性
----- ---- - - ----- -------- -------- - ----- ----------- ------- -------- ------ -- -- -- ---- ----- ---- - ------------ - ----------------- - ---------- -- -------- -------- ----- ---- - -------------------
访问数组的元素
----- ------- - --- -- --- -- ---- ----- ----- - -------------- - - - ---------- - ---------- -- -------- -------- ----- ----- - -------------
访问函数的返回值
-------- ----------- - -- --- --- -- - ------ - ----- -------- ---- --- -- - ---- - ------ ---------- - - -- ---- ----- ---- - ---------- - --------------- - ---------- -- -------- -------- ----- ---- - -----------------
Optional Chaining 的注意事项
使用 Optional Chaining 语法时,需要注意以下几点:
1. 可选属性或元素必须在问号 ?
的左侧
----- ---- - - ----- -------- -------- - ----- ----------- ------- -------- ------ -- -- ----- ---- - ------------------- -- -- ----- ---- - ------------------- -- --------
2. Optional Chaining 只能用于访问属性或元素,不能用于调用函数
----- ---- - - ----- -------- ---------- - ------------------- ---------------- -- -- ------------------ -- --------
3. Optional Chaining 可以与 nullish 合并运算符 ??
一起使用
nullish 合并运算符 ??
用于判断一个值是否为 null 或 undefined,如果是,则返回默认值。与 Optional Chaining 一起使用可以进一步简化代码。
----- ---- - - ----- -------- ---- ----- -- -- ---- ----- --- - -------- --- ---- -- -------- --- --------- - -------- - --- -- -------- -------- - ------- ----- ----- --- - -------- -- ---
总结
Optional Chaining 语法是 ES12 中的一项新特性,可以方便地访问嵌套对象或数组的属性或元素,避免了空值或 undefined 的判断。使用时需要注意可选属性或元素必须在问号 ?
的左侧,不能用于调用函数,可以与 nullish 合并运算符 ??
一起使用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6584fda0d2f5e1655df9d2b9