JavaScript中嵌套层级数组的多动态过滤实现问题

需求明确 #

• 将input1中不匹配filter1规则的元素存入newArray
• 将input1中不匹配filter2规则的元素，关联input2中对应id的元素后存入updateArray

示例输入数据 #

// 带嵌套结构的示例输入
const input1 = [
  { id: 1, name: "A", status: "active", details: { type: "type1" } },
  { id: 2, name: "B", status: "inactive", details: { type: "type2" } },
  { id: 3, name: "C", status: "active", details: { type: "type3" } },
  { id: 4, name: "D", status: "pending", details: { type: "type4" } }
];

const input2 = [
  { id: 1, desc: "描述1", extra: { tag: "tag1" } },
  { id: 2, desc: "描述2", extra: { tag: "tag2" } },
  { id: 4, desc: "描述4", extra: { tag: "tag4" } }
];

// 动态过滤规则示例
const filter1 = (item) => item.status === "active" && item.details.type.includes("type");
const filter2 = (item) => item.status === "pending";

常见问题分析 #

原代码通常会出现以下问题导致不符合预期：

• 混淆“匹配”与“不匹配”逻辑，直接使用filter(filter1)而非取反
• 关联input2时使用嵌套循环，性能低下且容易遗漏无对应id的元素
• 嵌套属性处理不当，合并时丢失深层结构

修正后的实现代码 #

// 1. 生成newArray：筛选input1中不匹配filter1的元素
const newArray = input1.filter(item => !filter1(item));

// 2. 生成updateArray：筛选不匹配filter2的元素并关联input2
// 先将input2转为Map，优化查找效率
const input2Map = new Map(input2.map(item => [item.id, item]));

const updateArray = input1
  .filter(item => !filter2(item))
  .map(item => {
    const relatedData = input2Map.get(item.id);
    // 深层合并嵌套属性，避免覆盖
    return relatedData ? {
      ...item,
      ...relatedData,
      details: { ...item.details, ...(relatedData.details || {}) },
      extra: { ...relatedData.extra, ...(item.extra || {}) }
    } : { ...item };
  });

关键修正点 #

• 过滤逻辑取反：通过!filter1(item)明确筛选不匹配规则的元素，符合需求
• 高效关联：使用Map存储input2的id映射，将查找复杂度从O(n)降至O(1)，处理大量数据时性能提升明显
• 嵌套结构兼容：针对嵌套属性做深层合并，避免直接扩展导致的属性覆盖问题

示例输出 #

// newArray 输出
[
  { id: 2, name: "B", status: "inactive", details: { type: "type2" } },
  { id: 4, name: "D", status: "pending", details: { type: "type4" } }
]

// updateArray 输出
[
  { id: 1, name: "A", status: "active", details: { type: "type1" }, desc: "描述1", extra: { tag: "tag1" } },
  { id: 2, name: "B", status: "inactive", details: { type: "type2" }, desc: "描述2", extra: { tag: "tag2" } },
  { id: 3, name: "C", status: "active", details: { type: "type3" } }
]

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