如何安全检测JavaScript对象中嵌套属性arr.targeting.key1的存在？

假设我们有如下对象：

const arr = {
  "targeting": {
     "key1": "1",
     "key2": "2"
  },
  "session": "1234"
}

想要检测arr.targeting.key1是否存在时，若直接写if (true === !!arr.targeting.key1)，在arr或arr.targeting未定义/为空时，会抛出错误：

cannot read properties of undefined, reading 'key1'

下面是几种能在层级不存在时返回false的简洁方法：

• 可选链操作符（推荐，ES2020+支持）
  这是最简洁的写法，?.会自动处理链上的undefined/null，不会抛出错误：

  // 检测属性值是否为真（若属性值可能是假值如''、0，不推荐用这个）
  if (!!arr?.targeting?.key1) {
    // 属性存在且值为真时执行逻辑
  }
  
  // 严格检测属性是否存在（不管值是什么）
  if (arr?.targeting?.hasOwnProperty('key1')) {
    // 属性确实存在时执行逻辑
  }
  

• 短路求值（兼容旧环境）
  通过依次判断每个层级的存在性，利用逻辑与的短路特性避免报错：

  // 检测属性值是否为真
  if (arr && arr.targeting && arr.targeting.key1) {
    // 执行逻辑
  }
  
  // 严格检测属性是否存在
  if (arr && arr.targeting && Object.prototype.hasOwnProperty.call(arr.targeting, 'key1')) {
    // 执行逻辑
  }
  

内容的提问来源于stack exchange，提问作者pg.