你知道多少种数组去重的方法？

一. 前言

这篇文档主要用来汇总日常收集到的关于数组去重的方法~

假设此刻就有一个数组需要你去写代码将它去重，你有多少种方法呢？

const arr = [4, 4, 6, 7, 8, 8, 3];

方法一： 最简洁的方法：new Set()

利用了ES6的new Set()只能接受唯一值，并且会自动去重的特性

console.log([...new Set(arr)]); // [ 4, 6, 7, 8, 3 ]

方法二：forEach/indexOf：使用一个空数组去承接不重复的元素

利用forEach去遍历数组中的元素，如果新数组中不存在当前元素，然后再将该元素push进新数组中

const uniqueArr = [];
arr.forEach(ele => {
  if (!uniqueArr.includes(ele)) {
    uniqueArr.push(ele);
  }
});

console.log(uniqueArr); // [4,6,7,8,3]

方法三：filter/indexOf：筛选元素的索引值等于indexOf查找的该元素第一次出现的索引

filter()方法会创建一个新的数组，只有通过我们给的判断逻辑的元素才可被留下来

const uniqueArr2 = arr.filter((ele, index) => {
  return index === arr.indexOf(ele);
});

console.log(uniqueArr2); // [ 4, 6, 7, 8, 3 ]

这样的话，反过来，如果需要检索到数组中重复的项，也可以用filter()函数：

const duplicate = arr.filter((ele, index) => {
  return arr.indexOf(ele) !== index;
});

console.log(duplicate); // [ 4, 8 ]

方法四：reduce去重的两种方式

第一种：

const result = arr.reduce((acc, cur) => {
  if (acc.indexOf(cur) === -1) {
    acc.push(cur);
  }
  return acc;
}, []);

console.log(result); // [ 4, 6, 7, 8, 3 ]

第二种：

const result2 = arr.reduce((acc, cur) => {
  return acc.includes(cur) ? acc : [...acc, cur];
}, []);

console.log(result2); // [ 4, 6, 7, 8, 3 ]

方法五：向数组的原型中添加unique去重方法

在javascript中，数组原型构造函数允许你添加新的属性和方法，那我们加个去重方法~

var arr = [4, 4, 6, 7, 8, 8, 3];
// 注意：unique此处使用箭头函数的话，this指向的就不再是arr数组，而是调用时的window对象了！
Array.prototype.unique = function () {
    console.log(this); // arr数组
    var uniqueResultArr = [];
    for (let i = 0; i < this.length; i++) {
        const current = this[i];
        if (uniqueResultArr.indexOf(current) === -1) {
            uniqueResultArr.push(current);
        }
    }
    return uniqueResultArr;
};

console.log(arr.unique()); //  [4, 6, 7, 8, 3]

这里有一个需求：去重数组对象（根据对象中的某个属性），你知道怎么做？

其中涉及到主要知识点：

new Map()：

JavaScript中的对象，本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键，这就给它的使用带来了限制，所以，ES6提供了Map数据结构。

Map对象保存键值对，它类似于对象，但是“键”的范围不局限于字符串，任何值（对象或是原始值）都可以作为一个键或一个值，都ok！

new Map()中无法出现相同的key，所以最终结果中所有的key都是去重后的结果！

举个例子：

new Map([
    [1,{name:'wxw'}],
    ['hah',{name:'dasd'}]
])
// Map(2) {1 => {…}, "hah" => {…}}

Map实例的属性和方法：

• size：返回成员总数
• set(key,value)：添加新键值对
• get(key)：返回某个指定元素
• has(key)：是否存在某个指定元素
• delete(key)：删除某个元素
• clear()：清空

Map实例的遍历方法：

• keys()：返回键的遍历器
• values()：返回值的遍历器
• entries()：返回键值对的遍历器
• forEach()：遍历Map的所有元素

var users = [
  { name: "wxw", age: 23, address: "chinese" },
  { name: "wxw", age: 23, address: "chinese" },
  { name: "gxd", age: 23, address: "chinese" }
];

function uniqueObjArr(data, key) {
    console.log(data.map(x => [key(x), x])); // [ ['wxw',{...}], ['wxw',{...}], ['gxd',{...}]] ]
    console.log(new Map(data.map(x => [key(x), x]))); // Map(2) {"wxw" => {…}, "gxd" => {…}}
    return [...new Map(
        data.map(x => [key(x), x])
    ).values()];
}

// [{"name":"wxw","age":23,"address":"chinese"},{"name":"gxd","age":23,"address":"chinese"}]
console.log(JSON.stringify(uniqueObjArr(users, it => it.name)));

参考链接

数组去重的12种方法

js数组去重的7种方法

数组去重-Map