Angular中基于ID维护有序数组：更新/添加/移除对象算法需求

嘿，我完全懂你在Angular里遇到的这个痛点——直接用新数组替换旧数组会打乱原有排序，必须得精准更新同时牢牢守住原来的顺序。结合你给出的所有边界案例，咱们先梳理清楚核心规则，再用Lodash或者原生JavaScript来实现靠谱的解决方案。

核心更新规则 #

先把对应所有测试案例的逻辑明确下来：

• 当oldArr是undefined时，直接返回newArr（如果newArr也为undefined就返回undefined）
• 当newArr是undefined时，直接返回undefined
• 正常场景下：
  1. 死守旧数组顺序：最终数组的基础排序完全以oldArr为准，新数组的顺序不影响原有项的位置
  2. 更新现有项：对oldArr里已存在的项，用newArr中对应id的最新数据覆盖
  3. 剔除无效项：移除oldArr中那些id不在newArr里的项
  4. 追加新增项：把newArr里有但oldArr没有的id对应的项，按照newArr里的顺序追加到最终数组末尾

实现方案 #

方案1：用Lodash快速实现 #

Lodash的keyBy、intersectionBy、differenceBy这些工具方法能帮我们把逻辑写得简洁又易读：

import _ from 'lodash';

function updateOrderedArray(oldArr, newArr) {
  // 边界处理：新数组为undefined直接返回undefined
  if (newArr === undefined) return undefined;
  // 边界处理：旧数组为undefined直接返回新数组
  if (oldArr === undefined) return newArr;

  // 把新数组转换成以id为键的映射表，方便快速查找
  const newItemMap = _.keyBy(newArr, 'id');
  // 处理现有项：过滤出在新数组中存在的项，并更新内容
  const updatedExistingItems = oldArr
    .filter(item => newItemMap[item.id])
    .map(item => ({ ...item, ...newItemMap[item.id] }));
  
  // 找出新数组中不在旧数组里的新增项，保留新数组的顺序
  const newAddedItems = _.differenceBy(newArr, oldArr, 'id');

  // 合并结果：更新后的原有项 + 新增项
  return [...updatedExistingItems, ...newAddedItems];
}

方案2：原生JavaScript实现 #

如果不想依赖第三方库，用原生JS也能实现完全一致的逻辑，手动构建映射表就行：

function updateOrderedArray(oldArr, newArr) {
  if (newArr === undefined) return undefined;
  if (oldArr === undefined) return newArr;

  // 构建新数组的id映射表
  const newItemMap = new Map(newArr.map(item => [item.id, item]));
  
  // 处理现有项：过滤+更新
  const updatedExistingItems = oldArr
    .filter(item => newItemMap.has(item.id))
    .map(item => ({ ...item, ...newItemMap.get(item.id) }));
  
  // 找出新增项：筛选新数组中不在旧数组里的项
  const oldIdSet = new Set(oldArr.map(item => item.id));
  const newAddedItems = newArr.filter(item => !oldIdSet.has(item.id));

  return [...updatedExistingItems, ...newAddedItems];
}

验证所有边界案例 #

咱们逐一测试你给出的场景，确保每一个都符合预期：

1. 更新现有项

   const oldArr = [{id: 1, invalid: true}]; 
   const newArr = [{id: 1, invalid: false}]; 
   // 输出：[{id: 1, invalid: false}] ✅
   

2. 追加新项

   const oldArr = [{id: 1, invalid: true}]; 
   const newArr = [{id: 1, invalid: true}, {id: 2, invalid: true}]; 
   // 输出：[{id: 1, invalid: true}, {id: 2, invalid: true}] ✅
   

3. 移除不存在的项

   const oldArr = [{id: 1, invalid: true}, {id: 2, invalid: true}]; 
   const newArr = [{id: 1, invalid: true}]; 
   // 输出：[{id: 1, invalid: true}] ✅
   

4. 保留旧数组顺序，忽略新数组顺序

   const oldArr = [{id: 1, invalid: true}, {id: 2, invalid: true}]; 
   const newArr = [{id: 2, invalid: true}, {id: 1, invalid: true}]; 
   // 输出：[{id: 1, invalid: true}, {id: 2, invalid: true}] ✅
   

5. oldArr为undefined

   const oldArr = undefined; 
   const newArr = [{id: 1, invalid: true}, {id: 2, invalid: true}]; 
   // 输出：[{id: 1, invalid: true}, {id: 2, invalid: true}] ✅
   

6. newArr为undefined

   const oldArr = [{id: 1, invalid: true}]; 
   const newArr = undefined; 
   // 输出：undefined ✅
   

7. 非连续id，保留旧顺序

   const oldArr = [{id: 65, invalid: true}, {id: 2, invalid: true}]; 
   const newArr = [{id: 2, invalid: true}, {id: 65, invalid: true}]; 
   // 输出：[{id: 65, invalid: true}, {id: 2, invalid: true}] ✅
   

所有案例都完美匹配预期结果，这个逻辑完全能满足你的需求。

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