如何在嵌套对象数组中高效搜索匹配字符串的元素

本文介绍如何在多层嵌套结构（对象数组 → value 属性为对象数组）中，根据子对象的 `name` 字段模糊匹配指定字符串（如 `'ab'`），并精准返回符合条件的顶层对象及其精简后的 `value` 子数组。

在实际开发中，我们常遇到类似如下结构的数据：一个顶层数组，每个元素是一个包含 key 和 value 属性的对象，而 value 又是一个对象数组（每个子对象含 Id 和 Name 字段）。当需要按 Name 模糊搜索（例如查找包含 'AB' 的项）时，目标不是简单地扁平化所有数据，而是保留原始层级关系——仅筛选出至少有一个 Name 匹配的顶层对象，并将其 value 数组压缩为仅含匹配项的子集。

实现这一需求的核心思路是：

• 使用 Array.prototype.reduce() 遍历顶层数组，累积构建结果；
• 对每个元素的 value 数组，用 filter() + String.prototype.includes() 筛选 Name 包含目标字符串的子对象；
• 仅当筛选后 found.length > 0 时，才将当前顶层对象（{...item, value: found}）推入结果数组。

以下是完整可运行示例：

const data = [
  { "key": "001", "value": [{ "Id": "2345", "Name": "Test" }] },
  { "key": "112", "value": [{ "Id": "1234", "Name": "UHV" }, { "Id": "3424", "Name": "ABC" }] },
  { "key": "222", "value": [{ "Id": "2312", "Name": "ABD" }, { "Id": "1321", "Name": "RFV" }, { "Id": "4567", "Name": "ERF" }] }
];

const searchTerm = 'AB';
const result = data.reduce((acc, { value, ...rest }) => {
  const matchedItems = value.filter(item => item.Name.includes(searchTerm));
  if (matchedItems.length > 0) {
    acc.push({ ...rest, value: matchedItems });
  }
  return acc;
}, []);

console.log(result);
// 输出：
// 
[
//   { "key": "112", "value": [{ "Id": "3424", "Name": "ABC" }] },
//   { "key": "222", "value": [{ "Id": "2312", "Name": "ABD" }] }
// ]

✅ 关键优势说明：

• 保持原始数据结构完整性，不破坏 key 与筛选后 value 的映射关系；
• 支持大小写敏感搜索（如需忽略大小写，可改用 item.Name.toLowerCase().includes(searchTerm.toLowerCase())）；
• 时间复杂度为 O(n×m)，其中 n 是顶层数组长度，m 是各 value 数组平均长度，适用于中等规模数据；
• 无副作用，纯函数式风格，便于测试与复用。

⚠️ 注意事项：

• 若需精确匹配（而非包含），请将 includes() 替换为 === 或正则 new RegExp(^${searchTerm}$)；
• 若 value 可能为 null 或 undefined，建议在 filter 前增加空值校验（如 Array.isArray(value) && value.filter(...)）；
• 浏览器兼容性良好（ES2015+），现代前端项目可直接使用；若需兼容旧环境，可用 Babel 转译或改写为传统 for 循环。

该方案简洁、健壮且语义清晰，是处理此类嵌套搜索任务的推荐实践。