【技术】js数组查重和去重的简单方法

上算法课没弄懂查重的思路，现在在项目中终于要用到查重复的方法了，上网查了很久，发现不是看不懂，就是存在一些问题，终于利用比较简单的方法可以实现查重方法，还可以输出下标，简单又实用，分享给大家：

var ary = new Array("1", "11", "33", "33");

 for (var i = ary.length-1; i >= 0; i--) {
     if (ary.indexOf(ary[i]) != ary.lastIndexOf(ary[i])) {
         console.log("下标为："+i);
         console.log("数组中有重复元素：" + ary[i]);
     }
 }   

//下标为：3
//数组中有重复元素：33
//下标为：2
//数组中有重复元素：33

思路：

从头开始找的下标 != 从尾部开始找的下标 ，说明有重复的。 2022年6月30日发现NaN通过这个方法不能去重，温馨提示一下，但下面介绍的通过借助es6的new Set去重方法可以，用includes方法也可以，但由于NaN不等于NaN所以如果用过等于来判断要谨慎了

附：
1.将数组去重，并输出没有重复的数组：

 * @param {*} array - 数组去重
 * @returns
 */
function hugUniqArry(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var ary = new Array("1", "11", "33", "33");    
hugUniqArry(ary); // ["1", "11", "33"]

es6新特性Set去重更简单，支持NaN元素

Set类似原数组，不过成员值都是唯一，没有重复的，可以帮我们轻松去重，如下：

let arr= [...new Set([1,1,2,2])];
console.log(arr); // [1,2]

2022年7月4日发现，当去重数组元素有{}对象，new Set也无法去重，会当作两个不同的引用呢，这个要在实际情况自己判断{}是不是重复的情况

var a = [1,1,{},{},'{}'];
console.log([... new Set(a)]);

运行结果截图：

2.可以输出 重复的次数，下标

function arrayFilter(arr) {
      let hash = {};
      for (let i = 0; i < arr.length; i++) {
        if (hash[arr[i]]) {
          hash[arr[i]].count++;
          hash[arr[i]].index.push(i);
        } else {
          hash[arr[i]] = {
            el: arr[i],
            count: 1,
            index: [i]
          };
        }
      }
      return hash;
 }

 arrayFilter(["1", "11", "33", "33"])  //{1: {…}, 11: {…}, 33: {…}}   
 // {"1":{"el":"1","count":1,"index":[0]},"11":{"el":"11","count":1,"index":[1]},"33":{"el":"33","count":2,"index":[2,3]}}

截图：

3.通过includes简单去重，支持NaN元素

var arr = [1,'1','2',NaN,2,4,undefined,NaN,1,null],temp=[];
arr.forEach((item,index)=>{
    if(!temp.includes(item)){
        temp.push(item);
    }
});
console.log(temp); // [1, '1', '2', NaN, 2, 4, undefined, null]

图片演示：