JS数组怎么去重？| JavaScript中数组去重的14种方法

目录

一、利用for循环嵌套去重

二、利用splice() + for循环嵌套（ES5中最常用）

三、利用indexOf() + for循环去重

四、利用sort() + for循环去重

五、利用includes() + for循环去重（ES7）

六、利用Object键值对及其hasOwnProperty()去重

七、利用filter() + indexOf()去重

八、利用递归去重

九、利用Set数据结构（ES6）

十、利用Map数据结构去重（ES6）

十一、利用Map数据结构 + filter()

十二、利用reduce() + includes()去重

十三、利用findIndex() + Object.is()去重

十四、对象数组去重 - 🌤️ 

🌹 方法总结

💌 写在最后

一、利用for循环嵌套去重

var array = [ 0, 0, 1, 1, '1', '1', 'true', 'true', true, true, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 'a', 'a', {}, {}, { a: 1 }, { b: 2 }, { a: 1 }];

function unique(array) {
    // res用来存储结果
    var res = [];
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (array[i] === res[j]) {
                break;
            }
        }
        // 如果array[i]是唯一的，那么执行完循环，j等于resLen
        if (j === resLen) {
            res.push(array[i])
        }
    }
    return res;
}
// NaN 和 对象 无法去重
console.log(unique(array)); 
// [0, 1, '1', 'true', true, false, undefined, null, NaN, NaN, 'NaN', 'a', {…}, {…}, {…}, {…}, {…}]

输出结果：NaN 和 对象 无法去重，其他都可以去重（包括null）

我的结论：for循环 判断依据是全等===——值和类型都相同，才去重

二、利用splice() + for循环嵌套（ES5中最常用）

利用for循环嵌套，然后splice去重：将数组中的每一个元素依次与其他元素作比较，发现重复元素，删除。

var arr=[1,1,2,'1','true','true',true,true,15,15,false,false,undefined,undefined,null,null,NaN, NaN,'NaN',0,0,'a','a',{},{},{a:1},{b:2},{a:1}];

function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        //如果第一个等同于第二个，splice方法删除第二个
        arr.splice(j, 1);

        j--;
      }
    }
  }
  return arr;
}

console.log(arr[4],typeof arr[4],arr[6],typeof arr[6]) // true string true boolean
console.log(arr[4]==1,arr[6]==1) // false true

// NaN 和 {} 没有去重，且两个 null 直接消失了
// 如果第一个等同于第二个，splice方法删除第二个，所以1跟'1'、true留1，false跟0留false
console.log(unique(arr)); // [1, 2, 'true', 15, false, undefined, NaN, NaN, 'NaN', 'a', {…}, {…}, {…}, {…}, {…}]

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

输出结果：NaN 和 对象 无法去重，且null会被忽略掉，直接消失了

我的结论：splice() 判断依据是值等==——值相同

字符串类型的数字、boolean类型：true、false，比较时会转为number类型的数字

三、利用indexOf() + for循环去重

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

提示：如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法。

JavaScript Array indexOf() 方法 | 菜鸟教程

PS：JavaScript String 对象中的 indexOf() 与 lastIndexOf() 方法的用法与此类似

JavaScript indexOf() 方法 | 菜鸟教程

注意：JavaScript String 对象中的 indexOf() 与 lastIndexOf() 方法区分大小写。

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

输出结果：NaN 和 对象 无法去重，indexOf() 方法无法识别数组的 NaN 和 {} 成员。

我的结论：indexOf() 判断依据是全等===——值和类型都相同，才去重

四、利用sort() + for循环去重

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

◾ 默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

◾ 使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

注意： 这种方法会改变原始数组！

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。 

var array = [1,1,2,'1','true','true',true,true,15,15,false,false,undefined,undefined,null,null,NaN, NaN,'NaN',0,0,'a','a',{},{},{a:1},{b:2},{a:1}];
function unique(array) {
    if(!Array.isArray(array)) {
        console.log('type error');
        return;
    }
    arr = array.sort(); // 对array进行排序，sort()会改变原数组
    var arrys = [arr[0]]; // 新建一个数组，用于存放不包含重复元素的数组
    for(var i = 1; i < arr.length; i++) {
        if(arr[i] != arr[i-1]) {
            arrys.push(arr[i]);
        }
    }
    return arrys;
}
// NaN 和 对象 无法去重，其他都可以去重（包括null）
console.log(unique(array)); // [0, 1, 15, 2, NaN, NaN, 'NaN', {…}, {…}, {…}, {…}, {…}, 'a', false, null, 'true', true, undefined]

输出结果：NaN 和 对象 无法去重，其他都可以去重（包括null）

我的结论：sort()  判断依据是全等===——值和类型都相同，才去重

五、利用includes() + for循环去重（ES7）

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

JavaScript Array includes() 方法 | 菜鸟教程

var arr=[1,1,2,'1','true','true',true,true,15,15,false,false,undefined,undefined,null,null,NaN, NaN,'NaN',0,0,'a','a',{},{},{a:1},{b:2},{a:1}];
function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log("type error!");
    return;
  }

  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (!array.includes(arr[i])) { // includes 检测数组是否有某个值
      array.push(arr[i]);
    }
  }
  return array;
}

// 对象 无法去重，其他都可以去重（包括NaN、null）
console.log(unique(arr)); // [1, 2, '1', 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}, {…}, {…}, {…}, {…}]

输出结果：对象 无法去重，其他都可以去重（包括NaN、null）

我的结论：includes() 判断依据是全等===——值和类型都相同，才去重

PS：JavaScript String 对象也有 includes() 方法。