JavaScript合并两个数组并为重复项添加isSame属性

需求说明 #

遍历两个字符串数组，去重后返回新数组：

• 同时存在于两个数组的元素，生成包含name和isSame: true的对象
• 仅存在于单个数组的元素，生成仅包含name的对象

示例输入：

let arr1 = ['one' , 'two' , 'three'];
let arr2 = ['four' , 'one' , 'two'];

期望输出：

let res = [
 { name : 'one' , isSame: true },
 { name : 'two' , isSame: true },
 { name : 'three' },
 { name : 'four' }
];

原代码问题分析 #

你尝试的代码：

let arr3 = arr1.map((item, i) =>
 Object.assign({}, item, arr2[i])
);

问题在于按索引位置强行合并两个数组的元素，完全没有判断元素是否在两个数组中重复，所以得到的结果和需求不符。

正确实现方案 #

基础版（简洁直观）

const arr1 = ['one', 'two', 'three'];
const arr2 = ['four', 'one', 'two'];

// 合并两个数组并去重，保留插入顺序
const allUniqueItems = [...new Set([...arr1, ...arr2])];

// 遍历处理每个元素
const res = allUniqueItems.map(item => {
  // 判断元素是否同时存在于两个数组
  const isDuplicate = arr1.includes(item) && arr2.includes(item);
  return isDuplicate ? { name: item, isSame: true } : { name: item };
});

console.log(res);

高效版（适合大数组场景）

如果数组元素较多，includes方法的时间复杂度是O(n)，可以用对象映射优化查询效率：

const arr1 = ['one', 'two', 'three'];
const arr2 = ['four', 'one', 'two'];

// 预存元素在两个数组中的存在状态
const inArr1 = {};
arr1.forEach(item => inArr1[item] = true);
const inArr2 = {};
arr2.forEach(item => inArr2[item] = true);

// 合并去重得到所有唯一元素
const allUniqueItems = [...new Set([...arr1, ...arr2])];

// 生成结果数组
const res = allUniqueItems.map(item => {
  const isDuplicate = inArr1[item] && inArr2[item];
  return isDuplicate ? { name: item, isSame: true } : { name: item };
});

console.log(res);

代码逻辑说明 #

1. 合并去重：用Set合并两个数组并自动去重，[...new Set()]会把Set转换回数组，同时保留元素的插入顺序（和示例输出顺序一致）
2. 重复判断：对每个唯一元素，判断是否同时存在于两个数组中
3. 生成对象：根据判断结果生成对应结构的对象，重复元素添加isSame: true属性，非重复元素仅保留name

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