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: 1
和
name: 'Alice'
。
所以,在合并两个数组中id相同但其他属性不同的元素时,正确的写法应为
{ ...item, ...match }
,其中
item
和
match
都是对象,使用展开运算符将它们的属性逐个添加到新的对象中。
要将具有相同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);