js数组去重

最新推荐文章于 2024-06-01 07:27:22 发布
最新推荐文章于 2024-06-01 07:27:22 发布
阅读量908 收藏 6
点赞数
分类专栏： vue 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cddcj/article/details/126102557
版权
本文详细介绍了JavaScript中去除数组重复元素的多种方法，包括使用ES6的Set、双重循环、indexOf、排序、对象属性、Map、reduce、递归以及Map和Set结合等。每种方法的优缺点和适用场景都有所阐述，帮助读者理解并选择合适的去重策略。
摘要由CSDN通过智能技术生成

js数组去重方法：1、使用ES6的Set对象去重；2、利用for嵌套for，然后splice去重；3、利用indexOf去重；4、利用对象的属性不能相同的特点进行去重；5、利用Map数据结构去重；6、利用reduce+includes去重。

一、ES6 的 Set 对象

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。

function unique (arr) {

  return Array.from(new Set(arr))

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

 NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

console.log(unique(arr))

 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。 

二、利用for嵌套for，然后splice去重（ES5中最常用） 

function unique(arr){            

        for(var i=0; i<arr.length; i++){

            for(var j=i+1; j<arr.length; j++){

                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个

                    arr.splice(j,1);

                    j--;

                }

            }

        }

return arr;

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

 NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

    console.log(unique(arr))

    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]

         //NaN和{}没有去重，两个null直接消失了

 

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

三、利用indexOf去重

 

function unique(arr){            

        for(var i=0; i<arr.length; i++){

            for(var j=i+1; j<arr.length; j++){

                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个

                    arr.splice(j,1);

                    j--;

                }

            }

        }

return arr;

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,

null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

    console.log(unique(arr))

    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]

         //NaN和{}没有去重，两个null直接消失了

 

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。

四、利用sort()

function unique(arr) {

    if (!Array.isArray(arr)) {

        console.log('type error!')

        return;

    }

    arr = arr.sort()

    var arrry= [arr[0]];

    for (var i = 1; i < arr.length; i++) {

        if (arr[i] !== arr[i-1]) {

            arrry.push(arr[i]);

        }

    }

    return arrry;

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,

     null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

      

console.log(unique(arr))

// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]

      //NaN、{}没有去重

 

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

五、利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进）

function unique(arr) {

    if (!Array.isArray(arr)) {

        console.log('type error!')

        return

    }

    var arrry= [];

     var  obj = {};

    for (var i = 0; i < arr.length; i++) {

        if (!obj[arr[i]]) {

            arrry.push(arr[i])

            obj[arr[i]] = 1

        } else {

            obj[arr[i]]++

        }

    }

    return arrry;

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined,

 null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  

console.log(unique(arr))

//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]

    //两个true直接去掉了，NaN和{}去重

 六、利用includes

function unique(arr) {

    if (!Array.isArray(arr)) {

        console.log('type error!')

        return

    }

    var array =[];

    for(var i = 0; i < arr.length; i++) {

            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值

                    array.push(arr[i]);

              }

    }

    return array

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

 NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  

console.log(unique(arr))

//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

         //{}没有去重

 七、利用hasOwnProperty

function unique(arr) {

 var obj = {};

 return arr.filter(function(item, index, arr){

    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)

 })

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

     NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

      

console.log(unique(arr))

//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]

   //所有的都去重了

 

利用hasOwnProperty 判断是否存在对象属性

八、利用filter

 

function unique(arr) {

  return arr.filter(function(item, index, arr) {

    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素

    return arr.indexOf(item, 0) === index;

  });

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

 NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  

console.log(unique(arr))

//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

 九、利用递归去重

function unique(arr) {

        var array= arr;

        var len = array.length;

 

    array.sort(function(a,b){   //排序后更加方便去重

        return a - b;

    })

 

    function loop(index){

        if(index >= 1){

            if(array[index] === array[index-1]){

                array.splice(index,1);

            }

            loop(index - 1);    //递归loop，然后数组去重

        }

    }

    loop(len-1);

    return array;

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

  NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

   

console.log(unique(arr))

//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

 十、利用Map数据结构去重

 

function arrayNonRepeatfy(arr) {

  let map = new Map();

  let array = new Array();  // 数组用于返回结果

  for (let i = 0; i < arr.length; i++) {

    if(map .has(arr[i])) {  // 如果有该key值

      map .set(arr[i], true); 

    } else { 

      map .set(arr[i], false);   // 如果没有该key值

      array .push(arr[i]);

    }

  } 

  return array ;

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

  NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

   

console.log(unique(arr))

//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

十一、利用reduce+includes

function unique(arr){

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

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null,

  NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

   

console.log(unique(arr));

// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

十二、[...new Set(arr)]

[...new Set(arr)] 

//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

 

cc蒲公英
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js数组去重(看完就懂了)
HuangZeJunXXX的博客
09-12 811
一、利用ES6 Set去重（ES6中最常用） function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a...
JavaScript数组去重的几种方法
12-11
前言 有时候我们做项目的时候往往会需要把数组里面一些重复的项去掉，但是原生JS有排序，有筛选等等，但是就是没有数组去重怎么办呢？ 这能怎么办，自己手动实现嘛。 数组不像对象和hash有唯一的标志特征(key)。所以，数组去重的核心就是【1】数组内元素互相比较，然后放入新的数组中。【2】参照对象构建一个唯一的特征标志，然后放入新数组中。以下就是依照这种思路产生的方法。【3】数组中含对象的去重方式我采用使用JSON.stringify()将对象转换成JSON字符串进行比较的方式。 1.最基础的去重：双重遍历 双重遍历的核心就是依据【1】，通过拿出一个元素和剩下的元素依次比较，如果全部不相等则证
JS数组怎么去重？| JavaScript中数组去重的14种方法
最新发布
青春木鱼的博客
06-01 1935
JS数组怎么去重？JavaScript中数组去重的13种方法，甚是详细，遇到数组去重问题时，可翻阅查看对应的去重方法
JS数组去重的几种常见方法
weixin_33831673的博客
04-18 523
JS数组去重的几种常见方法 一、简单的去重方法 // 最简单数组去重法 /* * 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i &lt; array.length; i++){ ...
数组去重的方法
icessun
04-04 5604
数组去重 第一种方法： 先对数组进行排序sort()，排好序，然后把数组的当前项和后一项进行比较，相同则使用数组的splice(相同的位置，1)，但是为了防止数组塌陷，每次删除数组元素的时候要把i的值减一。 var ary=[1,23,4,2,33,1,2,44,3,2,3] ary.sort(function(a,b){ return a-b;
JavaScript 数组去重并统计重复元素出现的次数实例
11-29
1、方法一 var arr = [1, 2, 3, 1, 2, 4]; function arrayCnt(arr) { var newArr = []; for(var i = 0; i < arr.length;... if(newArr.indexOf(arr[i]) == -1) { ... var newarr2 = new Array(newArr.length);...
高性能js数组去重(12种方法，史上最全)
10-15
这里我们将探讨12种不同的方法来实现JS数组去重，以提高对这些技术的理解。 1. **利用ES6 Set去重**： Set是ES6中新增的数据结构，它不允许重复的值。通过将数组转换为Set，然后再转回数组，可以实现去重。 ```...
JS实现数组去重方法总结(六种方法)
10-19
文章内容介绍了六种不同的JavaScript数组去重方法，下面对这些方法的知识点进行详细说明。 方法一：双层循环去重 这种方法使用了双层循环来遍历数组元素，外层循环遍历数组的每一个元素，内层循环则用来检查当前...
超全的12种数组去重的方法
m0_64564920的博客
04-19 4万+
前言 数组去重，可以说是一个比较常见的面试题，今天来盘点一下都有哪些方法可以实现数组去重。 方法1、双重for循环 这是一个最笨的方法，双重循环。 var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1] // 数组去重： // 方法1： 双重for 循环 function newArrFn (arr) { // 创建一个新的空数组 let newArr = [arr[0]] for(let i = 1;i<arr.len
js实现数组去重的方式(7种)
热门推荐
qq_52732369的博客
12-11 7万+
js实现数组去重的7种方式
数组去重方法
元旦是个嘤嘤怪的博客
12-25 103
一、Set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 使用 new 的方式来实例化使用 使用方式直接上代码： var arr = [1,1,2,2,3,3,4,4,5,5,6,6,]; function newArr(arr){ return Array.from(new Set(arr)) } console.log(newArr(arr)); //[1, 2, 3, 4, 5, 6] 还可以在 .
数组的去重方法
weixin_30588907的博客
04-27 332
在数组中有时候会有重复元素，而我们并不需要因此就需要对数组进行去重。 去重的方法很多，这里几种是自己易于理解的几种方法。 1、先来最简单的方法 利用ES6提供的新的数据结构set。它类似于数组，但是它的元素值是唯一的，没有重复的。 1 let arr = [1,1,1,1,1,1,2,3,4,1,2,3,4] 2 arr = Array.from(new Set(arr)) 3 c...
Javascript数组去重
12-13
以下是三种Javascript数组去重的方法： 1.使用Set方法进行数组去重 ```javascript const arr = [1, 2, 3, 3, 4, 4, 5]; const newArr = [...new Set(arr)]; console.log(newArr); // 输出：[1, 2, 3, 4, 5] ``` 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值