JavaScript，检查嵌套对象属性为null/未定义的优雅方法

在JavaScript中，访问嵌套对象的属性时，我们可能会遇到一些问题。如果某个属性不存在或者为null/未定义，那么在对它进行操作时就会抛出TypeError异常。为了解决这个问题，我们需要一种优雅的方法来检查嵌套对象属性是否存在。

传统方法的缺陷

通常情况下，我们使用if语句来检查嵌套对象属性是否存在。例如：

if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
  // 如果所有属性都存在，执行此处的代码 
}

这种方法的缺点是它太过冗长和不够优雅。当我们需要检查多个属性时，代码会变得非常臃肿。此外，如果我们使用逻辑“或”（||）运算符来设置默认值，则该代码将更加复杂。

优雅的方法：可选链操作符

ES2020引入了一个新的特性-可选链操作符（Optional Chaining Operator）。使用可选链操作符，我们可以更加优雅地检查嵌套对象属性是否存在。

if (obj?.prop1?.prop2?.prop3) {
  // 如果所有属性都存在，执行此处的代码 
}

在这个例子中，如果obj、prop1、prop2或prop3中的任何一个属性不存在，则不会抛出TypeError异常。如果所有属性都存在，代码块将被执行。

另一个优点是它可以轻松地与逻辑“或”（||）运算符一起使用，以设置默认值：

const prop3Value = obj?.prop1?.prop2?.prop3 ?? 'default';

在此示例中，如果prop3不存在，则prop3Value将被设置为'default'。

适用性和注意事项

可选链操作符在访问嵌套对象时非常有用。但是，请注意这些操作符仅在支持ES2020的浏览器和Node.js版本中可用。对于旧版JavaScript环境，我们需要回退到传统的if语句检查方法。

另外，在使用可选链操作符时，有两个注意点：

• 我们不能在函数调用上使用可选链操作符。例如，obj?.func()是无效的。
• 可选链操作符只能在访问对象属性时使用，而不能用于数组元素的索引。例如，arr?.[0]是无效的。

结论

在这篇文章中，我们介绍了使用可选链操作符来检查嵌套对象属性是否存在的优雅方法。通过使用可选链操作符，我们可以使代码更加简洁和易读。同时，我们也需要注意它的适用性和注意事项。

示例代码如下：

const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

if (obj?.prop1?.prop2?.prop3) {
  console.log(obj.prop1.prop2.prop3);
}

const prop3Value = obj?.prop1?.prop2?.prop3 ?? 'default';
console.log(prop3Value);

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