数组中删除重复数据/删除重复对象/删除全部重复对象

从一个数组中删除重复数据/删除重复对象/删除全部重复对象

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'
  }
]

function getUnique(arr) {
  const map = {};
  // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉）
  arr.forEach(item => map[JSON.stringify(item)] = item);
  
  // 2、再把对象的值抽成一个数组返回即为不重复的集合
  return Object.keys(map).map(key => map[key])
}

getUnique(goodsList); 

/*
  [
    {goodsCode: "2611201047G", goodsName: "华为畅享9 Plus 4GB+128GB 极光紫 双卡 全网通版 JKM-AL00"},
    {goodsCode: "2611201418G", goodsName: "HUAWEInova5i 8GB+128GB 苏音蓝 全网通版"}
  ]
*/

但是这里有一个问题，假如把 goodsList 中最后一个元素的 goodsCode 和 goodsName调换一下顺序，就没法去重了，

可以通过 JSON.stringify的第二个参数指定按一定的顺序来序列化，如下：

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 苏音蓝 全网通版"}
  ]
*/

3、数组中删除全部重复对象 

// 封装方法，删除数组中重复数据
getUnique (arr) {
  let newArr = [...arr];
  let indexArr = [];
  arr.forEach((s, i) => {
    let count = 0;
    newArr.forEach((m, j) => {
      if (arr[i].code == newArr[j].code) { // 当属性值都相同时，打印索引位置
        count++;
      }
    })
    // console.log("索引:",i,"相同次数:",count)
    if (count > 1) { // 内层循环结束，当count>1,说明此索引为对象是重复的
      indexArr.push(i);
    }
  })
  // console.log(indexArr) //相同对象索引数组
  let flag = -1;
  for (var i = 0; i < indexArr.length; i++) { // 删除一次，索引位
    flag++;
    if (flag == 0) {
      newArr.splice(indexArr[i], 1);
    } else {
      newArr.splice(indexArr[i] - flag, 1); // 每次删除，需要删除的索引位就要减去1
    }
  }
  return newArr
}

使用示例如下：

// 封装方法，删除数组中重复数据
getUnique (arr) {
  let newArr = [...arr];
  let indexArr = [];
  arr.forEach((s, i) => {
    let count = 0;
    newArr.forEach((m, j) => {
      if (arr[i].code == newArr[j].code) { // 当属性值都相同时，打印索引位置
        count++;
      }
    })
    // console.log("索引:",i,"相同次数:",count)
    if (count > 1) { // 内层循环结束，当count>1,说明此索引为对象是重复的
      indexArr.push(i);
    }
  })
  // console.log(indexArr) //相同对象索引数组
  let flag = -1;
  for (var i = 0; i < indexArr.length; i++) { // 删除一次，索引位
    flag++;
    if (flag == 0) {
      newArr.splice(indexArr[i], 1);
    } else {
      newArr.splice(indexArr[i] - flag, 1); // 每次删除，需要删除的索引位就要减去1
    }
  }
  return newArr
},
// 复选框选择按钮
importSelectChange (val) {
  this.selectImport.push(val)
  // 获取选择的文件
  let newArr = this.getUnique(this.selectImport)
  this.selectImport = newArr;
}