前端开发中经常会涉及到访问对象的属性,但是在实际开发中,有些对象的属性可能不存在,这时候就需要进行判断。在过去,我们通常会通过 ?? 运算符或者使用条件判断语句来确保对象属性的存在。但在 ECMAScript 2020 中,JS 新增了一种可选链操作符(optional chaining),通过它我们可以方便地访问对象的属性,而无需手动去做属性的存在性检测。
可选链操作符的使用
可选链操作符 ?.
是一个非常方便的语法糖,我们可以通过它来进行类似“短路”的操作。当我们以 obj?.foo?.bar?.xxx
的方式访问某个对象 foo.bar.xxx
属性时,如果 obj
对象或者 foo
对象不存在则直接返回 undefined
,不再报错了。
示例代码如下:
----- --- - - ---- - ---- - ---- ------- ------ - - -- ----- ------- - ------------------- --------------------- -- ------ -----
在这个示例代码中,我们首先声明了一个 obj
对象,并进行了一系列属性的链式访问。当所有的对象和属性都存在时,message
变量的值为 'Hello, World'
。如果存在任何一个对象或者属性不存在,比如 obj.foo.xxx
,那么 message
的值就会是 undefined
。
此外,可选链操作符还可以结合函数的调用来实现更精细的操作。
----- --- - - ---- - ---- - ---- -- -- - ------------------- --------- - - - -- ----------------------- -- ------- ------- -------
在这个示例代码中,我们在 xxx
属性上定义了一个无参函数。如果所有的对象和属性都存在时,执行 obj?.foo?.bar?.xxx?.();
就会输出 'Hello, World!'
。如果 bar
对象不存在时,函数就不会被调用。
可选链操作符的高级用法
除了基本操作之外,可选链操作符还有一些高级的用法,能够让我们的代码更加简洁。
使用连续的判断
在过去,我们一般会使用连续的条件判断语句来检测对象的属性是否存在。例如:
-- ---- -- ------- -- ------------ - ------------------------- -
但是使用可选链操作符之后,我们可以用更加简洁的方式来达到相同的效果:
-- --------------- - ------------------------- -
短路表达式
当我们需要进行一些复杂的属性访问操作时,可选链操作符同样也很好用。
例如,当我们需要访问一个数组中的某个元素时,我们通常需要使用条件判断语句来防止数组溢出。如下所示:
--- --------------- -- ------ -- ------------ - - -- --------------- - -------------- - --------------- -
但是使用可选链操作符之后,我们就可以直接写出一行代码来实现这个操作:
----- -------------- - ------------------
空值合并运算符
在过去,判断一个对象属性是否存在的方法通常是使用三元运算符或者 ||
运算符。例如:
----- ----- - --- -- --------- - --------- - -----------
但是在 ECMAScript 2020 中,我们可以使用空值合并运算符(nullish coalescing operator)来更加优化这个操作,如下所示:
----- ----- - ---------- -- -----------
这里的 ??
运算符会仅在 obj.title
为 null
或者 undefined
时才返回 'Untitled'
。
结论
在本文中,我们介绍了 ECMAScript 2020 中的可选链操作符的使用。我们发现可选链操作符是一种非常简洁、方便、实用的语法糖,既可以减少大量的手动属性存在性检测的代码,同时也提高了代码的可读性和可维护性。当然,这项新特性在某些老的浏览器中可能不被支持,但我们可以通过使用 Babel 等工具来实现后向兼容。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6719c82d9b4aadf9e0052a72