如何单行检查嵌套对象属性，避免触发TypeError？

我需要在用户首次访问页面时显示welcome-modal。以下代码可正常运行：

if(this.app_data) {
  if(this.app_data['company']){
    if(this.app_data['company']['welcomed'] === false){
      this.openWelcomeModal();
    }
  }
}

但这种逐层检查嵌套变量结构的代码过于繁琐。我尝试用单行代码实现：

if(this.app_data['company']['welcomed'] === false){
  this.openWelcomeModal();
}

却触发了错误：

core.js:7376 ERROR TypeError: Cannot read properties of undefined (reading 'welcomed')
at SafeSubscriber._next (game.page.ts:46:39)

请问是否存在无需逐层检查嵌套对象，即可实现单行判断的方法？

当然有，以下几种方法可以实现简洁的单行判断，避免逐层嵌套检查：

1. ES2020可选链操作符（?.） #

这是现代JavaScript中最简洁的解决方案，可选链操作符会在访问到undefined或null时立即终止表达式，不会抛出类型错误：

if (this.app_data?.company?.welcomed === false) {
  this.openWelcomeModal();
}

如果welcomed字段可能未定义（而非明确为false），你可以结合空值合并操作符??设置默认值，确保判断逻辑准确：

if ((this.app_data?.company?.welcomed ?? true) === false) {
  this.openWelcomeModal();
}

2. 逻辑与短路求值 #

利用逻辑与&&的短路特性，只有前面的所有表达式都为真时，才会继续执行后面的属性访问，兼容性更好（无需ES2020环境支持）：

if (this.app_data && this.app_data.company && this.app_data.company.welcomed === false) {
  this.openWelcomeModal();
}

3. 解构赋值+默认值 #

通过解构赋值给嵌套属性设置默认值，再进行判断，适合需要复用该属性值的场景：

const { company: { welcomed = true } = {} } = this.app_data || {};
if (welcomed === false) {
  this.openWelcomeModal();
}

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