常用的JS数组去重方法大全

青旅半醒 2023-07-22 03:43 8阅读 0赞

> ### 写在前面： ###
> 
> **我们要想使用数组去重，那就必须对数组有一定的了解，关于JS数组的一些方法以及使用，可参考：  
> [①JavaScript 内置对象之-Array][JavaScript _-Array]  
> [②ES5新增数组方法][ES5]  
> [③浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法][JavaScript_ES6_Set_Map_Array.from]**

--------------------

#### `下面进入正题：利用JS的数组实现去重的目的` ####

JS数组去重方法有很多，相信一些小伙伴也掌握了好多种方法，那接下来我就介绍一些比较常用的方法供大家参考。

###### 方法1：使用indexOf()方法去除重复的元素 ######

indexOf方法返回给定元素在数组中第一次出现的位置，返回结果是匹配开始的位置。如果没有出现则返回-1

例：

var arr = [1,1,2,2,3,3,4,4];
    var newArr = [];
    for(var i=0,len=arr.length;i<len;i++){ 
    if(newArr.indexOf(arr[i]) == -1){ 
    newArr.push(arr[i]);
    }
    }
    console.log(newArr);

结果：  
![在这里插入图片描述][20200404122901604.png]

###### 方法2：使用lastIndexOf()方法去除重复的元素 ######

*  lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1;
 *  lastIndexOf方法的用法跟indexOf方法一致，主要的区别lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配；
 *  另外，lastIndexOf的第二个参数表示从该位置起向前匹配。

例：

function noRepeat(arr) { 
    var res = [];
    for (var i = 0; i < arr.length; i++) { 
        res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]);
    }
    return res;
    }
    console.log(noRepeat([1, 1, 2, 2, 3, 3, 4, 4]));

结果：  
![在这里插入图片描述][2020040412193232.png]

###### 方法3：使用filter()与indexOf()方法去除重复的元素 ######

*  filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回；
 *  它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回；
 *  该方法不会改变原数组；
 *  filter方法的参数函数可以接受三个参数：当前成员，当前位置和整个数组；
 *  filter()去除重复元素依靠的是indexOf的属性，即总是返回第一个元素的位置，后面的重复元素位置与indexOf返回的位置不相等，所以filter()可以过滤掉它们。

例：

var arr = [1,1,2,2,3,3,4,4];
        var newArr = arr.filter(function(value,index,self){ 
        return self.indexOf(value) === index;
    });
    console.log(newArr);

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法4：使用ES6提供的Set结构去除重复的元素 ######

主要利用Set结构不能接收重复数据的特点。

例：

var arr = [1,1,2,2,3,3,4,4];
        function noRepeat(arr){ 
            var newArr = [];
            var myset = new Set(arr);
            for(var val of myset){ 
            newArr.push(val);
    }
        return newArr;
    }
    var arr2 = noRepeat(arr);
    console.log(arr2);

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法5：使用ES6提供的Set与扩展运算符去除重复的元素 ######

ES6的出现，真真是极方便的~~~

例：

var arr = [1,1,2,2,3,3,4,4];
    function norepeat(arr) { 
        let set = new Set(arr);
        arr = [...set];
        return arr;
    }
    console.log(norepeat(arr));

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法6：使用set与Array.from()方法去除重复的元素 ######

Array.from方法可以将 Set 结构转为数组。

例：

var arr = [1,2,2,2,3,3,4,4];
    var newArr = Array.from(new Set(arr));
    console.log(newArr);

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法7：使用splice()方法与双层循环去除重复的元素 ######

splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。

例：

var arr = [1,1,2,2,3,3,4,4];
    function noRepeat(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  = noRepeat(arr);
    console.log(arr2);

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法8：使用includes()方法去除重复的元素 ######

includes()方法用于判断字符串是否包含指定的子字符串，如果找到匹配的字符则返回true，否则返回false。

例：

function noRepeat(arr) { 
        var newArr = [];
        for (var i = 0; i < arr.length; i++) { 
            if (!newArr.includes(arr[i])) { 
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    console.log(noRepeat([1,1,2,2,3,3,4,4]));

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法9：使用forEach()和includes()方法去除重复的元素 ######

*  forEach方法是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。
 *  forEach的参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

例：

function noRepeat(arr) { 
        var newArr = [];
        arr.forEach(item => { 
            return newArr.includes(item) ? '' : newArr.push(item)
        });
        return newArr;
    }
    console.log(noRepeat([1,1,2,2,3,3,4,4]));

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法10：利用空对象来记录新数组中已经存储过的元素 ######

例：

var arr = [1,1,2,2,3,3,4,4];
    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);

结果：  
![在这里插入图片描述][20200404122831507.png]

###### 方法11：使用sort()方法去除重复的元素 ######

使用sort()方法先将原数组排序，然后与相邻的进行比较，如果不同则存入新数组。（原数组长度不变，但要注意：sort方法不是按照大小排序，而是按照字典顺序）

例：

var arr = [1,1,2,2,3,3,4,4];
    function noRepeat(arr) { 
        var ret = [];
        arr.sort();  
        var res = arr[0];
        ret.push(arr[0]);
        for (var i = 1; i < arr.length; i++) { 
            if (arr[i] != res) {  
                ret.push(arr[i]);
                res = arr[i];
            }
        }
        return ret;
    }
    var arr2 = noRepeat(arr);
    console.log(arr2);

结果：  
![在这里插入图片描述][20200404122831507.png]

--------------------

**`鄙人才疏学浅，如有纰漏，望各路巨佬不吝赐教~`**

[JavaScript _-Array]: https://blog.csdn.net/weixin_42881768/article/details/104461531
[ES5]: https://blog.csdn.net/weixin_42881768/article/details/104494939
[JavaScript_ES6_Set_Map_Array.from]: https://blog.csdn.net/weixin_42881768/article/details/104941837
[20200404122901604.png]: /images/20230528/dcc8d882b7ee49f8ab01c7721631279f.png
[2020040412193232.png]: /images/20230528/3d6a68bd37af4f6f99dc5c8ac497ae37.png
[20200404122831507.png]: /images/20230528/4ac13f85b66443c2a2249e312dad3074.png

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关常用的JS数组去重方法大全

> 写在前面： > > 我们要想使用数组去重，那就必须对数组有一定的了解，关于JS数组的一些方法以及使用，可参考： > [①JavaScript 内置对象之-Arra

青旅半醒/ 2023年07月22日 03:43/ 0 赞/ 9 阅读

相关 js的数组去重方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

旧城等待，/ 2023年06月22日 10:23/ 0 赞/ 124 阅读

相关 js数组去重的10种有效方法 vue 数组去重

方法一思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。 function unique(arr) {

亦凉/ 2022年12月13日 14:06/ 0 赞/ 257 阅读

相关常用的JS数组去重方法大全

[https://blog.csdn.net/weixin\_42881768/article/details/105308105][https_blog.csdn.net_w

浅浅的花香味﹌/ 2022年12月07日 01:19/ 0 赞/ 357 阅读

相关 js 数组去重的方法

//set类似数组但他本身的元素是唯一的不会重合； //-------------去重方法1--------------------

末蓝、/ 2022年05月08日 12:26/ 0 赞/ 232 阅读

相关 js数组去重方法

var arrayList = []; arrayList = arrayList.filter(function (element, index,

约定不等于承诺〃/ 2022年04月18日 06:19/ 0 赞/ 267 阅读

相关 js数组去重的方法

使用ES6的Set去除数组的重复元素方法一 Array.from()方法可以将Set结构转化为数组结构 function dedupe(array) {

爱被打了一巴掌/ 2022年04月13日 08:56/ 0 赞/ 262 阅读

相关 js数组去重

用es6的Set 或者用filter let arr = [1,2,3,3,6,6,77,9,3,2,1,23,68] let result = [.

阳光穿透心脏的1/2处/ 2021年11月09日 05:28/ 0 赞/ 493 阅读

相关 JS数组去重常用的几种方法

一、双重循环去重 function unique(arr) { if (!Array.isArray(arr)) return // 判断传入的是

ゝ一世哀愁。/ 2021年09月19日 00:20/ 0 赞/ 420 阅读

相关 Js数组去重的多种方法

方法一原理：利用双层循环将相邻元素 arr\[i\]和arr\[i+1\] 进行比较，相等则数组删除arr\[i+1\] 下标元素 var arr = [

你的名字/ 2021年08月19日 14:44/ 0 赞/ 524 阅读