JavaScript嵌套数组内对象数据最佳过滤方法 按Framework筛选适配搜索框

针对嵌套数组的匹配需求，完全可以在原有单层filter逻辑的基础上扩展，不需要引入额外复杂依赖，核心是在遍历每个用户对象时，同步判断内嵌projects数组的匹配情况。

核心实现逻辑 #

分两种常见的需求场景，可根据实际业务需要选择对应的实现：

• 项目级精准过滤：只返回和搜索关键词匹配的项目条目，自动剔除无关内容
• 用户级粗过滤：只要用户名下存在匹配的项目，就返回该用户的全量项目列表

项目级精准过滤实现 #

这种场景下，搜索结果不会夹带无关的项目内容，匹配精度更高：

const filterByKeyword = (rawData, searchKeyword) => {
  // 统一转小写处理，避免大小写差异导致匹配失效
  const keyword = searchKeyword.trim().toLowerCase();
  // 搜索词为空时直接返回全量原始数据
  if (!keyword) return rawData;

  return rawData.map(user => {
    // 判断当前用户名是否匹配关键词
    const isUserNameMatch = user.name.toLowerCase().includes(keyword);
    
    // 用户名匹配时直接保留用户全部项目；否则筛出符合关键词的项目
    const filteredProjects = isUserNameMatch 
      ? user.projects
      : user.projects.filter(project => {
          return (
            project.ProjectName.toLowerCase().includes(keyword) ||
            project.Framework.toLowerCase().includes(keyword)
          )
        })

    return {
      name: user.name,
      projects: filteredProjects
    }
  }).filter(matchedUser => {
    // 保留符合要求的用户：用户名本身匹配，或名下存在至少一个匹配的项目
    const hasMatchedProject = matchedUser.projects.length > 0;
    return matchedUser.name.toLowerCase().includes(keyword) || hasMatchedProject;
  })
}

实际调用效果

比如搜索框输入react，调用filterByKeyword(data, 'react')会得到如下结果：

[
  {
    name: 'John Doe',
    projects: [
      { ProjectName: 'something', Framework: 'React' },
      { ProjectName: 'something', Framework: 'React Native' }
    ]
  }
]

Jane Doe的所有项目都不包含react关键词，因此会被整体排除。

用户级粗过滤实现 #

如果不需要剔除不匹配的项目条目，只要用户名下存在和关键词匹配的内容，就返回该用户和他的全部项目列表，可以用更轻量的some方法实现：

const simpleFilterByKeyword = (rawData, searchKeyword) => {
  const keyword = searchKeyword.trim().toLowerCase();
  if (!keyword) return rawData;

  return rawData.filter(user => {
    return (
      // 用户名匹配
      user.name.toLowerCase().includes(keyword) ||
      // 任意项目的项目名/Framework匹配
      user.projects.some(project => 
        project.ProjectName.toLowerCase().includes(keyword) ||
        project.Framework.toLowerCase().includes(keyword)
      )
    )
  })
}

搜索框接入方式 #

把上述过滤函数和搜索框的输入事件绑定即可：

• 监听搜索框的onChange事件，实时获取输入框的当前值
• 把原始数据和输入值传入过滤函数，拿到返回结果渲染到页面上

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