ECMAScript 2020 的可选链运算符详解及使用方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理对象属性或方法不存在的情况是一个常见的问题。在 ECMAScript 2020 中，新增了可选链运算符（Optional Chaining Operator），可以更加方便地处理这种情况。本文将详细介绍可选链运算符的使用方法，并提供示例代码。

可选链运算符的作用

可选链运算符的作用是在访问对象的属性或方法时，如果该属性或方法不存在，则返回 undefined，而不是抛出错误。这可以避免代码中出现大量的 try-catch 语句或者复杂的判断语句，让代码更加简洁和易读。

可选链运算符的语法

可选链运算符是一个问号（?）后跟着一个点号（.）或者方括号（[]），表示如果该属性或方法存在，则访问该属性或方法，否则返回 undefined。下面是可选链运算符的语法：

object?.property
object?.[property]

其中，object 表示要访问的对象，property 表示要访问的属性或方法。

可选链运算符的示例

下面是一个使用可选链运算符的示例代码：

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    street: 'Tiananmen Square'
  }
};

const city = user?.address?.city;
const country = user?.address?.country;
console.log(city);    // 'Beijing'
console.log(country); // undefined

在上面的示例中，我们使用了可选链运算符访问 user 对象的 address 属性的 city 和 country 属性。由于 user 对象的 address 属性存在，所以 city 变量的值为 'Beijing'，而 country 变量的值为 undefined。

可选链运算符的嵌套使用

可选链运算符可以嵌套使用，用来访问多层嵌套的属性或方法。下面是一个使用可选链运算符嵌套访问的示例代码：

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    street: 'Tiananmen Square',
    zipcode: {
      code: 100000,
      country: 'China'
    }
  }
};

const code = user?.address?.zipcode?.code;
const province = user?.address?.province?.name;
console.log(code);     // 100000
console.log(province); // undefined

在上面的示例中，我们使用了可选链运算符嵌套访问 user 对象的 address 属性的 zipcode 属性的 code 和 province 属性的 name。由于 user 对象的 address 属性和 zipcode 属性存在，所以 code 变量的值为 100000，而 province 变量的值为 undefined。

可选链运算符的注意事项

在使用可选链运算符时，需要注意以下几点：

可选链运算符只能用于访问对象的属性或方法，不能用于访问变量或函数。
可选链运算符只能用于 ES2020 或更高版本的 JavaScript 中。
可选链运算符的左侧必须是一个对象，不能是 null 或 undefined。

总结

本文介绍了 ECMAScript 2020 中的可选链运算符的作用、语法和使用方法，并提供了示例代码。可选链运算符可以更加方便地处理对象属性或方法不存在的情况，让代码更加简洁和易读。在使用可选链运算符时，需要注意语法和注意事项，以避免出现错误。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e5ff7eb4cecbf2d42b351