如何用 ES10 中的可选链运算符避免 undefined 错误

在前端开发中,经常会遇到 undefined 的错误,尤其是在处理 JSON 数据时。为了避免这种错误,ES10 中增加了可选链运算符(Optional Chaining Operator)。

可选链运算符的作用

可选链运算符可以在对象有值的情况下,访问对象的属性或方法,而不会因为对象的某个属性为 undefined 而报错。

在之前,我们需要对对象进行多次判断,才能避免这个错误:

-- ------- -- ----------- -- ------------------- -- --------------------------- -
  ----------------------------------------
-

但是在可选链运算符的帮助下,我们只需要这样写:

-------------------------------------------

这样就可以避免 undefined 的错误了。

如何使用可选链运算符

可选链运算符 ?. 可以用在任何属性或方法的后面,表示在对象有值的情况下才去访问这个属性或方法。在对象没有值的情况下,不会报错,而是返回 undefined。

下面是一个示例:

----- ------ - -
  ----- --------
  ----- -
    -------- -
      ------- ---- ---- -----
      ----- ----------
      ------ -----
      ---- -------
    -
  -
--

------------------------------------------- -- ---- ---- ----
----------------------------------------- -- ---------

在上面的示例中,我们使用了 ?. 来访问 person 对象中的 info 属性、address 属性和 street 属性。在 info 属性和 address 属性有值的情况下,我们才能访问 street 属性,否则返回 undefined。另外,当对象没有 phone 属性时,我们访问 phone 的 number 属性也会返回 undefined。

注意事项

值得注意的是,在使用可选链运算符时,我们不能在属性名前使用句点。这是因为在这种情况下,句点不再表示属性访问符,而是表示正常的句号。所以,我们需要将属性名放在方括号中:

----- ------ - -
  ------------- --------
  ----- -
    -------- -
      ------- ---- ---- -----
      ----- ----------
      ------ -----
      ---- -------
    -
  -
--

------------------------------------ -- -------

结论

使用 ES10 中的可选链运算符,可以更轻松地访问对象的属性和方法,避免 undefined 的错误。同时,它也使代码更加简洁、清晰,在处理较为复杂的 JSON 数据时,尤其有用。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67161154ad1e889fe21a8934