如何实现符合特定规则的JavaScript数组合并函数？

需求梳理 #

• 移除原数组中存在但替换数组没有的元素
• 添加原数组中不存在的替换数组元素
• 结果数组无重复项
• 兼容任意长度的输入数组

示例代码 #

const originalArray = [1,2,3];
const replacingArray = [1,5,3,4]; // 2在原数组中存在但替换数组没有，5、4是原数组没有的新元素

const result = merge(originalArray, replacingArray); 

console.log(result) // 输出：[1,5,3,4]

实现方案 #

方案一：基础类型快速实现（利用Set） #

如果数组元素是数字、字符串等基础类型，直接借助Set的去重特性即可完成需求，代码简洁高效：

function merge(original, replacement) {
  // Set自动去重且保留元素插入顺序，直接转换为数组返回
  return [...new Set(replacement)];
}

说明：此方案本质是返回去重后的替换数组，完全符合需求：

• 原数组中不在替换数组的元素自动被排除
• 替换数组中原数组没有的元素全部保留
• Set自动处理重复项
• 支持任意长度的输入数组

方案二：支持引用类型（自定义匹配规则） #

如果数组元素是对象等引用类型，需要指定匹配属性来判断元素是否重复/存在，比如用id作为唯一标识：

function merge(original, replacement, matchKey = null) {
  // 根据是否指定匹配key，生成获取元素唯一标识的函数
  const getKey = item => matchKey ? item[matchKey] : item;

  // 遍历替换数组，去重后得到结果
  const result = [];
  const seenKeys = new Set();

  for (const item of replacement) {
    const key = getKey(item);
    if (!seenKeys.has(key)) {
      seenKeys.add(key);
      result.push(item);
    }
  }

  return result;
}

使用示例：

const original = [{id:1, name:'张三'}, {id:2, name:'李四'}];
const replacement = [{id:1, name:'张三'}, {id:3, name:'王五'}];
const result = merge(original, replacement, 'id');
console.log(result); // 输出：[{id:1, name:'张三'}, {id:3, name:'王五'}]

方案三：保留原数组匹配元素实例 #

如果需要保留原数组中与替换数组匹配的元素实例（而非替换数组中的实例），可以借助Map实现：

function merge(original, replacement, matchKey = null) {
  const getKey = item => matchKey ? item[matchKey] : item;

  // 将原数组元素存入Map，key为唯一标识，value为元素实例（自动去重）
  const originalMap = new Map();
  original.forEach(item => {
    const key = getKey(item);
    if (!originalMap.has(key)) {
      originalMap.set(key, item);
    }
  });

  // 遍历替换数组，优先使用原数组的元素实例，无匹配则用替换数组的元素
  const result = [];
  const seenKeys = new Set();

  for (const item of replacement) {
    const key = getKey(item);
    if (!seenKeys.has(key)) {
      seenKeys.add(key);
      result.push(originalMap.get(key) || item);
    }
  }

  return result;
}

使用示例：

const original = [{id:1, name:'张三'}, {id:2, name:'李四'}];
const replacement = [{id:1, name:'张三修改版'}, {id:3, name:'王五'}];
const result = merge(original, replacement, 'id');
console.log(result); // 输出：[{id:1, name:'张三'}, {id:3, name:'王五'}]

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