JS数组去重

本文详细介绍了在JavaScript中对数组进行去重的十种不同方法,包括使用ES6的Set、嵌套循环、indexOf、Sort、对象属性、includes、filter、递归、Map以及reduce+includes。每种方法都有其适用场景和优缺点,例如Set方法简洁高效但不兼容老版本浏览器,而利用对象属性去重则可能存在一些缺陷。此外,还展示了如何统计数组中不重复元素的个数。
摘要由CSDN通过智能技术生成

一、ES6中 new Set方法

const list1 = [1, 2, 3, 7, 11, 56, 3, 2, 4, 5];
const list2 = new Set(list1);
console.log(list2);

//由结果可知,返回了一个可迭代的Set对象,此时还需要把Set对象转为数组。此时可以用到Array.from()。
//**Array.from()** 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例.
const list3 = Array.from(new Set([null, null, undefined, 12, undefined, 7, 2, 1, 22, 2, function a(){}, function a(){}, {}, {}]));
//这种方式不考虑兼容性,且去不掉重复的function和{}
var arr=[];
var arr1=Array.from(new Set(arr));
//简化
var arr2=[ ... new Set(arr)];

二、嵌套的for循环

const list3 = [null, null, undefined, undefined, {}, {}, function q() {}, function q() {}, 34, 2, 1, 2];
for(let i = 0; i < list3.length; i++) {
  for (let j = i + 1; j < list3.length; j++) {
    if (list3[i] === list3[j]) {
      list3.splice(j, 1); // 将重复的数据删掉一个
      j--; // 因为删除掉了一个元素,就从这个元素的索引重新开始
    }
  }
}
//返回的结果也没有把function和对象给去掉。

三、indexOf

//注:array.indexOf(item,statt) 返回数组中某个指定的元素的位置,没有则返回-1
var arr =[1,-5,-4,0,-4,7,7,3];
function unique(arr){
    var arr1 = [];       // 新建一个数组来存放arr中的值 
    for(var i=0,len=arr.length;i<len;i++){
        if(arr1.indexOf(arr[i]) === -1){
            arr1.push(arr[i]);
        }
    }
 	return arr1;
}
console.log(unique(arr));    // 1, -5, -4, 0, 7, 3

四、Sort(相邻元素对比法)

//注:array.sort( function ) 参数必须是函数,可选,默认升序
var arr =  [5,7,1,8,1,8,3,4,9,7];
function unique( arr ){
    arr = arr.sort();
    console.log(arr);

    var arr1 = [arr[0]];
    for(var i=1,len=arr.length;i<len;i++){
       if(arr[i] !== arr[i-1]){
          arr1.push(arr[i]);
       }
    }
    return arr1;
}
console.log(unique(arr))l;   //  1, 1, 3, 4, 5, 7, 7, 8, 8, 9

五、利用对象的属性不能相同的特点去重(不建议用,有缺陷)

注:用数组项作为对象的属性会自动去除相同的值

				var arr = [1,3,8,9,3,5,4,4,6,6,2];
                function unique(arr){
                    var arr1 = [];
                    var obj = {};
                    for(var i =0,len=arr.length;i<len;i++){
                        if(!obj[arr[i]]){
                            arr1.push(arr[i]);
                            obj[arr[i]] = 1;
                        }
                        else{
                            obj[arr[i]]++;
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr));   //  1, 3, 8, 9, 5, 4, 6, 2

六、利用数组的includes去重

//注:arr.includes(指定元素(必填),指定索引值(可选,默认值为0) ),有值返回true,没有则返回false
var arr = [-1,0,8,-3,-1,5,5,7];
                function unique( arr ){
                    var arr1 = [];
                    for(var i=0,len=arr.length;i<len;i++){
                        if( !arr1.includes( arr[i] ) ){      // 检索arr1中是否含有arr中的值
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr));      //  -1, 0, 8, -3, 5, 7

七、利用数组的filter方法去重

//注:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
//array.filter(function(currentValue,index,arr),thisValue)
var arr = [1,2,8,9,5,8,4,0,4];
                /*
                    模拟: 原始数组:[1,2,8,9,5,8,4,0,4]
                            索引值:0,1,2,3,4,5,6,7,8
                          伪新数组:[1,2,8,9,5,8,4,0,4]
                    使用indexOf方法找到数组中的元素在元素在中第一次出现的索引值
                            索引值:0,1,2,3,4,2,6,7,6
                        返回前后索引值相同的元素:
                          新数组:[1,2,8,9,5,4,0]
                */
                function unique( arr ){
                    // 如果新数组的当前元素的索引值 == 该元素在原始数组中的第一个索引,则返回当前元素
                    return arr.filter(function(item,index){
                        return arr.indexOf(item,0) === index;
                    });
                }
                console.log(unique(arr));    //  1, 2, 8, 9, 5, 4, 0

八、利用函数递归去重

var arr = [1,1,5,6,0,9,3,0,6]
                 function unique( arr ){
                     var arr1 = arr;
                      var len = arr1.length;
                      arr1.sort((a,b)=>{
                          return a-b
                      })
                      function loop(index){
                          if(index >= 1){
                             if(arr1[index] === arr1[index-1] ){
                                 arr1.splice(index,1);
                            }
                             loop(index - 1);  // 递归loop,然后数组去重
                        }
                    }
                    loop(len-1);
                     return arr1
                 }
                 console.log(unique(arr));    //   0, 1, 3, 5, 6, 9

九、利用ES6中的Map方法去重

/*
                  创建一个空Map数据结构,遍历需要去重的数组,把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果。
                */
     let arr = [1, 0, 8, 3, -9, 1, 0, -9, 7]
           function unique(arr) {
                let map = new Map();
                console.log(map)
                //let arr1 = new Array();      // 数组用于返回结果
                let arr1 = []
                    for (let i = 0, len = arr.length; i < len; i++) {
                        if (map.has(arr[i])) {      // 判断是否存在该key值
                            map.set(arr[i], true);
                        }
                        else {
                            map.set(arr[i], false);
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
console.log(unique(arr)); // 1, 0, 8, 3, -9, 7


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

十、利用reduce+includes

function unique(arr){
	return arr.reduce((prev,cur)=>prev.includes(cur)?prev:[ ... prev,cur],[]); 
}

数组中某个元素重复个数

    //统计一个数组中有多少个不重复的单词:
    // 不用reduce时: 
    var arr = ["apple","orange","apple","orange","pear","orange"]; 
    function getWordCnt(){ 
        var obj = {}; 
        for(var i= 0, l = arr.length; i< l; i++){ 
            var item = arr[i]; 
            obj[item] = (obj[item] +1 ) || 1; 
        } 
        return obj; 
    }
    console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
    // 用reduce时: 
    var arr = ["apple","orange","apple","orange","pear","orange"]; 
    function getWordCnt(){ 
        return arr.reduce(function(prev,next){ 
            prev[next] = (prev[next] + 1) || 1; 
            return prev; 
        },{}); 
    } 
    console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值