要将两个数组中id相同但其他属性不同的元素合并成一个数组
。以下是几种常见的方法:
方法一:使用 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: 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);
此随笔或为自己所写、或为转载于网络。仅用于个人收集及备忘。