Angular数组数据替换问题：如何生成全新结果数组

首先，你的核心需求很清晰：按数组1的顺序合并两个数组——匹配到的用数组2的完整对象，没匹配到的保留数组1的原对象，同时要适配大量数据，还要解决后续数据导致的数组追加问题。咱们一步步来修正：

一、现有代码的问题分析 #

你当前的lodash代码有两个小问题：

1. 匹配逻辑错误：数组1的每个元素是{Name: "xxx"}对象，但你用_.find(this.dataArray, ['Name', item])时，item是整个对象，而不是item.Name，导致匹配不到正确的元素；
2. 数组追加问题：如果this.newArray没有每次被赋值为全新数组，而是在原有数组基础上操作，就会出现旧数据残留、新数据追加的情况。

二、修正后的Lodash实现 #

先把匹配逻辑改对，同时确保每次生成全新数组：

// 直接赋值新数组，彻底避免追加问题
this.newArray = _.map(this.resultantArray, arr1Item => {
  // 用数组1元素的Name属性去匹配数组2
  const matchedItem = _.find(this.dataArray, ['Name', arr1Item.Name]);
  // 找到则用数组2的对象，否则保留数组1的原对象（用展开运算符创建新对象，避免引用污染）
  return matchedItem ? {...matchedItem} : {...arr1Item};
});

三、更高效的原生JS实现（适配大量数据） #

如果你的数据量很大，上面的_.find每次遍历数组2会导致O(n*m)的时间复杂度，效率较低。推荐用Map做一次预处理，把查找复杂度降到O(1)：

// 先将数组2转换为以Name为键的Map，只需要预处理一次
const nameToItemMap = new Map(this.dataArray.map(item => [item.Name, item]));

// 遍历数组1生成结果，全程O(n)复杂度
this.newArray = this.resultantArray.map(arr1Item => {
  const matchedItem = nameToItemMap.get(arr1Item.Name);
  // 同样用展开运算符创建新对象，避免原数组对象被意外修改
  return matchedItem ? {...matchedItem} : {...arr1Item};
});

四、彻底解决追加问题的关键 #

无论用哪种实现，一定要确保每次生成结果时，直接给this.newArray赋值map返回的全新数组，而不是用push、concat等方法往旧数组里加元素。比如：

• 错误写法（会追加）：this.newArray.push(...newItems);
• 正确写法（全新数组）：this.newArray = ...;（上面的map结果）

这样每次处理新数据时，都会覆盖掉旧的this.newArray，得到完全干净的结果数组。

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