如何正确合并任意深度的对象数组？React+TypeScript适配方案

刚碰到过类似的嵌套对象合并需求，普通的浅合并或者直接用 lodash.merge（如果你之前试的是这个）确实搞不定——问题核心是得先按 name 字段匹配数组里的目标对象，再递归合并嵌套的 sub 层级，不管嵌套多深都能处理。结合你的 React+TypeScript 环境，给你写个适配的实现方案：

1. 先定义类型（TypeScript 必备） #

首先给嵌套对象定义接口，确保类型安全：

interface NestedItem {
  name: string;
  sub: NestedItem | Record<string, never>; // 用Record<string, never>表示空对象更严谨
}

2. 实现递归深度合并函数 #

这个函数负责处理单个嵌套对象的层级合并，会递归遍历所有 sub 节点：

const deepMergeNestedItems = (target: NestedItem, source: NestedItem): NestedItem => {
  // 先复制目标对象的基础属性
  const merged = { ...target };

  // 如果源对象的sub非空，递归合并；否则保留目标对象的sub
  if (Object.keys(source.sub).length > 0) {
    merged.sub = deepMergeNestedItems(
      target.sub as NestedItem,
      source.sub as NestedItem
    );
  }

  return merged;
};

3. 处理数组的匹配与合并 #

遍历原始数组，找到和新对象 name 匹配的项，调用上面的合并函数，其他项直接保留：

const mergeNestedItemArray = (originalArray: NestedItem[], newItem: NestedItem): NestedItem[] => {
  return originalArray.map(item => 
    item.name === newItem.name 
      ? deepMergeNestedItems(item, newItem) 
      : item
  );
};

4. 测试你的用例 #

把你的测试数据代入验证：

// 原始数组
const originalArray: NestedItem[] = [
  { name: "test", sub: { name: "asdf", sub: {} } },
  { name: "models", sub: {} }
];

// 需要合并的新对象
const newItem: NestedItem = {
  name: "test",
  sub: { name: "asdf", sub: { name: "inside_asdf", sub: {} } }
};

// 执行合并
const mergedArray = mergeNestedItemArray(originalArray, newItem);
console.log(mergedArray);

输出结果完全符合你的预期：

[ { name: "test", sub: { name: "asdf", sub: { name: "inside_asdf", sub: {} } } }, { name: "models", sub: {} } ]

补充说明 #

这个逻辑支持任意层级的嵌套合并——哪怕你要给 inside_asdf 的 sub 再嵌套新内容，只要遵循 name + sub 的结构，函数都会自动递归合并。

如果你之前试的是 lodash 的 merge 方法，没得到预期结果的原因是：它默认按数组索引合并，不会根据 name 字段匹配对象，所以必须先手动匹配到目标项再合并。

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