利用JavaScript數組對象合併重複屬性值

一、使用for循環實現數組對象合併

在JavaScript中，我們可以使用for循環來遍曆數組對象，達到合併重複屬性值的效果。下面的示例代碼中，我們有兩個數組對象arr1和arr2，它們的屬性’title’和’content’都存在重複值。我們可以使用for循環，在遍歷arr2數組對象的同時，使用數組方法forEach()來遍歷arr1數組對象，查找是否有相同的屬性’title’和’content’，如果有，就將arr2中的對應屬性值添加到arr1中來。

//示例代碼
let arr1 = [
  {title: 'title1', content: 'content1'},
  {title: 'title2', content: 'content2'},
  {title: 'title3', content: 'content3'}
];

let arr2 = [
  {title: 'title3', content: 'new content3'},
  {title: 'title4', content: 'content4'},
  {title: 'title5', content: 'content5'}
];

//使用for循環實現數組對象合併
for (let i = 0; i < arr2.length; i++) {
  let hasMatch = false;
  for (let j = 0; j < arr1.length; j++) {
    if (arr1[j].title === arr2[i].title && arr1[j].content === arr2[i].content) {
      hasMatch = true;
      break;
    }
  }
  if (!hasMatch) {
    arr1.push(arr2[i]);
  }
};
console.log(arr1); //輸出合併後的數組對象

二、使用reduce()方法實現數組對象合併

除了使用for循環外，我們也可以使用reduce()方法來實現數組對象合併。reduce()方法是JavaScript內置的數組方法之一，它可以將數組中的值從左到右合併成一個值。在數組對象合併中，我們可以使用reduce()方法來遍歷arr2數組對象，通過數組方法some()來檢查arr1數組對象中是否已經存在相同的屬性值，如果存在，就返回原數組arr1，否則使用數組方法concat()將新的對象添加進arr1中。

//示例代碼
let arr1 = [
  {title: 'title1', content: 'content1'},
  {title: 'title2', content: 'content2'},
  {title: 'title3', content: 'content3'}
];

let arr2 = [
  {title: 'title3', content: 'new content3'},
  {title: 'title4', content: 'content4'},
  {title: 'title5', content: 'content5'}
];

//使用reduce()方法實現數組對象合併
let mergedArr = arr2.reduce((acc, cur) => {
  let match = acc.some(item => item.title === cur.title && item.content === cur.content);
  return match ? acc : acc.concat(cur);
}, arr1);
console.log(mergedArr); //輸出合併後的數組對象

三、合併具有相同屬性的對象

在上面的示例中，我們只合併了具有相同’title’和’content’屬性的對象，但如果我們想合併具有相同’title’屬性的對象，該怎麼實現呢？下面的示例代碼演示了如何合併具有相同’title’屬性的對象

//示例代碼
let arr1 = [
  {title: 'title1', content: 'content1'},
  {title: 'title1', content: 'content2'},
  {title: 'title3', content: 'content3'}
];

let arr2 = [
  {title: 'title1', content: 'new content1'},
  {title: 'title4', content: 'content4'},
  {title: 'title5', content: 'content5'}
];

//合併具有相同'title'屬性的對象
let mergedArr = arr2.reduce((acc, cur) => {
  let match = acc.find(item => item.title === cur.title);
  if (match) {
    Object.assign(match, cur);
  } else {
    acc.push(cur);
  }
  return acc;
}, arr1);
console.log(mergedArr); //輸出合併後的數組對象

四、結論

在JavaScript中，我們可以使用for循環和reduce()方法來實現數組對象的合併。除此之外，我們還可以根據具體的需求，選擇合適的方法來合併具有相同屬性值的對象。關鍵在於熟練掌握數組方法和相關的JavaScript語法。