JS数组去重的方法及原理(全)

前端遇到最多的无非就是循环，判断，处理后台返回的数据了，那么今天介绍一下数组去重的几种常用方法。

一.ES6语法，new Set()方法去重

举个栗子

let arr = [a,b,c,c,d];
let set = new Set(arr);
let newArr = Array.from(set);

最后得出结果newArr=[a,b,c,d]
这个是目前最简单的去重方法，但是这个方法不支持对象方法，可以支持一些简单的数据格式去重效率还是很快的，如果是复杂数据格式建议用一下一些方法。

二.定义一个去重方法，直接调用。

新建一个数组，遍历传入数组，值不在新数组就push进该新数组中

function setarr(array){
  var newarr = []; 一个新的临时数组
  for(var i = 0; i < array.length; i++){
    if(newarr.indexOf(array[i]) == -1){
     newarr.push(array[i]);
    }
  }
  return newarr;
}
var newArray = [1,2,2,3];
console.log(setarr(newArray));// [1, 2, 3]

这个方法可以处理简单数据也可处理复杂数据

三.利用数组原型对象splice 方法加上双重for循环

function unique(arr) {
            var i,j,len = arr.length;
            for (i = 0; i < len; i++) {
                for (j = i + 1; j < len; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j--;
                    }
                }
            }
            return arr;
        }
        console.log(unique([1, 1, 2, 3]))//[1,2,3]

四.如果遇到两个数组比对去重的话我们可以用concat()方法或者万能运算符…先合并数组。

concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。该方法会产生一个新的数组。
…方法可以直接拼接两个数组。
然后在调用上面任何一个方法即可实现数组去重。

五. 复杂数组数据，根据id赛选，利用两层循环+数组的splice方法

let arr = JSON.parse(JSON.stringify(res.data.list));
          let len = arr.length;
          for (let i = 0; i < len; i++) {
            for (let j = i + 1; j < len; j++) {
              if ( arr[i].id=== arr[j].id) {
                arr.splice(j, 1);
                len--; // 减少循环次数提高性能
                j--; // 保证j的值自加后不变
              }
            }
          }

总结:

不管什么方法，我们不难发现，其实原理都是差不多，都是循环加判断实现，个人觉得还是自己封装的去重方法要好用很多，可以处理各种复杂数据，但是别人封装的方法大部分只支持一些简单的数据去重，所以建议大家没事可以自己试着多封装方法，好用的可以存个档，用的时候直接复制会方便很多，网上方法太多了，找起来也很麻烦，好啦，今天的分享就这些，，希望能给你带来帮助！