如何优雅地使用 ES10 的 Optional Chaining 来防止未定义的属性

在前端开发中，经常会遇到需要访问对象的属性或方法的情况。但是，在实际开发中，我们可能会遇到对象属性未定义的情况，这时候如果直接访问该属性，就会出现错误。为了解决这个问题，ES10 提供了一种新的语法：Optional Chaining。

Optional Chaining 是什么？

Optional Chaining 是 ES10 新增的语法，它可以帮助我们避免访问未定义的属性或方法时出现错误。使用 Optional Chaining，我们可以在访问属性或方法时，判断对象是否存在该属性或方法，如果存在就返回属性或方法的值，否则返回 undefined。

Optional Chaining 的使用方法

Optional Chaining 的语法非常简单，只需要在对象的属性或方法后加上问号（?）即可。例如：

// www.javascriptcn.com code example
const person = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing',
    street: 'Main Street'
  }
};

console.log(person.address?.city); // 'Beijing'
console.log(person.address?.zipCode); // undefined

在上面的例子中，我们使用 Optional Chaining 来访问 person 对象的 address 属性中的 city 和 zipCode 属性。当 address 属性存在时，我们可以正常访问 city 属性，并返回其值。当 zipCode 属性不存在时，我们使用 Optional Chaining，访问 zipCode 属性时返回 undefined。

Optional Chaining 的深度使用

Optional Chaining 不仅可以用于访问对象的一级属性，还可以用于访问对象的多级属性。例如：

// www.javascriptcn.com code example
const person = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing',
    street: 'Main Street',
    location: {
      latitude: 39.9042,
      longitude: 116.4074
    }
  }
};

console.log(person.address?.location?.latitude); // 39.9042
console.log(person.address?.location?.longitude); // 116.4074
console.log(person.address?.location?.altitude); // undefined

在上面的例子中，我们使用 Optional Chaining 来访问 person 对象的 address 属性中的 location 属性中的 latitude、longitude 和 altitude 属性。当 latitude 和 longitude 属性存在时，我们可以正常访问它们，并返回其值。当 altitude 属性不存在时，我们使用 Optional Chaining，访问 altitude 属性时返回 undefined。

Optional Chaining 的指导意义

使用 Optional Chaining 可以帮助我们避免访问未定义的属性或方法时出现错误，提高代码的健壮性和可维护性。在实际开发中，我们可以在访问对象的属性或方法时，使用 Optional Chaining 进行判断，避免因为属性或方法未定义而导致程序出错。

示例代码

下面是一个使用 Optional Chaining 的示例代码：

// www.javascriptcn.com code example
const person = {
  name: 'Tom',
  age: 18,
  address: {
    city: 'Beijing',
    street: 'Main Street',
    location: {
      latitude: 39.9042,
      longitude: 116.4074
    }
  }
};

function getAddress(person) {
  return person?.address?.city + person?.address?.street;
}

console.log(getAddress(person)); // 'BeijingMain Street'

在上面的示例代码中，我们定义了一个 getAddress 函数，用于获取人的地址。使用 Optional Chaining，我们可以在访问 person 对象的 address 属性中的 city 和 street 属性时，避免因为属性未定义而导致程序出错。

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