JavaScript中数组去重的几种方法

JavaScript中数组去重的几种方法

正常情况下，数据去重的工作一般都是由后端同事来完成的，但是前端也要掌握好处理数据的能力，万一去重的工作交给我们大前端处理，我们也不能怂呀。现在我总结了一些去重的方法，希望对大家有点帮助。

方法一：new Set()实现数组去重

ES6 提供了新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。Set函数可以接受一个数组，用于初始化。根据 Set的数据特性，我们可以实现数组去重。

let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
let list1 = Array.from(new Set(list)); //  [ 1, "a", true, false, null, "", undefined ]
let list2 = [...new Set(list)]; //  [ 1, "a", true, false, null, "", undefined ]

方法二：some()+循环去重

some() 方法用于检测数组中的元素是否满足指定条件（函数提供） 。 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素，则返回false。 我们可以定义一个新数组来承接没有重复的数据，遍历原始数组的时候，用新数组来判断数据是否已经出现过。

 function distinct(list) {
     let result = [list[0]];// 用于承接没有重复的数据，初始时将原始数组的第一个值赋给它。
     for (let i = 1; i < list.length; i++) {
         // 判断结果数组中是否存在一样的值，若果没有的话则将数据存入结果数组中。
         if (!(result.some(val => list[i] === val))) {
             result.push(list[i]);
         }
     }
     return result;
 }
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct(arr); // [ 1, "a", true, false, null, "", undefined ]

方法三：双重for循环去重

双重for循环，第一层循环确保数组中的每一项都能被比较，第二层循环确保被比较项后的每一项都能跟被比较项比较。

function distinct2(list) {
    for (let i = 0; i < list.length; i++) {
        for (let j = i + 1; j < list.length; j++) {
            // 后面数据的若跟前一项数据相同，则重复，需要去除。
            if (list[i] === list[j]) {
                list.splice(j, 1); // 去除后面的相同项
                j--;
            }
        }
    }
    return list;
}
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]

方法四：hasOwnProperty()方法去重

hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性，而不是从原型链继承的。如果该属性是自有属性，那么返回 true，否则返回 false。

function unique(arr) {
  var obj = {}; // 用来记录数组中的数据
  return arr.filter(function(item, index, arr){
      // 如果记录对象中存在某个数据，则返回false过滤掉；否则obj进行记录并筛选出来
      return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
unique(arr) //  [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]

方法五：利用filter()+indexOf()方法去重

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    // 从数组0位开始查，如果当前元素在原始数组中的第一个索引==当前索引值，说明它是第一次出现。
    return arr.indexOf(item, 0) === index;
  });
}
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
unique(list); //  [ 1, "a", true, false, null, "", undefined ]

此外，数组去重还可以利用filter()、includes()等方法实现，但是思路都跟上面几种方法类似，这里就不一一列举了。