如何正确使用 ECMAScript 2019 中的 Optional Chaining 语法-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2019 引入了一项新特性，称为 Optional Chaining。这个特性能够显著简化你在 JavaScript 中的代码编写过程，降低代码维护成本。本文将详细介绍这个特性以及如何正确使用它。

什么是 Optional Chaining

Optional Chaining 是一种 JavaScript 语法糖，它允许我们在访问一个对象的属性或方法时，不必去考虑这个对象是否为 null 或 undefined。如果这个对象不存在，那么 Optional Chaining 表达式的结果将为 undefined，而不是报错。

在以前的 JavaScript 版本中，如果你需要访问一个对象的属性或方法，你必须先判断这个对象是否为 null 或 undefined，否则你的代码会出现意想不到的错误。

例如：

let person = null;
let name = person.name;

这段代码会抛出一个错误，因为 person 是 null，它没有 name 属性。要避免这种情况，我们必须先判断 person 是否为 null 或 undefined，比如：

let person = null;
let name = person ? person.name : undefined;

Optional Chaining 可以让我们避开这类冗长的代码，直接访问对象的属性或方法，而不需要担心会出现错误。有了 Optional Chaining，我们可以这样写：

let person = null;
let name = person?.name;

如果 person 为 null 或 undefined，那么 name 的值将是 undefined，同时不会抛出任何错误。

在上面的例子中，我们使用了一种新的语法 ?.，它就是 Optional Chaining 表达式的符号。

Optional Chaining 最常用的场景之一是访问对象属性。在 JavaScript 中，对象的属性一般是通过 . 运算符来访问，例如：

let person = { name: 'Tom' };
let name = person.name;

在这个例子中，我们可以使用 Optional Chaining 来获取 person 对象的 name 属性：

let person = { name: 'Tom' };
let name = person?.name;

如果 person 为 null 或 undefined，那么 name 的值将是 undefined，否则 name 将是 person 的 name 属性值。

除了访问对象属性，Optional Chaining 也适用于访问对象方法。在 JavaScript 中，我们可以通过调用对象的方法来执行一些操作，例如：

let person = { name: 'Tom', sayHi: function() { console.log('Hi'); } };
person.sayHi();

我们可以使用 Optional Chaining 来调用 person 对象的 sayHi 方法：

let person = null;
person?.sayHi?.();

在这个例子中，我们使用了两个 Optional Chaining 语法 ?, 一个用于 person 对象，一个用于 sayHi 方法，如果 person 或 sayHi 不存在，都不会抛出任何错误，并直接返回 undefined。

Optional Chaining 也支持访问数组元素。在 JavaScript 中，数组元素可以通过下标来访问，例如：

let arr = [1, 2, 3];
let elem = arr[0];

我们可以使用 Optional Chaining 访问数组中的元素：

let arr = null;
let elem = arr?.[0];

在这个例子中，如果 arr 为 null 或 undefined，那么 elem 的值将是 undefined，否则 elem 将是 arr 中的第一个元素。

虽然 Optional Chaining 已经可以显著降低代码维护成本，并且在某些场景下可以帮助我们更好地组织代码，但是在使用 Optional Chaining 时也需要注意某些细节，以避免代码出现意外行为。

只在必要时的属性或方法上使用 Optional Chaining。Optional Chaining 的目的是帮助我们避免代码出错，它并不是一个万灵药。在一些明确存在的属性或方法上使用 Optional Chaining 可能会让你的代码变得混乱和难以理解。
在链式调用中使用 Optional Chaining 时需要格外小心。有时候我们会在链式调用中使用 Optional Chaining，例如：
```
let user = { address: { city: 'Shanghai' } };
let city = user?.address?.city?.toLowerCase();
```
在这个例子中，我们未必需要在 city 属性上使用 Optional Chaining，因为我们已经确保了 user 和 address 属性的存在性。在链式调用中需要格外小心，确保你在正确的位置使用 Optional Chaining。
避免在空数据结构上使用 Optional Chaining。使用 Optional Chaining 前先确保你的数据结构不是空的，否则你的代码将不能正常执行。例如：
```
let user = null;
let city = user?.address?.city;
```
在这个例子中，user 是 null，访问 address 属性就会抛出错误。在使用 Optional Chaining 前，请先确保你的数据结构有效。

下面是一些使用 Optional Chaining 的示例代码。

let person = { name: 'Tom', age: 18 };
let name = person?.name;
let email = person?.email;

在本例中，我们可以访问 person 对象的 name 和 email 属性，如果这两个属性中的任何一个不存在，结果将为 undefined。

class Person {
  sayHi() {
    console.log('Hi');
  }
}

let person = null;
person?.sayHi?.();

在本例中，我们使用 Optional Chaining 调用 person 对象的 sayHi 方法，如果 person 为 null 或 undefined，或者 sayHi 不存在，都不会抛出任何错误。

let arr = [1, 2, 3];
let elem = arr?.[0];

在本例中，如果 arr 为 null 或 undefined，那么 elem 的值将是 undefined，否则 elem 将是 arr 中的第一个元素。

Optional Chaining 是一项非常有用的语言特性，它可以帮助我们显著降低代码维护成本，并且良好的规范代码组织能够让你的代码更加易于理解和维护。理解 Optional Chaining 的最佳实践，并在实际项目中正确运用，可以让你的代码更加健壮和高效。

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