如何在filter方法中校验属性是否为null？对象列表搜索遇null报错求解

我懂你遇到的这个坑！当name属性为null的时候，直接调用includes肯定会触发报错——毕竟null可不是字符串，根本没有includes方法。你想加判断的思路完全正确，只是语法上没处理好，我给你两个实用的解决方案：

方案1：用ES6+的可选链+空值合并快速解决 #

这是最简洁的写法，利用可选链操作符?.判断r.name是否存在，再配合空值合并??给个默认的false，完美避免报错：

r.name?.includes(this.filters.searchBy) ?? false

原理很简单：如果r.name是null或undefined，r.name?.includes(...)会直接返回undefined，然后?? false把它转换成布尔值false，这样整个条件就不会触发错误，同时逻辑上也符合“name不存在就不匹配搜索关键词”的需求。

方案2：传统条件判断写法 #

如果你项目还不支持ES6+新语法，就用传统的条件判断，先确认r.name不是null再调用includes：

(r.name !== null && r.name.includes(this.filters.searchBy))

这里一定要加括号，因为&&的优先级比||低，不加括号会导致逻辑混乱哦。

修改后的完整代码 #

给你把方案1整合到你的代码里：

Object.keys(result).forEach(key => {
  if (this.filters.searchBy && this.filters.searchBy.length) {
    result[key] = result[key].filter(r => 
      this.filters.searchBy.includes(r.id) || (r.name?.includes(this.filters.searchBy) ?? false)
    );
  }
});

额外提个小细节：如果你的name属性还有可能是undefined，可以把判断改成r.name != null（双等号），这样能同时覆盖null和undefined两种情况，更稳妥。

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