在 ES11 中,增加了可选链操作符(Optional Chaining Operator),这个操作符的作用是可以在访问对象属性时,避免非空校验繁琐的操作,同时也能避免访问到不存在的属性时,程序崩溃的情况。
下面我们来详细了解如何在 JavaScript 中使用可选链操作符。
基本语法
可选链操作符使用问号(?)来代表可选属性,如果属性存在,则返回属性值,如果属性不存在,则返回 undefined。下面是可选链操作符的基本语法:
--------- -- -- --- ----- ---- ----------- -- -- --- ------- ---- ------------ -- -- --- ----- ----- ------------ -- -- ---- --
可选链操作符的场景
访问嵌套属性时避免空指针异常
在访问对象的嵌套属性时,如果嵌套的属性不存在,则会抛出空指针异常。使用可选链操作符可以避免这种情况的发生。
----- ------ - - ----- ----- ------ - ----- ------ -- -- ------------------------------- -- ----- ---------------------------------- -- --------- --------------------------------------- -- ---------
调用函数时参数可选
当传递函数参数时,如果某个参数是可选的,则使用可选链操作符可以避免参数不存在时导致程序崩溃。
-------- --------- -------- - ----------------- --------- - ------------ - ------ ---- --- ------------- ----------- ---------------- -- ------------ --------- --- --
链式调用时避免空指针异常
在链式调用方法时,前面的方法返回的结果可能为 undefined,如果不加任何的非空校验,可能导致程序崩溃。使用可选链操作符可以避免这种情况的发生。
----- ---- - - ----- ----- ------ - ----- ----- ----- ------ -- -- ----------------------------- -- ---- ---------------------------------- -- --------- -------------------------------------------- -- ---------
可选链操作符的注意事项
使用可选链操作符时,需要注意以下几点:
- 必须使用 ES11 及以上版本的 JavaScript 引擎才能支持。
- 可选链操作符后面不能跟括号。
- 可选链操作符不能在赋值操作符左侧使用。
- 可选链操作符与其他操作符的优先级不同,需要加上括号。
示例代码
示例 1:使用可选链操作符访问对象属性
----- ---- - - ----- ----- ---- --- ------ - ----- ----- ----- ------ -- -- ----------------------------- -- ---- ---------------------------------- -- ---------
示例 2:使用可选链操作符调用函数
-------- ------------- - --------------------------- - ------ ------ ---- --- ------- --------------------- -- ------------ --------- ---- --
示例 3:使用可选链操作符访问多层嵌套属性
----- ---- - - ----- ----- -------- - ----- ------- ------ - ----- -------- ------- - ----- ------- -------- - ----- ------ ------- -- -- -- -- -- -- ------------------------------------------------------ -- - --------------------------------------------------- -- ------------------------------------ - --------- ---------------------------------------------------- -- ---------
总结
通过本文的介绍,我们对可选链操作符有了深入的了解,它的作用是避免程序在访问不存在的属性时报错,使用起来非常方便。但需要注意,必须使用 ES11 及以上版本的 JavaScript 引擎才能支持。在编写 JavaScript 代码时,我们可以灵活运用可选链操作符,提高代码的健壮性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65b7f601add4f0e0ff084572