Javascript数组去重方法总结

最新推荐文章于 2022-08-29 14:41:09 发布
最新推荐文章于 2022-08-29 14:41:09 发布
阅读量181 收藏 1
点赞数
分类专栏： javascript 数组
原文链接：https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
版权

轉自《Js数组去重方法总结》

方法一：

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
function removeDuplicatedItem(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);//console.log(arr[j]);
              j--;
           }
       }
   }
   return arr;
}

arr2 = removeDuplicatedItem(arr);
console.log(arr);
console.log(arr2);

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

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

方法三：利用数组中的filter方法

var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];
 var r = arr.filter(function(element,index,self){
    return self.indexOf(element) === index;
 });
 console.log(r);

結果爲：

擴展filter知識：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
console.log(element); // 依次列印'A', 'B', 'C'
console.log(index); // 依次列印0, 1, 2
console.log(self); // self就是變數arr
return true;
});
var r,
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r.toString());

去除重複元素依靠的是 indexOf 總是返回第一個元素的位置，後續的重複元素位置與 indexOf 返回的位置不相等，因此被 filter 濾掉了。

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

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

結果爲：

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

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

結果為：

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

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

 方法七(原数组长度不变但被按字符串顺序排序) 借助新数组  判断新数组中是否存在该元素如果不存在则将此元素添加到新数组中

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

arr2 = removeRepEle(arr);
console.log(arr);//[ 1, 1, 1, 1, 23, 23, 3, 5, 5, 6, 7, 8, 9, 9 ]
console.log(arr2);//[ 1, 23, 3, 5, 6, 7, 8, 9 ]

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

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

方法九(双层循环改变原数组)

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

方法十(借助新数组)

var arr = [12, 2, 44, 3, 2, 32, 33, -2, 45, 33, 32, 3, 12];
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);//[ 44, 2, -2, 45, 33, 32, 3, 12 ]

方法十一：轉載自《... new Set()》来过滤掉数组中重复的值，创建一个只有唯一值的新数组。

const array = [1, 1, 2, 3, 5, 5, 1] 
const uniqueArray = [...new Set(array)]; 
console.log(uniqueArray); 
> Result:(4) [1, 2, 3, 5]

该技巧适用于包含基本类型的数组：undefined、null、boolean、string和number。如果数组中包含了一个object,function或其他数组，那就需要使用另一种方法。

方法十二：Array.from(new Set())

const array = [1, 1, 2, 3, 5, 5, 1] 
Array.from(new Set(array)) 
> Result:(4) [1, 2, 3, 5]

方法十三：Array的.filter及indexOf()

const array = [1, 1, 2, 3, 5, 5, 1] 
array.filter((arr, index) => array.indexOf(arr) === index) 
> Result:(4) [1, 2, 3, 5]

方法十四 ：reduce()

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((init, current) => {
    if (init.length === 0 || init[init.length - 1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

方法十五 includes()

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
	function unarr(arr){
    //检查是不是数组
		if(!Array.isArray(arr)){
			console.log('不是数组');
			return
		   }
		let	arrbox = [];
			for(var i = 0;i<arr.length;i++){
				if(!arrbox.includes(arr[i])){
					arrbox.push(arr[i]);
				}
			}
		return arrbox
	}
console.log(unarr(arr));

方法十六 find()

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
	function unarr(arr){
		if(!Array.isArray(arr)){
			console.log('不是数组');
			return
		   }
		let	arrbox = [];
			for(var i = 0;i<arr.length;i++){
				if(!arrbox.find(function(v){
					return v==arr[i]
				})){
					arrbox.push(arr[i]);
				}
			}
		return arrbox
	}
console.log(unarr(arr));

 方法十七 findIndex()

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
	function unarr(arr){
		if(!Array.isArray(arr)){
			console.log('不是数组');
			return
		   }
		let	arrbox = [];
			for(var i = 0;i<arr.length;i++){
				if(arrbox.findIndex(function(v){
					return v==arr[i];
					
				})==-1){
					arrbox.push(arr[i]);
				}
			}
		return arrbox
	}
console.log(unarr(arr));

数组去重12种方案

 

那是遇知吧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript数组去重方法总结（推荐）
10-17
主要介绍了javascript数组去重方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
filter函数（JS）
zxiang248的专栏
02-28 2万+
filter函数 filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。 和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：var arr = [1,
关于js数组去重的方法
m0_67778061的博客
08-29 175
数组去重方法
关于数组、数组对象的去重、降维等操作
qq_45657154的博客
01-11 419
数组去重 filter实现数组去重 利用 indexOf只返回数组中第一次出现的元素的下标 filter只返回判断为true的元素 const arr = [1, 2, 11, 22, 11, 1, 11, 22, 1, 2]; const unique = arr => arr.filter((element, index, self) => { // self.indexOf(element) 每次都从数组第一个元素开始往下查 return self.indexOf(el
数组去重黑科技
fhycll123的博客
11-30 155
在项目中，我们会经常遇到需要数组去重的问题，不多废话，直接上代码。 用filter()方法对数组去重。 一维数组去重：                var str,                 arr = [1,2,3,5,2,5,6,3];                 str = arr.filter(function (element, index, self) {      ...
Javascript中关于Array.filter()的妙用详解
祥哥的说
05-17 3万+
强烈推荐30个原生JavaScript的demo，包括canvas时钟特效、自定义视频播放器、搜索栏快速匹配、fetch访问资源、console调试技巧等，先fork后学习，详见点击打开链接，欢迎点赞~~~谢谢，共同进步学习！ 前言 和map类似，Array的filter也接收一个函数。但是和map不同的是， filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是fals...
javascript数组去重方法终极总结
01-19
有时会碰上这种需求，需要将数组中重复的元素删除掉，而只保留一个。最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素，代码如下所示： 方法1： 代码如下:Array.prototype.distinct = function()...
JavaScript数组去重的方法总结【12种方法，号称史上最全】
12-07
本文实例总结了JavaScript数组去重的方法。分享给大家供大家参考，具体如下： 数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的...
javascript数组去重方法分析
11-27
本文实例讲述了javascript数组去重方法。分享给大家供大家参考，具体如下： 方法一. 思路：创建一个新的空数组，循环遍历旧数组，用indexOf()方法，可以取得元素在数组中的位置，如果值为-1表示不存在。那么新数组用...
indexOf 的使用
qq_34117170的博客
07-24 2692
先说一下我们经常使用的情况 1.字符串中的使用var yourName='WDL'; yourName.indexOf('D');//1; yourName.indexOf('L');//2; yourName.indexOf('1');//-1;如果有就返回这个字符的位置，我们常用xx.indexOf(‘*’)>=0来判断是否还有某个字符，起始位置是从0开始，如果不含有字符就返回-1；2.num
Swift中集合类型indexOf(Element)提示错误的解决办法
weixin_33858485的博客
04-01 337
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 初学Swift,会遇到一些潜在的小问题,比如我们在某个集合对象中查找一个元素的时候会用到indexOf方法. 在API文档里可以看到该方法有2个重载: indexOf(_: ...
js中filter()函数，以及一些去重方法
weixin_33935505的博客
08-27 3739
filter()：“筛选”函数。filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 则我们可以运用到1、在一个Array中，删掉偶数保留奇数：var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0;...
js filter()方法的使用
热门推荐
前端技术的学习整理
10-22 8万+
&lt;1&gt; filter  它用于把Array的某些元素过滤掉，然后返回剩下的元素。 和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 例如，在一个Array中，删掉偶数，只保留奇数，可以这么写 var arr = [1, 2, 4, 5...
浅谈 javascript 中 箭头函数（=>） 及 （filter） && （indexOf） && （!!~） 的含义
weixin_43837555的博客
02-18 5317
这段时间在hexo上看见一种 object.filter(event =&gt; !!~array.indexOf(event.item)) 的语法 举个栗子 deleteImage () { const oldPhotos = [] // 原来的照片数组[] const oldAlbums = app.globalData.allData.albums...
数组去重
XLHACFQ的博客
03-26 121
在实际工作或面试中，我们经常会遇到“数组去重”问题，接下来就是使用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, ...
利用filter过滤给数组去重
zhangyongxi123的博客
09-12 2979
var r, arr = [‘apple’, ‘strawberry’, ‘banana’, ‘pear’, ‘apple’, ‘orange’, ‘orange’, ‘strawberry’]; r = arr.filter(function (element, index, self) { return self.indexOf(element) === i...
老生常谈JS数组去重
进无止进
09-09 574
数组去重，历史悠久的话题了，不过今天只记录个人比较喜欢的方法 1、数组去重需求 项目需要对类似这种数组去重： let lists = [{ id: 1, name: '法外狂徒', age: 20 }, { id: 3, name: '张三', age: 20 }, { id: 1, name: '法外狂徒', age: 20 }, { id: 4, name: '李四', age: 20 }] 该数据以id作为唯一标识，去重时只需去除重复id的那一项即.
数组去重方法总结（10种）
weixin_43299180的博客
12-04 1969
数组去重的方法（10种） 一、用ES6的Set方法 let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{},{}]; //Set数据结构，它类似于数组，其成员的值都是唯一的 let unique = Array.from(new Set(arr)); //let unique = [...new Set(arr)]; //也可以使用展开运算符 console.log(uniqu
数组去重的十种方法
qq_42345237的博客
10-05 2763
数组的去重方法，其实无论实在实际项目还是在面试中都会有用到的，下面我们来列举一下常见的几个： 使用 for 循环和 includes 使用 Set 和 Array.from() 使用 for 循环和 indexOf for 循环嵌套 for 循环，结合 splice 使用 sort 和 reduce 方法 使用 filter 和 indexOf 使用 forEach 循环和 Map 使用 reduce 和 includes 使用扩展运算符和 set 如果是数组对象的数据格式，可以使用 forEach 和
javascript数组去重方法
最新发布
10-12
JavaScript 数组去重的方法有很多种，以下是其中几种常见的方法： 1. 使用 Set 数据结构 ```javascript const arr = [1, 2, 2, 3, 3, 4]; const uniqueArr = [...new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4] ``` 2. 使用 filter 方法 ```javascript const arr = [1, 2, 2, 3, 3, 4]; const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index); console.log(uniqueArr); // [1, 2, 3, 4] ``` 3. 使用 reduce 方法 ```javascript const arr = [1, 2, 2, 3, 3, 4]; const uniqueArr = arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []); console.log(uniqueArr); // [1, 2, 3, 4] ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值