從一個數組中刪除重復對象

1、簡單的數組去重

 

可以借用數組的 filter()方法和indexOf()方法，由於 indexOf(item) 返回的是數組中第一個item的索引，所以可以借此實現數組元素去重的功能

const names = ['張三', '李四', '張三'];

function getUnique(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index)
}

getUnique(names); // ["張三", "李四"]

 

2、從數組中刪除重復的對象

 

如果數組的元素是對象，就不那么簡單了。眾所周知，對象是引用類型，比較兩個對象不是比較對象的屬性和值而是比較對象的地址值

 

如下例所示，數組首尾兩個元素看起來是一模一樣的，但是用前面的方法沒法去重

const goodsList = [
  {
    goodsCode: '2611201047G',
    goodsName: '華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00'
  },
  {
    goodsCode: '2611201418G',
    goodsName: 'HUAWEInova5i 8GB+128GB 蘇音藍 全網通版'
  },
  {
    goodsCode: '2611201047G',
    goodsName: '華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00'
  }
]


getUnique(goodsList);  // 返回的依然是goodsList

 

這里可以借助JSON.stringify() 方法把一個對象轉成string類型來做比較

function getUnique2(arr) {
  const map = {};
  // 1、把數組元素作為對象的鍵存起來（這樣就算有重復的元素，也會相互替換掉）
  arr.forEach(item => map[JSON.stringify(item)] = item);
  
  // 2、再把對象的值抽成一個數組返回即為不重復的集合
  return Object.keys(map).map(key => map[key])
}

getUnique2(goodsList); 
/*
  [
    {goodsCode: "2611201047G", goodsName: "華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00"},
    {goodsCode: "2611201418G", goodsName: "HUAWEInova5i 8GB+128GB 蘇音藍 全網通版"}
  ]
*/

 

但是這里有一個問題，假如把 goodsList 中最后一個元素的 goodsCode 和 goodsName調換一下順序，就沒法去重了

const goodsList = [ // 注意比較首尾元素對象中內部屬性的順序
  {
    goodsCode: '2611201047G',
    goodsName: '華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00'
  },
  {
    goodsCode: '2611201418G',
    goodsName: 'HUAWEInova5i 8GB+128GB 蘇音藍 全網通版'
  },
  { 
    goodsName: '華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00',
    goodsCode: '2611201047G'
  }
]

function getUnique3(arr) {
  const map = {};

  arr.forEach(item => {
    const obj = {};
    // 1、把數組中的元素（對象）的鍵名抽成一個數組然后排序
    // 2、生成一個按照鍵名排序好的對象
    Object.keys(item).sort().map(key => obj[key] = item[key]);

    // 3、把新生成的對象作為對象的鍵存起來
    map[JSON.stringify(obj)] = item;
  });
  
  // 4、再把新對象的鍵名抽成一個數組返回即為不重復的集合
  return Object.keys(map).map(key => JSON.parse(key));
}

console.log(getUnique3(goodsList)); 
/*
  [
    {goodsCode: "2611201047G", goodsName: "華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00"},
    {goodsCode: "2611201418G", goodsName: "HUAWEInova5i 8GB+128GB 蘇音藍 全網通版"}
  ]
*/

 

除了上面那樣，通過把對象的屬性名排序來處理以外，還可以借助JSON.stringify()的replacer參數來實現

JSON.stringify(value[, replacer [, space]])

value：將要序列化成 一個 JSON 字符串的值。

replacer：如果 replacer 是一個數組，數組的值代表將被序列化成 JSON 字符串的屬性名

 

也就是說，可以通過 JSON.stringify的第二個參數指定按一定的順序來序列化，例如

const goodsList = [ // 注意比較首尾元素對象中內部屬性的順序
  {
    goodsCode: '2611201047G',
    goodsName: '華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00'
  },
  {
    goodsCode: '2611201418G',
    goodsName: 'HUAWEInova5i 8GB+128GB 蘇音藍 全網通版'
  },
  { 
    goodsName: '華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00',
    goodsCode: '2611201047G'
  }
]

console.log(JSON.stringify(goodsList, ['goodsName', 'goodsCode']));
/*
  [
    {"goodsName":"華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00","goodsCode":"2611201047G"},
    {"goodsName":"HUAWEInova5i 8GB+128GB 蘇音藍 全網通版","goodsCode":"2611201418G"},
    {"goodsName":"華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00","goodsCode":"2611201047G"}
  ]
*/

 

由此可見，只需要把 getUnique2() 稍作修改，就可以產生最佳的解決方案了

function getUnique2(arr) {
  const map = {};
  // 1、把數組元素作為對象的鍵存起來（這樣就算有重復的元素，也會相互替換掉）
  arr.forEach(item => map[JSON.stringify(item, ['goodsCode', 'goodsName'])] = item);
  
  // 2、再把新對象的鍵名抽成一個數組返回即為不重復的集合
  return Object.keys(map).map(key => JSON.parse(key))
}

console.log(getUnique2(goodsList)); 
/*
  [
    {goodsCode: "2611201047G", goodsName: "華為暢享9 Plus 4GB+128GB 極光紫 雙卡 全網通版 JKM-AL00"},
    {goodsCode: "2611201418G", goodsName: "HUAWEInova5i 8GB+128GB 蘇音藍 全網通版"}
  ]
*/