使用map()和filter()筛选深层嵌套的对象数组

我有一个深层嵌套的对象数组，想要筛选第二层children中name为Assistant或Advisor的元素，同时保留原有的完整数据结构。之前尝试用map()和filter()组合实现，但只能返回匹配的第二层children，没法保留整个层级结构。

原始数据 #

const data = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Secretary",
          "median": 60000.0,
        },
        {
          "name": "Administrator",
          "median": 60000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Manager",
          "median": 80000,
        },
        {
          "name": "Advisor",
          "median": 60000,
        },
        {
          "name": "Legal",
          "median": 20000,
        },
        {
          "name": "Cashier",
          "median": 30000,
        },
      ]
    }
  ]
}]

期望结果 #

const filteredResult = [{
  "name": "root",
  "median": 60000.0,
  "children": [{
      "name": "Defence",
      "median": 60000.0,
      "children": [{
          "name": "Assistant",
          "median": 30000.0,
        },
        {
          "name": "Advisor",
          "median": 50000.0,
        },
        {
          "name": "Assistant",
          "median": 20000.0,
        },
      ]
    },
    {
      "name": "Healthcare",
      "median": 60000,
      "children": [{
          "name": "Advisor",
          "median": 60000,
        },
      ]
    }
  ]
}]

当前尝试的代码 #

var fmatch = ["Assistant", "Advisor"]
console.log(data.map(c=> c.children.map(c => c.children.filter(c => fmatch.includes(c.name)))))

解决方案 #

你的问题在于当前代码只提取了筛选后的最内层children，没有保留上层对象的完整属性。要解决这个问题，需要逐层遍历并复制原对象的所有属性，仅修改目标层级的children数组：

针对固定三层结构的实现 #

const fmatch = ["Assistant", "Advisor"];

const filteredData = data.map(rootItem => ({
  // 复制根节点的所有原有属性
  ...rootItem,
  // 处理根节点的children数组
  children: rootItem.children.map(secondLevelItem => ({
    // 复制第二层节点的所有原有属性
    ...secondLevelItem,
    // 筛选第二层节点的children数组，只保留目标name的元素
    children: secondLevelItem.children.filter(child => fmatch.includes(child.name))
  }))
}));

console.log(filteredData);

通用递归实现（适配任意嵌套深度） #

如果后续数据结构可能有更深的嵌套，可以用递归函数处理：

const fmatch = ["Assistant", "Advisor"];

function filterTargetChildren(items) {
  return items.map(item => {
    // 筛选当前节点的children（如果存在）
    const filteredKids = item.children 
      ? item.children.filter(kid => fmatch.includes(kid.name)) 
      : [];
    // 返回复制的原对象+筛选后的children
    return {
      ...item,
      children: filteredKids
    };
  });
}

// 处理当前数据的根节点children
const filteredData = data.map(root => ({
  ...root,
  children: filterTargetChildren(root.children)
}));

console.log(filteredData);

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