一道題目學ES6 API,合併物件id相同的兩個陣列物件
阿新 • • 發佈:2020-09-16
var arr2=[{id:1,name:'23'}] var arr1=[{id:1,car:'car2'}] const combined = arr2.reduce((acc, cur) => { const target = acc.find(e => e.id === cur.id); console.log(target) if (target) { Object.assign(target, cur); } else { acc.push(cur); } return acc; }, arr1); console.log(combined);
arr2.reduce(function(acc,cur),arr1):reduce方法傳入的函式的第一個引數acc是陣列元素的累計值,reduce方法的第二引數arr1是指定累計值acc的初始值。
所以一開始acc的值就是arr1,cur的值是arr2[0].
const target = acc.find(e => e.id === cur.id); target返回的是在arr1中id與arr2[0].id值相同的物件:即{id:1,name:'23'}
例如var target = [{id:1},{id:2}].find(e=> e.id==1)//target的值為{id:1}
Object.assign(target, cur)//將cur中的值複製到target中,若是相同屬性就覆蓋,若是不同屬性就新增
例如:Object.assign({id:1,name:'23'},{id:1,car:'car1'})//結果是得到物件{id: 1, name: "23", car: "car1"}
上面if...else...語句的意思就是,在arr1陣列中找到了與arr2陣列元素相同的id的就合併,沒有找到就講arr2陣列的該元素push到arr1陣列中,最後得到的acc及arr1與arr2合併後的陣列。