品易云推流 关闭
文章详情页
文章 > JavaScript > js数组去重方法

js数组去重方法

js数组

头像

宋雪维

2021-01-04 15:45:132727浏览 · 0收藏 · 0评论

JavaScript中,对于数组的操作有很多,因此根据众多数组情况,出现了不同的数组去重方法。本文总结了js数组中常见的四种方法:1、使用indexOf()方法去除重复的元素;2、使用splice()方法与双层循环去除重复的元素;3、使用数组递归去重;4、使用ES6提供的Set结构去除重复的元素。

方法一:使用indexOf()方法去除重复的元素

原理:新创建了一个数组,用indexOf()一次检测b数组中是否有a数组同样的元素,如果没有将该元素添加到b数组中。

function ar(a) {
                   var b=new Array();
                  for(i=0; i<a.length;i++){
                     if(b.indexOf(a[i])==-1){
                        b.push(a[i])
                     }
                  }
 
                  console.log(b)
              }
             var b=Array(1,2,3,4,1,2,3,4,2,1);
             ar(b)

方法二:使用splice()方法与双层循环去除重复的元素

原理:双层循环,比较相同的值,使用splice删除重复元素。

        function unique8(arr) {
            var i,j,len = arr.length;
            for (i = 0; i < len; i++) {
                for (j = i + 1; j < len; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);
                        len--;
                        j--;
                    }
                }
            }
            return arr;
        }
        console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

方法三:使用数组递归去重

原理:运用递归的思想,先排序,然后从最后开始比较,遇到相同,则删除。

      Array.prototype.distinct = function(){
            var arr = this ,
            len = arr.length;
            arr.sort(function(a,b){ //对数组进行排序才能方便比较
                return a-b;
            })
 
            function loop(index){
                if(index >=1){
                    if(arr[index] ===arr[index-1]){
                        arr.splice(index,1)
                    }
                    loop(index-1) //递归loop函数进行去重
                }
 
            }
            loop(len-1)
            return arr;
        }

方法四:使用ES6提供的Set结构去除重复的元素

原理:利用Set结构不能接收重复数据的特点。

          function depute(array){
            return Array.from(new Set(array))
        }
        console.log(depute([1,1,2,33,3,3]))

以上就是小编整理的js数组去重的常见四种方法,大家可以根据具体情况选择合适的方法哦~

关注

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图