JS实现多选筛选功能，动态数组循环用forEach失效怎么处理？

错误根因 #

现有代码的核心问题是误用了forEach方法：

• Array.prototype.forEach()没有返回值，执行后永远返回undefined，把它的返回值直接传入includes()做匹配，既不符合逻辑也会触发运行时报错
• 多选匹配的场景不需要手动实现for循环，JS数组内置的some()方法刚好可以满足「匹配任意一个筛选值就保留条目」的需求

修正后实现代码 #

// 提前统一转换筛选关键词为小写，避免循环中重复计算提升性能
const lowerFilterList = this.personTypeFilter?.map(item => item.toLowerCase()) ?? [];

const filteredResult = yourSourceArray.map(p => {
  // 无筛选条件时直接返回原数据
  if (lowerFilterList.length === 0) return p;
  return p.filter((i: any) => {
    const typeName = this.getPersonTypesBezeichnung(i.personentyp)?.toLowerCase();
    // 只要匹配筛选列表中任意一个值就保留当前条目
    return typeName ? lowerFilterList.some(key => typeName.includes(key)) : false;
  })
})

逻辑说明 #

• 提前对所有筛选值做小写转换，减少循环内的重复计算，同时避免大小写匹配问题
• some()方法会遍历筛选列表，只要有一个值命中就返回true，完美适配多复选框筛选的需求
• 增加了空值判断逻辑，避免getPersonTypesBezeichnung返回空值时的属性读取报错

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