ES11 新特性 Optional Chaining 在 Vue2 项目中的使用-JavaScript中文网-JavaScript教程资源分享门户

ES11 新增了 Optional Chaining 运算符（?.），这是一个非常实用的特性，可以避免在访问嵌套属性时出现 undefined 或 null 的错误。在 Vue2 项目中，我们可以使用 Optional Chaining 来优化代码，提高开发效率。

Optional Chaining 的介绍

Optional Chaining 运算符可以用来简化嵌套属性的访问。在之前的写法中，我们需要判断每个嵌套属性是否存在，如下所示：

if (object && object.property && object.property.nestedProperty) {
  // do something
}

而使用 Optional Chaining 运算符，则可以更加简洁地实现同样的功能：

if (object?.property?.nestedProperty) {
  // do something
}

这里的问号表示，如果前一个属性不存在或为 null，则它后面的属性也不会被访问。如果前一个属性存在，则继续访问后面的属性。使用 Optional Chaining 运算符可以避免繁琐的判断，让代码更加简洁。

在 Vue2 项目中，我们经常需要访问嵌套的属性，比如：

<div v-if="user && user.profile && user.profile.name">{{ user.profile.name }}</div>

在这个示例中，我们需要判断 user 和 user.profile 是否存在，以及 profile.name 是否存在。可以使用 Optional Chaining 运算符来简化这段代码：

<div v-if="user?.profile?.name">{{ user.profile.name }}</div>

这里的问号表示，如果 user 或者 profile 不存在，则不会访问后面的属性，也不会报错。当 user.profile.name 存在时，则可以在模板中使用。

除了访问属性外，我们还可以使用 Optional Chaining 运算符来调用方法。比如：

const result = object?.method?.(param);

如果 object 或 method 不存在，则 result 为 undefined，否则将调用 method，并将 param 作为参数传入。

下面给出一个使用 Optional Chaining 运算符的示例代码，在 Vue2 项目中访问嵌套属性：

export default {
  computed: {
    fullName() {
      return `${this.user?.firstName ?? ''} ${this.user?.lastName ?? ''}`;
    }
  }
}

在这个示例中，我们使用 Optional Chaining 运算符来访问 user.firstName 和 user.lastName，如果它们不存在，则将返回空字符串。这里使用了双问号运算符（??）来设置默认值，如果某个属性不存在，则将其替换为空字符串。

Optional Chaining 运算符是一个非常实用的特性，在 Vue2 项目中可以用来优化代码，避免出现 undefined 或 null 的错误。在编写 Vue2 项目时，我们可以善用 Optional Chaining 运算符，让代码更加简洁清晰。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6715e507ad1e889fe219559e