JavaScript：如何根据属性匹配并合并更新selected与current数组？

现有数组结构 #

selected数组 #

const selected = [
  { field: { prop1: "value1" }, isDeleted: true, isSelected: false },
  { field: { prop1: "value2" }, isDeleted: true, isSelected: false },
  { field: { prop1: "value3" }, isDeleted: false, isSelected: false }
];

current数组 #

const current = [
  { field: { prop1: "value2" }, isDeleted: false, isSelected: false },
  { field: { prop1: "value1" }, isDeleted: false, isSelected: false }
];

需求说明 #

1. 先把selected里isDeleted为false的对象放进结果数组
2. 再把selected里isDeleted为true且在current中存在的对象，修改isDeleted为false后，按selected里的顺序追加到结果数组
3. 最终期望输出：

const output = [
  { field: { prop1: "value3" }, isDeleted: false, isSelected: false },
  { field: { prop1: "value2" }, isDeleted: false, isSelected: false },
  { field: { prop1: "value1" }, isDeleted: false, isSelected: false }
];

尝试的代码（未得到正确结果） #

const selected = [
  { field1: { prop1: "value1" }, isDeleted: true, isSelected: false },
  { field1: { prop1: "value2" }, isDeleted: true, isSelected: false },
  { field1: { prop1: "value3" }, isDeleted: false, isSelected: false }
];

const current = [
  { field1: { prop1: "value1" }, isDeleted: false, isSelected: false },
  { field1: { prop1: "value2" }, isDeleted: false, isSelected: false }
];
const selectedModified = selected.map((sel) => {
  const found = current.find(
    (cur) => cur.field.prop1 === sel.field.prop1 && sel.isDeleted
  );
  if (found) {
    return {
      field: sel.field,
      isDeleted: false,
      isSelected: false
    };
  }
  return sel;
});
const filtered = [...(selectedModified || []), ...current].filter(
  filterBy("prop1")
);
const filterBy = (key, set = new Set()) => (o) =>
!set.has(o.file[key]) && set.add(o.file[key]);
console.log(filtered);

问题分析与解决方案 #

你的代码有几个明显问题：

1. 字段名不统一：定义数组时用field1，后续代码却写field，导致匹配完全失败
2. 拼写错误：filterBy函数里的o.file[key]是笔误，应该对应字段名field1（或统一成field）
3. 逻辑冗余：没必要合并两个数组再去重，直接按需求分步处理更清晰高效

修正后的代码 #

// 统一字段名为field，和需求结构保持一致
const selected = [
  { field: { prop1: "value1" }, isDeleted: true, isSelected: false },
  { field: { prop1: "value2" }, isDeleted: true, isSelected: false },
  { field: { prop1: "value3" }, isDeleted: false, isSelected: false }
];

const current = [
  { field: { prop1: "value2" }, isDeleted: false, isSelected: false },
  { field: { prop1: "value1" }, isDeleted: false, isSelected: false }
];

// 第一步：筛选selected中isDeleted为false的项，作为结果初始内容
const result = selected.filter(item => !item.isDeleted);

// 第二步：把current里的prop1值存入Set，快速判断是否存在
const currentProp1Set = new Set(current.map(item => item.field.prop1));

// 第三步：遍历selected中isDeleted为true的项，符合条件就修改后追加到结果
selected.forEach(item => {
  if (item.isDeleted && currentProp1Set.has(item.field.prop1)) {
    // 复制原对象并修改isDeleted属性，避免污染原数组
    result.push({
      ...item,
      isDeleted: false
    });
  }
});

console.log(result);

代码说明 #

1. 第一步直接筛选出selected中未标记删除的元素，保证结果数组的初始内容正确
2. 用Set存储current的prop1值，查找效率从O(n)降到O(1)，处理大量数据时更高效
3. 按selected的顺序遍历待处理元素，符合条件就复制对象并修改属性后追加，完全满足需求里的顺序要求

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