JavaScript中使用filter结合includes遇null报错的解决方法

这个问题我之前也碰到过，确实挺闹心的——明明只想筛选包含指定子串的列表项，结果因为列表里混了null元素直接抛出错误。其实完全不用分两次过滤，咱们直接在同一个filter回调里把null的情况先排除掉就行！

方法一：短路运算符判断（兼容所有环境） #

直接在回调里先确认当前元素和user属性都不为null/undefined，再执行includes判断：

this.list = this.list.filter(i => i && i.user && i.user.includes(this.searchUser))

原理很简单：JavaScript的逻辑与&&是短路求值的——只要前面的条件不满足（比如i是null），后面的代码就不会执行，自然就不会触发“Cannot read property 'includes' of null”的错误啦。

方法二：可选链操作符（ES2020+环境适用） #

如果你的项目环境支持ES2020及以上的语法，用可选链会让代码更简洁：

this.list = this.list.filter(i => i?.user?.includes(this.searchUser))

i?.user的意思是：只有当i不是null/undefined时，才去访问它的user属性，否则直接返回undefined；同理?.includes会在前面的结果有效时才调用方法。而filter会自动过滤掉返回false或undefined的项，刚好符合咱们的需求。

这两种方法都是一次过滤完成，完全不用先单独处理null元素，直接解决你的问题~

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