在父子结构的对象数组中按name字段搜索目标元素

需求说明 #

需要在具备父子层级结构的对象数组里，筛选出所有name字段包含指定搜索文本的元素，无论元素处于哪一层级。

示例数据结构：

[
  {
    "id": "1",
    "name": "Apple",
    "value": "1",
    "children": [
      {
        "id": "4",
        "name": "iPhone",
        "value": "4"
      }
    ]
  },
  {
    "id": "2",
    "name": "Samsung",
    "value": "2",
    "children": [
      {
        "id": "5",
        "name": "Android",
        "value": "5"
      }
    ]
  },
  {
    "id": "3",
    "name": "AppleX",
    "value": "3"
  }
]

比如搜索文本为"Apple"时，需筛选出name包含该文本的元素：id为1的Apple对象和id为3的AppleX对象。

解决方案：递归遍历筛选 #

通过递归函数遍历整个嵌套数组，检查每个对象的name字段是否匹配，同时处理子元素：

function searchItems(items, searchText) {
  let result = [];
  items.forEach(item => {
    // 检查当前元素name是否包含搜索文本
    if (item.name.includes(searchText)) {
      // 若需保留原对象的children结构，可直接push(item)；此处仅保留匹配元素本身
      result.push({...item, children: []});
    }
    // 递归处理子元素
    if (item.children && Array.isArray(item.children)) {
      const childMatches = searchItems(item.children, searchText);
      result = result.concat(childMatches);
    }
  });
  return result;
}

// 使用示例
const data = [/* 上述示例数据 */];
const searchResult = searchItems(data, "Apple");
console.log(searchResult);

代码说明 #

• 遍历每个元素，先判断当前元素的name是否符合条件，符合则加入结果数组
• 若元素存在children数组，递归处理子元素并合并匹配结果
• 可根据需求调整返回结构：如需保留匹配元素的完整层级（包括未匹配子元素），直接push(item)即可

扩展：忽略大小写搜索 #

如果需要不区分大小写的模糊匹配，修改判断条件：

if (item.name.toLowerCase().includes(searchText.toLowerCase()))

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