js 可选链|极客笔记

js 可选链

可选链（Optional Chaining）是一个非常实用的语法提案，在处理可能为空或未定义的变量时非常有用。在 JavaScript 中，我们经常会遇到需要判断一个对象中的某个属性是否存在，然后再进行处理的情况。可选链就是为了解决这类问题而生的。

什么是可选链？

在 JavaScript 中，如果我们想要获取一个对象中的某个属性，通常会这样写：

const person = {
  name: 'Alice',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York'
  }
};

const city = person.address.city;
console.log(city); // 输出：New York

但是如果对象结构发生了变化，例如 person 对象中的 address 属性变成了 null 或 undefined，我们再尝试获取 city 属性时就会出现错误：

const person = {
  name: 'Alice',
  age: 30,
  address: null
};

const city = person.address.city; // TypeError: Cannot read property 'city' of null

为了避免这种错误，我们通常需要在访问属性前进行一些判断：

const city = person.address ? person.address.city : undefined;
console.log(city); // 输出：undefined

这种判断代码虽然能够避免出错，但是有时候会显得冗长且不够简洁。这时候就可以使用可选链语法来简化代码。

可选链语法

可选链（Optional Chaining）提供了一种优雅地处理上述情况的语法。在访问属性或者方法的时候，可以使用 ?. 来代替 .：

const city = person.address?.city;
console.log(city); // 输出：undefined

上面的代码中，如果 person.address 存在且不为 null 或 undefined，则 city 的值为实际的属性值，否则 city 的值为 undefined。这样就避免了出现错误。

使用可选链调用方法

除了访问属性外，可选链还可以用于调用对象方法。例如，我们有一个对象 user，其中的 info 属性是一个可能为空的对象，该对象有一个 getFullName 方法用于返回用户的全名：

const user = {
  name: 'Bob',
  info: {
    getFullName: function() {
      return this.name;
    }
  }
};

我们可以使用可选链来调用 getFullName 方法：

const fullName = user.info?.getFullName?.();
console.log(fullName); // 输出：Bob

上面的代码中，如果 info 或 getFullName 不存在，则返回值为 undefined。

可选链的链式调用

可选链可以进行多层的链式调用，下面是一个示例：

const data = {
  user: {
    name: 'Alice',
    address: {
      street: '123 Main St',
      city: 'New York'
    }
  }
};

const city = data.user?.address?.city;
console.log(city); // 输出：New York

在上面的示例中，通过可选链我们可以将多个属性的访问简化为一行代码，而不用担心中间任何一个属性不存在而导致报错。