javascript - 区分 2 个数组，即要添加和删除的项目

Question

给定:

• “当前”对象数组 [{id: '1'},{id: '2'},{id: '3'},{id: '4'},{id: '5 '}]
• "new"对象数组 [{id: '1'},{id: '5'},{id: '6'},{id: '7'},{id: '8 '}]

如何确定哪些对象

• 添加(不在“当前”)和
• 删除(不在"new"中)？

在这种情况下:

• {id: '2'},{id: '3'},{id: '4'} 应该被移除
• 应添加{id: '6'},{id: '7'},{id: '8'}

性能不是特别重要，我的数据集通常在 200 左右。

编辑:我需要知道要添加/删除的元素，因为“当前”数组与 DOM 节点相关，我不想只删除它们并从头开始添加 - 已经尝试过那和性能远非完美。

Answer 1

在这两种情况下，这都是集合操作“差”的经典用例。您需要做的就是定义一个差异函数，然后将其与 current.difference(new) 和 new.difference(current) 一起应用。

function difference(a, b, compare) {
  let diff = [];
  for (let ai = 0; ai < a.length; ai++) {
    let exists = false;
    for (let bi = 0; bi < b.length; bi++) {
      if (compare(a[ai], b[bi])) {
        exists = true;
        break;
      }
    }
    if (!exists) diff.push(a[ai]);
  }

  return diff;
}

function getRemoved(oldA, newA) {
  return difference(oldA, newA, (a, b) => a.id == b.id);
}

function getAdded(oldA, newA) {
  return difference(newA, oldA, (a, b) => a.id == b.id);
}

let current = [{id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}, {id: '5'}];
let newArr = [{id: '1'}, {id: '5'}, {id: '6'}, {id: '7'}, {id: '8'}];

console.log(getRemoved(current, newArr));
console.log(getAdded(current, newArr));