JavaScript 可选链调用，深度访问数据更可靠

2024-01-23 14:16:24

JavaScript 可选链调用是什么？

JavaScript 可选链调用（?.）操作符允许您在不检查对象链的完整性的情况下访问对象属性。这意味着您可以访问嵌套对象属性，而不必担心对象链的任何部分可能为 undefined 或 null。

可选链调用如何工作？

可选链调用使用与点运算符（.）相同的语法，但在运算符前加上问号（?）。例如，以下代码使用点运算符访问对象的属性：

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Springfield',
    state: 'CA',
    zip: '12345'
  }
};

console.log(person.address.street); // 123 Main Street

如果 address 属性为 undefined 或 null，则此代码将引发错误。为了避免此错误，您可以使用可选链调用：

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Springfield',
    state: 'CA',
    zip: '12345'
  }
};

console.log(person?.address?.street); // 123 Main Street

if (person?.address?.city === 'Springfield') {
  console.log('John lives in Springfield.');
}

如果 address 属性为 undefined 或 null，则 person?.address?.street 将为 undefined。同样，如果 city 属性为 undefined 或 null，则 person?.address?.city === 'Springfield' 将为 false。这将防止代码引发错误，并允许您优雅地处理缺失的属性。