如何基于嵌套数组条件过滤对象数组并映射新属性名？

需求说明 #

• 过滤对象数组的嵌套子项，仅保留type匹配指定值的子对象
• 将原嵌套属性subs重命名为subModule
• 保留父对象的原有属性，仅处理嵌套子数组

原始数据示例 #

const originalData = [
  {
    name: "Module A",
    type: "parent",
    subs: [
      { name: "Sub A1", type: "target" },
      { name: "Sub A2", type: "other" },
      { name: "Sub A3", type: "target" }
    ]
  },
  {
    name: "Module B",
    type: "parent",
    subs: [
      { name: "Sub B1", type: "other" },
      { name: "Sub B2", type: "target" }
    ]
  }
];

常见错误示例 #

很多实现会忽略子数组的精准过滤，直接复制原subs数组：

// 错误：未过滤子项，仅重命名属性
const invalidResult = originalData.map(item => ({
  ...item,
  subModule: item.subs,
  subs: undefined
}));

正确实现（单层嵌套） #

const filterAndRenameSubmodules = (data, targetType) => {
  return data.map(parentItem => {
    // 过滤子数组，仅保留符合type的项
    const filteredSubs = parentItem.subs?.filter(sub => sub.type === targetType) || [];
    // 重命名属性并返回新对象
    return {
      ...parentItem,
      subModule: filteredSubs,
      subs: undefined // 移除原属性（可选，若需保留可删除此行）
    };
  });
};

// 调用示例
const finalResult = filterAndRenameSubmodules(originalData, "target");

输出结果 #

[
  {
    "name": "Module A",
    "type": "parent",
    "subModule": [
      { "name": "Sub A1", "type": "target" },
      { "name": "Sub A3", "type": "target" }
    ]
  },
  {
    "name": "Module B",
    "type": "parent",
    "subModule": [
      { "name": "Sub B2", "type": "target" }
    ]
  }
]

扩展：多层嵌套场景 #

如果子对象也包含subs属性需要递归处理，可使用以下实现：

const recursiveFilterAndRename = (data, targetType) => {
  return data.map(item => {
    // 递归处理子层级
    const processedSubs = item.subs?.map(sub => recursiveFilterAndRename([sub], targetType)[0])
      .filter(sub => sub.type === targetType || sub.subModule.length > 0) || [];
    
    return {
      ...item,
      subModule: processedSubs,
      subs: undefined
    };
  });
};

关键要点 #

• 使用map遍历父数组，确保所有父对象被保留（若需过滤父对象可在map前添加filter）
• 单独对每个父对象的subs数组执行filter，精准筛选子项
• 通过对象展开运算符保留父对象原有属性，替换并移除原嵌套属性
• 多层嵌套场景需递归处理子对象的嵌套数组

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