JS数组去重

1. 基本数据类型去重
2. 对象数组的去重
3. 插件类库的方法

---

基本数据类型去重

---

方法一：利用ES6的

• （1）Array.from()/扩展运算符

var arr = [1,3,1,4,1,5,6,3,1,2];
function unique(arr){
    return Array.from(new Set(arr));
}

• （2）set

var arr = [1,3,1,4,1,5,6,3,1,2];
function unique(arr){
    return [...new Set(arr)];
}

• （3）map

function unique (arr) { 
    const seen = new Map() 
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1)) 
}

---

方法二：两次遍历

思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中;

原型方法
Array.prototype.unique = function(){
    var newArr = [],
    flag = 1;
    for(var i = 0; i < this.length; i++, flag = 1){
        for(var j = 0; j < i; j++){
            if(this[i] == this[j]){
                flag = 0; //找到相同的数字后，不执行添加数据
            }
        }
        flag ? newArr.push(this[i]) : '';
    }
    return newArr;
}

---

方法三：indexOf

思路：遍历数组，建立新数组，利用indexOf判断是否存在于新数组中，不存在则push到新数组，最后返回新数组
indexOf() :方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有则返回-1

函数封装                                                原型方法
function unique(arr){                                   Array.prototype.unique = function(){
    var newArr = [];                                        var newArr =[];   //一个新的临时数组
    for(var i in arr) {                                     for (var i = 0; i < this.length; i++) {
        if(newArr.indexOf(arr[i]) == -1) {                      if ( newArr.indexof(this[i]) == -1) {
            newArr.push(arr[i])                                     newArr.push(this[i]);
        }                                                       };
    }                                                       }
    return newArr;                                          return newArr;
}                                                       }
var arr = [1,2,3,3,4];

console.log(arr.unique(arr));

---

方法四：对象key值

思路：遍历数组，利用object对象的key值保存数组值(key不重复)，判断数组值是否已经保存在object中，未保存则push到新数组并用object[arrayItem]=true的方式记录保存.
1. 创建一个新的数组存放结果,和一个空对象
2. for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：对比的方法，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

封装函数                                                    原型方法
function unique(arr) {                                 Array.prototype.unique = function(){
  let newArr = [];                                          var newArr = [];
  let json = {};                                            var json = {};
  for(let i=0,l=arr.length;i<l;i++) {                       for(var i = 0; i < this.length; i++){   
    if(!json[arr[i]]) {                                        if (!json[JSON.stringify(this[i])]){
      json[arr[i]] = true;                                         newArr.push(this[[i]]);
      newArr.push(arr[i]);                                         json[JSON.stringify(this[i])] = 1;
    }                                                         }
  }                                                        }
  return newArr;                                           return newArr;
}                                                       }
                                                        var s1=[{"a":10,b:20},{"a":10,b:20},{"a":60,c:30},{"f":60,d:30}];
                                                        var arr = [112,112,34,'hello',112,112,34,'hello','str','str1'];
                                                        alert(arr.unique());

评价： 推荐方法

---

方法五：先排序，再比较

思路：先排序，新数组最后一项为旧数组第一项，每次插入判断新数组最后一项是否与插入项相等
如果不相同，则将该元素存入结果数组中；

封装函数                                                         原型方法
function unique(arr) {                                          Array.prototype.unique = function(){
    var newArr = [];
    var last;
    arr.sort();                                                     this.sort();
    lat = arr[0];                                                   var newArr = [this.[0]];
    newArr.push(arr[0]);
    for (var i = 1; i < arr.length; i++) {                          for( var i = 1; i < this.length; i++){
        if (arr[i] != last) {                                            if(this[i] !== newArr[newArr.length-1]){
            newArr.push(arr[i]);                                            newArr.push(this[i]);
            last = arr[i];  
        }                                                               }
    }                                                               }
    return newArr;                                                  return newArr;
}                                                               }

var arr = [1,2,3,3,4];
console.log(arr.unique());

评价：
比两次遍历效率高
问题：（局限性）因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了。

---

对象数组的去重

---

方法一：利用对象的键名不能重复的特点

 function unique(arr){
   let unique = {};
   arr.forEach(function(item){
     unique[JSON.stringify(item)]=item;//键名不会重复
   })
   arr = Object.keys(unique).map(function(u){ 
   //Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
     return JSON.parse(u);
   })
   return arr;
 }

• map方法使用示例:

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

• 存在的问题:{x:1,y:2}与{y:2,x:1}通过JSON.stringify字符串化值不同，但显然他们是重复的对象.

---

方法二：还是利用对象的键名无法重复的特点,必须知道至少一个对象数组中的对象的属性名

var frames = [
         {name:"vue",artist:"mvvm"},
         {name:"vue",artist:"mvvm"},
         {name:"react",artist:"vdom"},
         {name:"react",artist:"vdom"},
        {artist:"angular",name:"data"}
    ];

function unique(songs){
    let result = {};
    let finalResult=[];
    for(let i=0;i<frames.length;i++){
        result[frames[i].name]=frames[i];   
    }
    for(item in result){
        finalResult.push(result[item]);
    }
    return finalResult;
}
console.log(unique(frames));

---

插件类库的方法

• jQuery: $.unique

• underscore: _.unique

• lodash