首页 / JAVASCRIPT / JavaScript数组去重（12种方法，史上最全）

JavaScript数组去重（12种方法，史上最全）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript数组去重（12种方法，史上最全），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7921字，纯文字阅读大概需要12分钟。

内容图文

数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。

在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但还是需要了解一下，以防面试的时候可能回被问到。

注：写的匆忙，加上这几天有点忙，还没有非常认真核对过，不过思路是没有问题，可能一些小细节出错而已。

如果你是真心想学好web前端技术的，有学习疑虑可以来问我，这是我的web前端资源公众号：web前端技术圈

里面都是热爱学习web前端技术的小伙伴，希望你也是因为学习才关注的，里面有教程，解答小组，面试题，学习技巧等资源。

数组去重的方法

一、利用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',{},{}];
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直接消失了
双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
想快速学习更多常用的ES6语法，可以看我之前的文章《学习ES6笔记──工作中常用到的ES6语法》。

三、利用indexOf去重

function?unique(arr)?{
????if?(!Array.isArray(arr))?{
????????console.log('type?error!')
????????return
????}
????var?array?=?[];
????for?(var?i?=?0;?i?<?arr.length;?i++)?{
????????if?(array?.indexOf(arr[i])?===?-1)?{
????????????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,?"NaN",?0,?"a",?{…},?{…}]??//NaN、{}没有去重
新建一个空的结果数组，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)]?
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

PS：有些文章提到了foreach+indexOf数组去重的方法，个人觉得都是大同小异，所以没有写上去。

●编号803，输入编号直达本文

●输入m获取文章目录

我自己是一名从事了5年前端开发的老，辞职目前在做线上讲师，每晚都会在群内直播，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5都有整理，送给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴。"

关注此微~信公众号：web前端技术圈，关注后回复："一点" 就可以领取一套web前端学习资料的哦！（象棋源码领取）

JavaScript数组去重（12种方法，史上最全） - 文章图片

内容总结

以上是互联网集市为您收集整理的JavaScript数组去重（12种方法，史上最全）全部内容，希望文章能够帮你解决JavaScript数组去重（12种方法，史上最全）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/852845.html

来源：【匿名】

【上一篇】JavaScript事件(含Demo)【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript数组去重（12种方法，史上最全）】教程文章相关的互联网学习教程文章

js数组去重

function deleteRepeat(){//删除重复的 var _arr=[1,1,1,3,3,3,5,8,8,9,10]; //console.log(_arr); for(var i=0;i<_arr.length;i++){ for(var n=i+1;n<_arr.length;n++){ if(_arr[i]==_arr[n]){ _arr.splice(n,1); n--; } } ...

js字符串去重【代码】

使用正则去重1var s = "aabdeeagdcffdsf"; 2var ss = s.replace(/(.)(?=.*\1)/g,""); 3 console.log(ss)说明： 1、var reg =/(.)(?=.*\1)/g; 2、.匹配任意字符，但只能匹配任意字符中的一个; 3、(.)加上()就是将匹配的该字符存储起来供以后引用; 4、(?=)预搜索（也有叫断言的，也有叫预查的），指明某个字符的右侧是什么，但不包含这部分，只取这个‘某个字符’,如：p(?=ing)匹配字符串ping时匹配成功...

js数组去重算法【代码】

来来来，整理完数组排序，咱们再来看看数组去重。这个可以说有很多方式了。之前看过的算法方式太多，导致思路其实有时候真的很受限，不过也是整理来学习用的，如有雷同，纯属巧合啊，小婊贝们~　　首先呢，我们来看看思路比较直接的方法，基本思路就是声明一个新数组arr_n，将【0】这个成员压入arr;然后从【1】开始循环当前数组，设置一个变量a，给他一个初始值1；内层嵌套从【0】对arr_n数组的循环，用外层对当前数组循...

前端：JS实现数组去重常用的六种方法介绍【代码】【图】

今天给大家分享JS实现数组去重常用的六种方法，希望对大家能有所帮助！定义变量let arr = [20,6,13,20,100,8,13,11]; let newArr = []; ?1、两层循环去重?for(let i = 0;i < arr.length;i++){for(let j = i + 1;j < arr.length;j++){if(arr[i] == arr[j]){arr.splice(j,1)j--}} } ?2、includes函数判断去重?for(let i of arr){if(!newArr.includes(i)){newArr.push(i)} } ?3、filter循环过滤去重?arr.filter((val,index) => {if(ne...

JS 数组去重学习日志#1【代码】【图】

5.10 JS 数组去重学习日志#1 参考文章1（Array.from()）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from 参考文章2 (Set)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set//问题：var arr=[1,1,1,2,3,4,5,6,12,341235,31,5]; //将此数组进行去重//解决代码 window.onload=function () {console.log(Array.from(new Set(arr))) } 第一步...

js中数组对象去重的两种方法

方法一：采用对象访问属性的方法，判断属性值是否存在，如果不存在就添加。方法二：采用数组中的reduce方法，遍历数组，也是通过对象访问属性的方法 var arr = [{key: 01,value: 乐乐}, {key: 02,value: 博博}, {key: 03,value: 淘淘},{key: 04,value: 哈哈},{key: 01,value: 乐乐}];// 方法1：利用对象访问属性的方法，判断对象中是否存在keyvar result = [];var obj = {};for(var i =0; i<arr.length; i++){if(!obj[arr[i].ke...

从给数组中的对象去重看js中的reduce()

假设有这样一个数组：let person = [{id: 0, name: "小明"},{id: 1, name: "小张"},{id: 2, name: "小李"},{id: 3, name: "小孙"},{id: 1, name: "小周"},{id: 2, name: "小陈"}, ]我们想去掉数组中id重复的对象，比如同样id为2的两个对象——{id: 2, name: "小李"}和{id: 2, name: "小陈"} （去掉任何一个都可以）我们该如何去做呢？事实上，对于数组对象，传统的去重方法无能为力，至于forEach()、filter()等迭代方法也不好使...

Javascript数组去重的几种方法

实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码：// 最简单数组去重法function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 ...

JavaScript数组去重的方法总结（附代码）

本篇文章给大家带来的内容是关于JavaScript数组去重的方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。数组去重在日常开发中的使用频率还是较高的，也是网上随便一抓一大把的话题，所以，我写这篇文章目的在于归纳和总结，既然很多人都在提的数组去重，自己到底了解多少呢。又或者是如果自己在开发中遇到了去重的需求，自己能想到更好的解决方案吗。这次我们来理一理怎么做数组去重才能做得最...

JavaScript中如何实现数组去重？js中数组去重的三种方法（代码实例）

JavaScript中如何实现数组去重？本篇文章就给大家介绍在js中数组去重的三种常用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。下面我们就通过简单代码示例来介绍js中数组去重的三种常用方法。第一种方法：for循环(两次) + 新数组思路：1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比3.若结果数组中没有该元素，则存到结果数组中//方法一 var arr = [1...

js数组去重方法的性能测试对比【图】

本篇文章给大家带来的内容是关于js数组去重方法的性能测试对比，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、测试模版数组去重是一个老生常谈的问题，网上流传着有各种各样的解法为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{return index })let arr2 = Array.from(new Array(50000), (x, index)=>{return i...

超全面的JavaScript数组去重的12种方法总结

本篇文章给大家带来的内容是关于超全面的JavaScript数组去重的12种方法总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。在真实的项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。虽然日常项目用到的概率比较低，但...

数组的常用方法有哪些，如何给数组去重（附代码）

数组是JavaScript的重要组成部分，不管是工作还是求职面试都会涉及数组，比如经典问题：怎么给数组去重。今天就和大家聊聊，数组的常用方法有哪些，以及多种方式给数组去重。一、数组常用方法slice() 用于提取目标数组的一部分，返回一个新数组，原数组不变。concat() 用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。reverse() 用于颠倒排列数组元素，返回改变后的数组。注意...

js中数组的应用以及数组去重的四种方法介绍（代码）

本篇文章给大家带来的内容是关于js中数组的应用以及数组去重的四种方法介绍（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.输入n，输出n行对称的数组成金字塔：function output(n) {for(let i=0;i<=n;i++){ let k=0; var a=[]; for(let j=1;j<=2*i-1;j++){ if(j<=i){a.push(++k);}else{a.push(--k);} }console.log(a)} }2.数组去重方法一：遍历数组法// 最简单数组...

js数组去重的方法有哪些？js数组去重的方法总结（实例）

本篇文章给大家带来的内容是关于js数组去重的方法有哪些？js数组去重的方法总结（实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最基本的写法使用indexOf()var arr = [1,1,5,77,32,54,2,4,5,2,2,4,52,2,2,2,2,2] //比较常规的语法使用indexOf来判断是否已经存在 getFileArray(arr) function getFileArray(arr){var array = [];arr.forEach(e => {if(array.indexOf(e) !== -1){return;}else {array.push...

首页 / JAVASCRIPT / JavaScript数组去重（12种方法，史上最全）

JavaScript数组去重（12种方法，史上最全）

内容导读

内容图文

数组去重的方法

内容总结

内容备注

内容手机端

【JavaScript数组去重（12种方法，史上最全）】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

数组 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程