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.mapvar 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