ES6 filter多条件过滤数组 搜索与a11yType筛选无法联动生效

双条件无法联动的核心问题出在filter的判断逻辑上：

• 条件之间错误使用||（或）关联，还为a11yType匹配加上了searchFilter === ''的前置限制，导致两个筛选规则变成了互斥关系：搜索框有输入时直接跳过类型校验，只有搜索框为空时才会执行类型过滤，自然无法叠加生效。
• 额外存在一个用法问题：map是用于生成返回新数组的方法，在map回调里执行rows.push属于副作用误用，应该用forEach做遍历操作。

你当前写的过滤判断翻译成可执行的分支逻辑如下：

只要满足以下任意一条就保留条目：

1. 条目名称包含搜索关键词
2. 搜索框为空，且条目类型等于选中的a11yType
   当用户同时输入搜索词、选择a11yType时，第二条规则因为searchFilter === ''不成立永远返回false，只会走第一条搜索匹配，类型筛选完全不生效。

两个筛选条件是叠加生效的关系，需要用&&（与）关联，同时单独处理每个筛选值为空时默认放行的逻辑，还要修复原搜索匹配的大小写不一致问题（原代码只把搜索词转大写，没有转待匹配的条目名，会出现大小写匹配失败的bug）。

修复后的完整逻辑代码：

// 搜索字符串hook（取值自文本输入框）
const [searchFilter, setFilter] = useState('');
// 无障碍类型字符串值（取值自按钮选项）
const [a11yType, setA11yType] = useState('');

// 数据过滤与映射逻辑
if (data) {
  data
    .filter((item) => {
      // 搜索匹配规则：无搜索词默认放行，有搜索词时双方统一转大写做大小写不敏感匹配
      const isMatchSearch = searchFilter === '' 
        ? true 
        : item[0].toUpperCase().includes(searchFilter.toUpperCase());
      // 类型匹配规则：无选中类型默认放行，有选中类型时校验类型相等
      const isMatchType = a11yType === ''
        ? true
        : item[1].type === a11yType;
      // 两个条件同时满足才保留条目
      return isMatchSearch && isMatchType;
    })
    .forEach((item) => {
      // 存在type字段的条目才加入结果集
      if (item[1].type) {
        rows.push(
          createData(
            `${item[0]}`,
            `${item[1].type}`,
            `${[...new Set(item[1].urls)].length}`,
            `${item[1].urls}`,
          )
        );
      }
    });
}

这个逻辑同时覆盖三种场景：

• 无搜索词、无选中类型：返回全部数据
• 只有搜索词/只有选中类型：返回对应单条件匹配结果
• 同时有搜索词和选中类型：返回双条件叠加匹配的结果

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