javascript数组去重的三种常用方法,及其性能比较

简介: 原文:javascript数组去重的三种常用方法,及其性能比较   在进行数组操作时往往会遇到去掉重复项的问题,下面简单介绍下数组去重的方法,以及其执行效率    方法一        采用两次循环        原理:拿当前的和他后面的比,如果后面的有重复的就干掉        但是我们发现数组最后一项,后面没有东西,那他就不用和后边的比较了,所以我们只要循环arr.
原文: javascript数组去重的三种常用方法,及其性能比较

   在进行数组操作时往往会遇到去掉重复项的问题,下面简单介绍下数组去重的方法,以及其执行效率

 

 方法一
        采用两次循环
        原理:拿当前的和他后面的比,如果后面的有重复的就干掉
        但是我们发现数组最后一项,后面没有东西,那他就不用和后边的比较了,所以我们只要循环arr.length-1次就可以了

 1   var arr=[1,3,5,3,5];
 2 
 3         var len=arr.length;
 4         for(var i=0;i<len-1;i++){
 5             var curItem=arr[i];//当前项
 6             for(var j=i+1;j<len;j++){
 7                 if(curItem==arr[j]){
 8                     arr.splice(j,1);
 9                     j--;
10                 }
11             }
12         }
13         console.log(arr);

执行效率实在不敢恭维,我的电脑比这多就不能执行了

所以考虑用对象替代(对象的属性名字不会重复)方法二

 1         var arr=[1,3,5,3,5,3,4,6,2,2,2,1];
 2         var len=arr.length;
 3         var obj={};
 4 
 5         for(var i=0;i<len;i++){
 6             var cur=arr[i];//当前项
 7             obj[cur]=cur;
 8         }
 9         var list=[];
10         for(key in obj){
11             list.push(obj[key])
12         }
13         console.log(list);

此方法执行效率较高,数组很多内容也不会浏览器奔溃,但循环使用两次

采用另一种方法:方法三

原理:  循环数组,把数组中的每一项当做obj对象的属性名和属性值存进来,
        但是我们发现如果obj对象中已经存在了这个属性名的话,那就说明数组重复了,那我们删除重复的项

 

 1   var arr=[1,3,5,3,5,3,4];
 2         var len=arr.length;
 3         var obj={};
 4         for(var i=0;i<len;i++){
 5             var cur=arr[i];//当前项
 6             if(obj[cur]==cur){
 7                 arr.splice(i,1);
 8                 i--
 9             }else{
10                 obj[cur]=cur;
11             }
12 
13         }
14         obj=null;
15         console.log(arr);

不过经过测试这个方法和方法一效率差不多,不信可以尝试下,故还是推荐方法二

对此封装成方法

 1         var arr=[1,3,5,3,5,3,4,6,2,2,2,1,7,84,34,634];
 2 Array.prototype.arr_unique=function (){
 3     var len=this.length;
 4     var obj={};
 5 
 6     for(var i=0;i<len;i++){
 7         var cur=this[i];//当前项
 8         obj[cur]=cur;
 9     }
10     var list=[];
11     for(key in obj){
12         list.push(obj[key])
13     }
14 
15     return list;
16 
17 };
18 
19 console.log(arr.arr_unique());

能力有限,希望能给大家带来帮助

目录
相关文章
|
15天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
15天前
|
JavaScript Java
JS有趣的灵魂 清空数组
JS有趣的灵魂 清空数组
|
17天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
18天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
15天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
2天前
|
缓存 JavaScript 前端开发
Vue.js 路由时用于提高应用程序性能
Vue.js 路由时用于提高应用程序性能
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
7天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
8天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
8天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查