这篇文章给大家分享的是js 数组去重的方法，对于“数组去重”问题实际工作或面试中都是常遇到的，而实现数组去重的方法有很多，感兴趣的朋友就跟着小编一起来了解一下这11种js数组去重的方法吧。

    1.将数组的每一个元素依次与其他元素做比较，发现重复元素，删除

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5, 5]
    function noRepeat1(arr) {
        for(var i = 0; i < arr.length-1; i++){
            for(var j = i+1; j < arr.length; j++){
                if(arr[i]===arr[j]){
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        return arr;
    }
    var arr2 = noRepeat1(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

    2.借助indexOf()方法判断此元素在该数组中首次出现的位置下标与循环的下标是否相等

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat2(arr) {
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) != i) {
                arr.splice(i,1);//删除数组元素后数组长度减1后面的元素前移
                i--;//数组下标回退
            }
        }
        return arr;
    }
    var newArr = noRepeat2(arr);
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

    3.利用数组中的filter方法

var arr = ['apple','banana','pear','apple','orange','orange'];
console.log(arr)    //["apple", "banana", "pear", "apple", "orange", "orange"]
var newArr = arr.filter(function(value,index,self){
    return self.indexOf(value) === index;
});
console.log(newArr);    //["apple", "banana", "pear", "orange"]

    4.借助新数组 通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5];
    console.log(arr)    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5]
    function noRepeat4(arr) {
        var ret = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr.indexOf(arr[i]) == i) {
                ret.push(arr[i]);
            }
        }
        return ret;
    }
    var arr2 = noRepeat4(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

    5.利用空对象来记录新数组中已经存储过的元素

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr)    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    var obj={};
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(!obj[arr[i]]){
            obj[arr[i]]=true;
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);    //[1, 23, 3, 5, 6, 7, 9, 8]

    6.借助新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat6(arr){
        var newArr = [];
        for(var i = 0; i < arr.length; i++){
            if(newArr.indexOf(arr[i]) == -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var arr2 = noRepeat6(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 9, 8]

    7.借助新数组，判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中（原数组长度不变但被按字符串顺序排序）

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat7(arr) {
        var ret = [],
            end;//临时变量用于对比重复元素
        arr.sort();//将数重新组排序
        end = arr[0];
        ret.push(arr[0]);
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] != end) {//当前元素如果和临时元素不等则将此元素添加到新数组中
                ret.push(arr[i]);
                end = arr[i];
            }
        }
        return ret;
    }
    var arr2 = noRepeat7(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 8, 9]

    8.此方法没有借助新数组直接改变原数组,并且去重后的数组被排序

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
    console.log(arr);    //[1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5]
    function noRepeat8(arr) {
        var end;//临时变量用于对比重复元素
        arr.sort();//将数重新组排序
        end = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] == end) {//当前元素如果和临时元素相等则将此元素从数组中删除
                arr.splice(i,1);
                i--;
            }else{
                end = arr[i];
            }
        }
        return arr;
    }
    var arr2 = noRepeat8(arr);
    console.log(arr2);    //[1, 23, 3, 5, 6, 7, 8, 9]

    9.双层循环改变原数组

var arr = [1,1,2,2,3,3,4,4,5,5,4,3,1,2,6,6,6,6];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 1, 2, 6, 6, 6, 6]
    function noRepeat9(arr){
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr.length; j++) {
                if (arr[i] == arr[j] && i != j) {//将后面重复的数删掉
                    arr.splice(j, 1);
                }
            }
        }
        return arr;
    }
    var arr2  = noRepeat9(arr);
    console.log(arr2);    //[1, 2, 3, 4, 5, 6]

    10.借助新数组

var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        var repArr = [];//接收重复数据后面的下标
        //内层循环找出有重复数据的下标
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                repArr.push(j);//找出后面重复数据的下标
            }
        }
        //console.log(repArr);
        if (repArr.length == 0) {//若重复数组没有值说明其不是重复数据
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);    //[5, 4, 3, 2, 1]

    11.借助ES6提供的Set结构

var arr = [1,1,2,2,3,3,4,4,5,5,4,3,2,1,1,1];
    console.log(arr);    //[1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 4, 3, 2, 1, 1, 1]
    function noRepeat11(arr){
        var newArr = [];
        var myset = new Set(arr);//利用了Set结构不能接收重复数据的特点
        for(var val of myset){
            newArr.push(val)
        }
        return newArr;
    }
    var arr2 = noRepeat11(arr)
    console.log(arr2);    //[1, 2, 3, 4, 5]

    以上就是关于JS数组去重的11种方法介绍，上述示例有一定的参考价值，有需要的朋友可以参考，希望本文对大家有帮助，想要了解更多js 数组去重的内容，大家可以关注其他相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue项目出现缩进报错的问题怎样解决

  idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧

• 基于VUE如何利用minio实现上传文件

  最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片,下面这篇文章主要给大家介绍了关于Vue中通过minio上传文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

• mock.js配置步骤是什么，使用mock能解决什么问题

  目录mockjs配置和使用方式需求步骤mock使用及mock无侵入的解决什么是mock？为什么要用到mock？如何使用mock？mock无侵入式配置mockjs配置和使用方式需求在前后端分离的开发中，需要前后端同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以

• 用JS怎样做鼠标移过显示二级下拉菜单？

  用JS怎样做鼠标移过显示二级下拉菜单？也就是当当鼠标经过一级菜单时，显示二级菜单，鼠标离开时隐藏。这个效果在很多网站设计中都会看到，小编觉得比较实用，因此分享给大家做个参考，那么接下来我们就看看怎样做吧。

• vue如何实现新闻列表垂直滚动，方法是什么

  本文实例为大家分享了vue实现列表垂直无缝滚动的具体代码，供大家参考，具体内容如下实现新闻列表的轮播（如下图）上代码封装的so-marquee.vuetemplate    div        class=marquee-wrapper        :style={ width: realWidth + px }