避免空引用：安全导航运算符(?.)与逻辑与(&&)的使用场景及选型

在Angular组件中，存在一个可能为null或undefined的对象属性 arrThatCouldBeNullOrUndefined: SomeObjType，需要对其 data: DataType[] 属性执行 filter() 操作，并将结果赋值给另一个属性 filteredArr: DataType[]。

原代码存在TypeError风险（null/undefined引用错误）：

this.filteredArr = this.arrThatCouldBeNullOrUndefined.data.filter(item => this.someFilterCondition(item));

为避免报错，可采用以下两种方案：

方案1：使用安全导航运算符(?.) #

this.filteredArr = this.arrThatCouldBeNullOrUndefined?.data?.filter(item => this.someFilterCondition(item));

方案2：使用逻辑与运算符(&&) #

if(this.arrThatCouldBeNullOrUndefined && this.arrThatCouldBeNullOrUndefined.data) {
    this.filteredArr = this.arrThatCouldBeNullOrUndefined.data.filter(item => this.someFilterCondition(item))
}

疑问解答 #

1. 两种方案分别适用于什么场景？

• 方案1（安全导航运算符）：适用于希望简化代码，且允许filteredArr在源对象或data为null/undefined时被赋值为undefined的场景，比如模板绑定、无需额外分支逻辑的链式调用场景。
• 方案2（逻辑与+条件判断）：适用于需要明确控制分支逻辑的场景——比如当源对象或data无效时，要给filteredArr设置默认值（如空数组[]），或者在进入有效分支前执行日志打印、错误状态处理等额外操作。

2. 默认情况下应优先选择或避免哪种方案？
   默认优先选择方案1，因为它代码更简洁、可读性更高，契合现代TypeScript/Angular的语法习惯。但如果需要在无效状态下执行额外逻辑，或者必须确保filteredArr始终为数组类型（而非undefined），则优先采用方案2（可在else分支给filteredArr赋值[]）。

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