数组去重总结

起因:项目过程中需要解决一个去重数组的需求。
数组去重方法不一,本文根据去重输出结果的不同,来分类总结出对应的方法,方便应用到各个场景。

去重(无序型)

var arr= [1,2,3,4,3,1,7,2,8,9,1,4,5,6]; 
function uniqueArray(arr){
        var obj = {};
        for (var i = 0,len=arr.length; i < len; i += 1) {
            obj[arr[i]] = arr[i];
        }
        return Object.keys(obj);
    }
uniqueArray(arr);

输出结果:["1", "2", "3", "4", "5", "6", "7", "8", "9"]

去重(有序型)

方法一

var arr= [1,2,3,4,3,1,7,2,8,9,1,4,5,6];  
function removeDuplicatedItem(ar) {
     var ret = [];
 
     for (var i = 0, j = ar.length; i < j; i++) {
         if (ret.indexOf(ar[i]) === -1) {
             ret.push(ar[i]);
         }
     }
 
     return ret;
 }
removeDuplicatedItem(arr);

输出结果: [1, 2, 3, 4, 7, 8, 9, 5, 6]
方法二

let arr = [1,2,3,2,4,5,6,3,10];
let b = [...new Set(arr)];

输出结果: [1, 2, 3, 4, 5, 6, 10]

反向去重(重复元素保留的是最后出现的一个,不是第一个)

  • 方法一:上述有序型稍作的输入和输出都反向一下即可;
 var arr= [1,2,3,4,3,1,7,2,8,9,1,4,5,6]; 
 arr = arr.reverse();//数组先反向
function removeDuplicatedItem(ar) {
     var ret = [];
 
     for (var i = 0, j = ar.length; i < j; i++) {
         if (ret.indexOf(ar[i]) === -1) {
             ret.push(ar[i]);
         }
     }
 
     return ret;
 }
var bb =removeDuplicatedItem(arr);
bb.reverse();//数组结果反向

输出结果: [3, 7, 2, 8, 9, 1, 4, 5, 6]

  • 方法二:更改for循环(精髓与方法一相同)
var aa= [1,2,3,4,3,1,7,2,8,9,1,4,5,6]; 
function unique() {
var result = [], isRepeated;
for (var i = aa.length-1, len = aa.length; i >= 0; i--) {
   isRepeated = false;
   for (var j = 0, lenj = result.length; j < lenj; j++) {
     if (aa[i]== result[j]) { 
       isRepeated = true;
       break;
     }
   }
   if (!isRepeated) {
      result.push(aa[i]);
    }
}
result.reverse();
}

输出结果:[3, 7, 2, 8, 9, 1, 4, 5, 6]

  • 方法三:ES6方法(阿四友情赞助,感谢!)
function filterArray(arr) {
        return (Array.from(new Set((arr.slice()).reverse()))).reverse();
    }

思路解说:reverse第一次反向,能使数组按照一般的有序型去重方法去处理,reverse第二次反向,使数组输出顺序按照arr数组原来的前后顺序排列展示。slice防止reverse方法对arr数组的值直接操作导致原数组arr的改变。

输入:[1,2,3,4,3,1,7,2,8,9,1,4,5,6]

输出结果:[3, 7, 2, 8, 9, 1, 4, 5, 6]

  • 方法四:结合F7提供的方法,灵活应用(嘉哥友情赞助,赞赞!!)

    $.unique(arr.slice().reverse()).reverse()

解说:arr是输入的数组,$是F7的赋值对象,unique是F7的方法

输入:[1,2,3,4,3,1,7,2,8,9,1,4,5,6]

输出结果:[3, 7, 2, 8, 9, 1, 4, 5, 6]

完美 ending!!!!!