在 Web 开发中,我们常常需要访问对象的属性或方法。然而,由于 JavaScript 的动态特性,对象属性和方法的存在是不确定的。在访问不存在的属性或方法时,会抛出一个错误,这可能会导致程序出现问题。为了避免这些问题,ES11 新特性可选链操作符诞生了。
可选链操作符概述
可选链操作符(Optional chaining operator)是一种用于简化对象属性和方法访问的语法。它允许在不确定属性或方法存在的情况下安全地访问它们。
可选链操作符是一个问号 ?
与一个点 .
的组合,形式为 ?.
。通过在访问属性或方法前添加可选链操作符,可以告诉解释器,如果对象存在该属性或方法,则访问它,否则返回 undefined。
下面是一个示例:
-- -------- ----- ------ - - ----- ------ ---- -- -- ----- ------- - ---------------------- -- --------- -------------- - --------- -- -------- ----- ------ - - ----- ------ ---- -- -- ----- ------ - ----------------------- -- -- ------------ -------------- - ---------
可以看出,当对象的属性或方法存在时,可选链操作符与点操作符的效果是一样的。但是当对象不存在属性或方法是,可选链操作符会返回 undefined,而不是抛出一个错误。
可选链操作符示例
以下是几个示例,展示可选链操作符在不同场景下的应用。
访问对象属性
-- -------- ----- ------ - - ----- ------ ---- -- -- ----- ------ - ---------------------- -- --------- -------------- - --------- -- -------- ----- ------ - - ----- ------ ---- -- -- ----- ------ - ----------------------- -- -- ------------ -------------- - ---------
调用对象方法
-- -------- ----- --- - - ------- -- -- -------------------- -- --------------- -- ----- ---------- - --------- -- -------- ----- --- - --- --------------- -- ---------- ---------- - ---------
访问数组元素
-- -------- ----- --- - --- -- --- ----- ------- - ------- -- -- ------------ ------ - --------- -- -------- ----- --- - --- -- --- ----- ------- - --------- -- -- ------------ ------ - ---------
访问属性链
-- -------- ----- ------ - - ----- ------ -------- - ----- ---- - -- ----- ---- - -------------------- -- ----- -------------- - --------- -- -------- ----- ------ - - ----- ----- -- ----- ---- - --------------------- -- -- ------------ -------------- - ---------
注意事项
在使用可选链操作符时,需要注意以下几点:
可选链操作符仅在目标对象或方法不存在时返回 undefined,如果目标对象或方法存在但返回 undefined,则仍会抛出错误。
可选链操作符仅在点操作符的情况下有效。因此,它不能用于数组下标或函数调用。
可选链操作符可以与其他 JavaScript 表达式结合使用。例如,
person?.address[0]?.city
是有效的。
总结
可选链操作符是一个很好的语法糖,可以帮助我们更安全地访问对象属性和方法。在大型应用程序中,它可以帮助我们避免许多错误和异常,提高代码健壮性。
虽然可选链操作符的语法很简单,但它的应用场景却不止于此。在实际开发中,我们需要根据具体情况灵活运用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/654aa9177d4982a6eb4c52ee