JavaScript 数组对象的替换与新增：基于键值的无损合并操作-js教程-PHP中文网

JavaScript 数组对象的替换与新增：基于键值的无损合并操作

本文介绍如何安全、高效地根据指定键（如 name）对数组中的对象进行覆盖或新增，避免直接修改原数组，推荐使用 Map 实现不可变更新。

本文介绍如何安全、高效地根据指定键（如 name）对数组中的对象进行覆盖或新增，避免直接修改原数组，推荐使用 map 实现不可变更新。

在实际开发中，经常需要将一组“更新配置”（如 UI 字段显隐规则、表单校验项）合并到原始数据结构中：若目标对象已存在（由唯一键判定），则覆盖其属性；若不存在，则追加为新项。关键在于不污染原始数组，同时保证逻辑清晰、性能可控。

以下是一个健壮、函数式风格的实现方案：

const replaceOrAdd = (sourceArray, overrideArray, key = "name") => {
  // 步骤1：用 Map 建立 sourceArray 的键值索引（O(1) 查找）
  const map = new Map();
  sourceArray.forEach(item => map.set(item[key], { ...item })); // 浅拷贝，避免意外引用

  // 步骤2：遍历 overrideArray，逐个覆盖或插入
  overrideArray.forEach(item => {
    map.set(item[key], { ...item }); // 同样浅拷贝，确保不可变性
  });

  // 步骤3：转换回数组，保持插入顺序（Map 保留插入顺序）
  return Array.from(map.values());
};

✅ 优势说明：

✅ 不可变性：不修改 sourceArray，返回全新数组，符合函数式编程原则；
✅ 时间复杂度优化：findIndex 是 O(n) 每次查找，而 Map 查找为 O(1)，整体从 O(m×n) 降至 O(m+n)；
✅ 顺序保留：先插入 sourceArray 所有项，再按 overrideArray 顺序覆盖/追加，最终结果中原始项位置不变，新增项置于末尾；
✅ 安全拷贝：使用 {...item} 避免深层嵌套对象被意外共享（如 rules: {} 等引用类型需注意，若需深拷贝请配合 structuredClone 或 Lodash cloneDeep）。

? 使用示例：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

const source = [
  { label: "WORK_ORDER_NUMBER", name: "job_order_number", visible: true },
  { label: "WORK_ORDER_VALIDITY_DATE", name: "validity_date", visible: true },
  { label: "BOOKING_ID", name: "booking_number", visible: true },
  { label: "BOOKING_TYPE", name: "booking_type", rules: {}, visible: true }
];

const updates = [
  { label: "WORK_ORDER_NUMBER", name: "job_order_number", visible: false },
  { label: "BOOKING_ID", name: "booking_number", visible: false },
  { label: "XXXXX", name: "XXXXXX", visible: false }
];

const result = replaceOrAdd(source, updates);
console.log(result);
// → 输出符合预期：前两项被覆盖，第三项新增，原始未匹配项（如 validity_date、booking_type）保持原位

⚠️ 注意事项：