ECMAScript 2020 的新特性：使用 optional chaining 简化对象的访问-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2020 的新特性：使用 optional chaining 简化对象的访问

前言

在最新的 ECMAScript 2020 规范中，推出了一项新的特性，即 optional chaining。这个新的特性可以在访问对象属性、方法时更加简便，避免了代码中频繁的判断和异常处理代码。本文将详细介绍 optional chaining 的使用方法以及其实现原理和注意事项。

optional chaining 的使用方法

在访问对象的属性和方法时，使用 ? 作为可选链。例如下面的代码段：

const person = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    district: 'Haidian'
  }
};

console.log(person?.address?.city);
console.log(person?.address?.street?.length);

在打印访问 person 对象的 address 属性中的 city 时，该对象存在，所以输出 'Beijing'。而访问 street 属性时，该属性不存在，不会生成异常，输出 undefined。

不使用 optional chaining 的代码段：

const person = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    district: 'Haidian'
  }
};

let city, street;
if (person && person.address) {
  city = person.address.city;
  
  if (person.address.street) {
    street = person.address.street.length;
  }
}

console.log(city);
console.log(street);

以上代码实现同样的功能，但使用了许多判断和异常处理代码，缺乏优雅性和简单性。

optional chaining 的实现原理

optional chaining 的实现原理是通过在访问对象属性和方法前添加 ? 操作符来简化代码实现。当访问到该属性或方法不存在时，返回 undefined，从而避免程序出现异常或错误。

下面是使用 babel 编译 optional chaining 语法生成的代码：

const person = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    district: 'Haidian'
  }
};

console.log(person === null || person === void 0 ? void 0 : (_person$address = person.address) === null || _person$address === void 0 ? void 0 : _person$address.city);
console.log(person === null || person === void 0 ? void 0 : (_person$address2 = person.address) === null || _person$address2 === void 0 ? void 0 : (_person$address2$street = _person$address2.street) === null || _person$address2$street === void 0 ? void 0 : _person$address2$street.length);

从上面的代码段可以看出，optional chaining 的底层实现依赖于两个操作符：nullish coalescing 运算符 ?? 和成员访问运算符 .。在表达式中，使用了逻辑 && 运算符来实现同时的多个属性存在性检查。

optional chaining 的注意事项

在使用 optional chaining 时需要注意以下几点：

optional chaining 操作符 ? 仅适用于 ES2020 或以上版本。
可选链操作符可以适用于任何类型，而不仅限于对象。
可选链中返回的任何未定义或未定义引用类型的值将被忽略，并且该操作符不会引发异常或更改值。
optional chaining 操作符 ? 不能应用于赋值运算符左侧的变量。

总结

optional chaining 是 ECMAScript 2020 中一个非常实用的语言功能，可以让访问对象属性和方法更加简便和优雅。在编写前端代码时，可以基于 optional chaining 来避免频繁的判断和异常处理代码，从而提升代码的可读性和可维护性。我们希望本文的介绍能够帮助大家更好的理解和使用 optional chaining。

代码示例：

const person = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    district: 'Haidian'
  }
};

console.log(person?.address?.city);
console.log(person?.address?.street?.length);

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

ECMAScript 2020 的新特性：使用 optional chaining 简化对象的访问

纠错反馈