要将两个数组中id相同但其他属性不同的元素合并成一个数组

发布时间 2024-01-03 18:50:26作者: BloggerSb

。以下是几种常见的方法:

方法一:使用 Array 的 reduce 方法

const array1 = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const array2 = [
  { id: 1, age: 25 },
  { id: 2, age: 30 },
  { id: 3, age: 35 }
];

const mergedArray = array1.reduce((result, item) => {
  const match = array2.find(obj => obj.id === item.id);
  if (match) {
    result.push({ ...item, ...match });
  }
  return result;
}, []);

console.log(mergedArray);

  方法二:使用 Array 的 filter 方法和展开运算符

const array1 = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const array2 = [
  { id: 1, age: 25 },
  { id: 2, age: 30 },
  { id: 3, age: 35 }
];

const mergedArray = array1.filter(item1 => {
  const match = array2.find(item2 => item2.id === item1.id);
  return match !== undefined;
}).map(item1 => ({
  ...item1,
  ...array2.find(item2 => item2.id === item1.id)
}));

console.log(mergedArray);

方法三:使用 for 循环和对象字面量

const array1 = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const array2 = [
  { id: 1, age: 25 },
  { id: 2, age: 30 },
  { id: 3, age: 35 }
];

const mergedArray = [];

for (let i = 0; i < array1.length; i++) {
  for (let j = 0; j < array2.length; j++) {
    if (array1[i].id === array2[j].id) {
      const mergedItem = { ...array1[i], ...array2[j] };
      mergedArray.push(mergedItem);
      break;
    }
  }
}

console.log(mergedArray);

在上面提到的代码中,...array1[i] 是使用展开运算符将 array1[i] 对象中的所有属性展开。这样可以将 array1[i] 对象中的属性逐个添加到新创建的对象中。

例如,假设 array1[i] 对象为 { id: 1, name: 'Alice' },使用 ...array1[i] 将会得到 id: 1name: 'Alice'

所以,在合并两个数组中id相同但其他属性不同的元素时,正确的写法应为 { ...item, ...match },其中 itemmatch 都是对象,使用展开运算符将它们的属性逐个添加到新的对象中。

 

要将具有相同id但其他属性不同的元素合并到一个数组中,可以使用以下方法:

const array1 = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
  { id: 1, age: 25 },
  { id: 2, age: 30 },
  { id: 3, age: 35 }
];

const mergedArray = [];

const map = {};

for (const item of array1) {
  if (!map[item.id]) {
    // 如果map中不存在此id,创建一个新的对象,并将当前元素添加到mergedArray中
    map[item.id] = { id: item.id };
    mergedArray.push(map[item.id]);
  }
  
  // 合并当前元素的属性到对应id的对象中
  Object.assign(map[item.id], item);
}

console.log(mergedArray);

在上述代码中,我们使用了一个对象 map 来存储每个id对应的合并后的元素。遍历原始数组 array1,对于每个元素,首先检查 map 中是否已经存在相同的id。如果不存在,我们创建一个新的对象,并将当前元素添加到 mergedArray 中,同时将该对象存储到 map 中。如果存在相同的id,我们通过 Object.assign() 方法将当前元素的属性合并到对应id的对象中。

最后,输出 mergedArray 即可得到合并后的数组。

Object.assign() 是 JavaScript 的一个内置方法,用于在一个或多个目标对象中合并源对象的属性,然后返回合并后的目标对象。

该方法接收两个或多个参数,第一个参数为目标对象,后面的参数是源对象,它们的属性将被合并到目标对象中。如果有多个源对象,后面的对象的属性将覆盖前面的对象的属性。

例如:

javascript
const target = { a: 1, b: 2 };
const source1 = { b: 3, c: 4 };
const source2 = { c: 5, d: 6 };

Object.assign(target, source1, source2);

console.log(target); // 输出 { a: 1, b: 3, c: 5, d: 6 }
在上面的例子中,Object.assign() 方法将 source1 和 source2 对象的属性合并到 target 对象中,并返回合并后的 target 对象。由于 source2 对象包含了 c 属性,所以最终 target 对象的 b 和 c 属性都被覆盖成了 source2 对象中的值。

在上述回答中,我们使用了 Object.assign() 方法将当前元素的属性合并到已存在的元素中。具体来说,以下代码将当前元素的属性合并到 map 中已存在的元素中:

javascript
Object.assign(map[item.id], item);