嵌套对象搜索实现：匹配name与可搜索tileName的问题

现有如下JavaScript嵌套对象：

const obj = {
   "cat1" : { 
                id: "1", 
                name: "Category1", 
                tiles: [{ tileName: "abc", searchable: true}, { tileName: "def", searchable: true}]
             },
   "cat2" : { 
                id: "2", 
                name: "Category2", 
                tiles: [{ tileName: "ab", searchable: true}, { tileName: "lmn", searchable: true}]
             },
   "cat3" : { 
                id: "3", 
                name: "Category3", 
                tiles: [{ tileName: "pqr", searchable: true}, { tileName: "", searchable: false}]
             }
}

需要实现一个搜索功能：

• 根据输入的搜索关键词，在每个分类对象的name字段，以及tiles数组中searchable为true的元素的tileName字段中进行匹配（忽略大小写）。
• 最终输出需要保留所有匹配的分类对象，并且每个分类仅保留其中匹配的tiles元素。

举个例子：当搜索输入为"ab"时，期望输出：

const result = {
   "cat1" : { 
                id: "1", 
                name: "Category1", 
                tiles: [{ tileName: "abc", searchable: true}]
             },
   "cat2" : { 
                id: "2", 
                name: "Category2", 
                tiles: [{ tileName: "ab", searchable: true}]
             }
}

我尝试了以下代码，但无法实现需求：

function handleSearch(search)
{
  return Object.values(obj).map((item) => {
    if(item["name"].toLowerCase().includes(item.toLowerCase()))
      return item;
    })
   })
}

以下是正确的实现代码：

function handleSearch(search) {
  // 统一转小写，避免大小写敏感问题
  const lowerSearch = search.toLowerCase();

  // 遍历原始对象的键值对，构建结果对象
  return Object.entries(obj).reduce((acc, [key, category]) => {
    // 筛选当前分类中符合条件的tiles：searchable为true且tileName包含搜索词
    const matchedTiles = category.tiles.filter(tile => {
      return tile.searchable && tile.tileName.toLowerCase().includes(lowerSearch);
    });

    // 判断当前分类是否匹配：name包含搜索词，或者有匹配的tiles
    const isCategoryMatched = category.name.toLowerCase().includes(lowerSearch) || matchedTiles.length > 0;

    if (isCategoryMatched) {
      // 复制原分类对象，替换tiles为匹配的结果，避免修改原对象
      acc[key] = {
        ...category,
        tiles: matchedTiles
      };
    }

    return acc;
  }, {});
}

代码说明 #

1. 大小写统一处理：将搜索关键词转为小写，确保匹配时忽略大小写差异。
2. 遍历与筛选：
   • 使用Object.entries遍历原始对象的每个分类（保留原键名，比如"cat1"）。
   • 对每个分类的tiles数组进行筛选，只保留searchable为true且tileName包含搜索词的元素。
3. 分类匹配判断：如果分类的name包含搜索词，或者筛选后有匹配的tiles，就保留该分类。
4. 构建结果对象：通过reduce方法逐步构建最终的结果对象，复制原分类的属性并替换tiles为筛选后的数组，避免修改原始对象。

测试示例 #

调用handleSearch("ab")会返回你期望的结果；如果搜索"Category"，则会返回所有三个分类（因为所有分类的name都包含"Category"），且每个分类的tiles保留全部searchable为true的元素。

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