JavaScript 对象的可选链式操作符详解

阅读时长 4 分钟读完

在日常的前端开发中,我们通常会操作 JavaScript 对象。而当我们需要访问对象嵌套深度比较大的属性时,代码可能会变得冗长而难以维护。针对这种情况,JavaScript 新增了可选链式操作符,使得操作对象变得更加方便和灵活。

什么是可选链式操作符?

可选链式操作符(Optional Chaining)是 ECMAScript 2020 中的新特性,它允许在访问对象属性时,如果该属性不存在,不会抛出异常,而是返回 undefined。这样就可以避免代码因为不存在的属性而崩溃。

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

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

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

在上面的代码中,我们使用了可选链式操作符 ?. 来访问 person 对象中嵌套的 address 对象的 city 属性。如果 address 不存在,返回值则为 undefined

可选链式操作符的基本语法

可选链式操作符的语法与常规的属性访问操作符一样,只需要在对象属性后添加一个问号 ? 即可。

我们还可以使用可选链式操作符访问嵌套对象的属性或方法:

使用示例

为了更好地了解可选链式操作符的使用,我们来看几个示例。

示例 1: 判断对象是否存在

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

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

在上面的代码中,我们首先使用了可选链式操作符 ?. 判断 person 对象是否存在 name 属性,如果存在则打印出该属性对应的值。

示例 2: 使用可选链式操作符调用函数

在上面的代码中,我们使用了可选链式操作符 ?. 判断 person 对象是否存在 sayHello 方法,并在存在的情况下进行调用。

示例 3: 访问嵌套对象的属性

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

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

在上面的代码中,我们使用了可选链式操作符 ?. 访问 person 对象嵌套的 address 对象的 city 属性。如果 address 不存在,返回值则为 undefined

可选链式操作符的局限性

虽然可选链式操作符提供了便利的访问对象属性的方式,但是需要注意的是,它并不能使用在所有场景中。

首先,可选链式操作符只能在访问对象属性或方法时使用,无法使用在访问数组元素或函数参数上。

其次,可选链式操作符只能在部分现代浏览器中支持,如果需要在过时的浏览器中使用,需要使用转译工具将代码转换为相应的 ES5 代码。

总结

可选链式操作符是 JavaScript 中一个非常有用的新特性。它可以简化操作对象嵌套属性的代码,减少代码错误和异常情况的出现。需要注意的是,在使用时需要了解其局限性,保证代码的兼容性和可维护性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/646a43d8968c7c53b09f4a65

纠错
反馈