如何在嵌套对象数组中按Category或Subcategory值实现搜索？

给定如下嵌套结构的对象数组，需实现搜索功能：用户输入分类名称（如“水果”）或子分类的val值（如“苹果”），返回匹配的数组项。

输入数据示例 #

const data = [
  {
    "分类": "水果",
    "子分类": [
      {
        "id": 1,
        "val": "苹果"
      },
      {
        "id": 2,
        "val": "香蕉"
      }
    ]
  },
  {
    "分类": "蔬菜",
    "子分类": [
      {
        "id": 1,
        "val": "番茄"
      },
      {
        "id": 2,
        "val": "土豆"
      }
    ]
  }
]

搜索示例 #

• 搜索值为「水果」时，返回该分类的完整数据
• 搜索值为「苹果」时，返回对应分类且仅保留匹配的子分类项

对应输出分别为：

搜索「水果」的结果 #

const result = [{
  "分类": "水果",
  "子分类": [
    {"id": 1, "val": "苹果"},
    {"id": 2, "val": "香蕉"}
  ]
}]

搜索「苹果」的结果 #

const result = [{
  "分类": "水果",
  "子分类": [
    {"id": 1, "val": "苹果"}
  ]
}]

实现代码 #

function searchData(searchValue) {
  return data
    .map(item => {
      // 筛选当前分类下匹配的子分类
      const matchedSubCategories = item.子分类.filter(sub => sub.val.includes(searchValue));
      // 判断是否匹配分类名称，或存在匹配的子分类
      const isCategoryMatch = item.分类.includes(searchValue);
      if (isCategoryMatch || matchedSubCategories.length > 0) {
        return {
          ...item,
          // 匹配分类时保留所有子分类，否则仅保留匹配项
          子分类: isCategoryMatch ? [...item.子分类] : matchedSubCategories
        };
      }
      return null;
    })
    .filter(Boolean); // 过滤掉无匹配的项
}

说明 #

• 上述代码使用includes做模糊匹配，若需要严格完全匹配，将includes替换为===即可
• 支持大小写不敏感搜索的话，可以统一转成小写比较：item.分类.toLowerCase().includes(searchValue.toLowerCase())

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