当前位置: 首页 > 编程笔记 >

js实现数组去重方法及效率對比

戚研
2023-03-14
本文向大家介绍js实现数组去重方法及效率對比,包括了js实现数组去重方法及效率對比的使用技巧和注意事项,需要的朋友参考一下

其實網上搜索這些方法一堆堆的,之所以還來寫一遍主要是因爲自己習慣一種之後就忘了其他方法怎麽實現,就寫一寫總結一下,順便做個測試看看哪個效率最高,爲了更好展示效果,我會先總結認爲比較好的方法,後面統一測試。(溫馨提示:下文衹是爲了簡便,一般情況下不建議寫在原型上,容易污染全局)

一,通過尋找對象屬性

var n = [14,12,2,2,2,5,32,2,59,5,6,33,12,32,6];
Array.prototype.unique1 = function(){
 var obj = {},
  ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(!obj[this[i]]){
   obj[this[i]] = 1;
   ary.push(this[i]);
  }
 }
 return ary.sort(function(a,b){return a - b});
}
console.log(n.unique1());

二,通過尋找數組位置

var n = [14,12,2,2,2,5,32,2,59,5,6,33,12,32,6];
Array.prototype.unique2 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(ary.indexOf(this[i]) == -1) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
console.log(n.unique2());

三,跟尋找數組位置類似,搜索數字第一次出現的位置是不是跟當前位置一樣

var n = [14,12,2,2,2,5,32,2,59,5,6,33,12,32,6];
Array.prototype.unique3 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this.indexOf(this[i]) == i) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
console.log(n.unique3());

四,比較常規,先排序,再比較前後兩個數字是不是相等

var n = [14,12,2,2,2,5,32,2,59,5,6,33,12,32,6];
Array.prototype.unique4 = function(){
 this.sort(function(a,b){return a - b});
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this[i] !== this[i-1]) ary.push(this[i]);
 }
 return ary;
}
console.log(n.unique4());

接下來是網上比較少的效率比較了,也是本文重點,我們先生成一個計時函數統一比較

首先生成一個一百數字的數組

Array.prototype.unique1 = function(){
 var obj = {},
  ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(!obj[this[i]]){
   obj[this[i]] = 1;
   ary.push(this[i]);
  }
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique2 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(ary.indexOf(this[i]) == -1) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique3 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this.indexOf(this[i]) == i) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique4 = function(){
 this.sort(function(a,b){return a - b});
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this[i] !== this[i-1]) ary.push(this[i]);
 }
 return ary;
}
function randomAry (n) {
 var ary = [],i=0;
 for(; i<n; i++){
  ary.push(Math.ceil(Math.random()*10000));
 }
  console.log(ary)
 return ary;
}
function useTime (fn) {
 var start = new Date();
 fn();
 var end = new Date();
 console.log('本次函數運行花了:' + (end - start) + '毫秒');
}
var ary = randomAry(100),
 fn1 = function(){
 ary.unique1()
 },
 fn2 = function(){
 ary.unique2()
 },
 fn3 = function(){
 ary.unique3()
 },
 fn4 = function(){
 ary.unique4()
 };
useTime(fn1);
useTime(fn2);
useTime(fn3);
useTime(fn4);

結果在我的谷歌瀏覽器發現

方法一:0毫秒

方法二:1毫秒

方法三:0毫秒

方法四:00毫秒

(嗯,果然現代瀏覽器强大無比,不吐槽舊瀏覽器了)

看看1000個數字

Array.prototype.unique1 = function(){
 var obj = {},
  ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(!obj[this[i]]){
   obj[this[i]] = 1;
   ary.push(this[i]);
  }
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique2 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(ary.indexOf(this[i]) == -1) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique3 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this.indexOf(this[i]) == i) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique4 = function(){
 this.sort(function(a,b){return a - b});
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this[i] !== this[i-1]) ary.push(this[i]);
 }
 return ary;
}
function randomAry (n) {
 var ary = [],i=0;
 for(; i<n; i++){
  ary.push(Math.ceil(Math.random()*10000));
 }
  console.log(ary)
 return ary;
}
function useTime (fn) {
 var start = new Date();
 fn();
 var end = new Date();
 console.log('本次函數運行花了:' + (end - start) + '毫秒');
}
var ary = randomAry(1000),
 fn1 = function(){
 ary.unique1()
 },
 fn2 = function(){
 ary.unique2()
 },
 fn3 = function(){
 ary.unique3()
 },
 fn4 = function(){
 ary.unique4()
 };
useTime(fn1);
useTime(fn2);
useTime(fn3);
useTime(fn4);
方法一:1-2毫秒
方法二:40-50毫秒
方法三:40-50毫秒
方法四:0-1毫秒
看看10000個數字(數據龐大,開始吃不消了,等個五六秒吧)
Array.prototype.unique1 = function(){
 var obj = {},
  ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(!obj[this[i]]){
   obj[this[i]] = 1;
   ary.push(this[i]);
  }
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique2 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(ary.indexOf(this[i]) == -1) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique3 = function(){
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this.indexOf(this[i]) == i) ary.push(this[i]);
 }
 return ary.sort(function(a,b){return a - b});
}
Array.prototype.unique4 = function(){
 this.sort(function(a,b){return a - b});
 var ary = [],
  i= 0,
  len = this.length;
 for(; i<len; i++){
  if(this[i] !== this[i-1]) ary.push(this[i]);
 }
 return ary;
}
function randomAry (n) {
 var ary = [],i=0;
 for(; i<n; i++){
  ary.push(Math.ceil(Math.random()*10000));
 }
  console.log(ary)
 return ary;
}
function useTime (fn) {
 var start = new Date();
 fn();
 var end = new Date();
 console.log('本次函數運行花了:' + (end - start) + '毫秒');
}
var ary = randomAry(10000),
 fn1 = function(){
 ary.unique1()
 },
 fn2 = function(){
 ary.unique2()
 },
 fn3 = function(){
 ary.unique3()
 },
 fn4 = function(){
 ary.unique4()
 };
useTime(fn1);
useTime(fn2);
useTime(fn3);
useTime(fn4);

因爲數據龐大,我衹拿一次數據,你們喜歡就刷新幾次比較唄

方法一:10毫秒

方法二:1258毫秒

方法三:2972毫秒

方法四:5毫秒

原本還想給更大的數據看看,然後十萬個我的頁面就奔潰了。。。潰了。。。了

然後試試五萬個,也奔潰了。。。潰了。。。了

那就算吧,

反正在一萬個數據裏面對比,數據越大,方法一跟方法四按毫秒遞增,方法二跟方法三效率感人

效率計算:4>1>2>3

方法計算: 先排序,再比較前後兩個數字是不是相等 > 通過尋找對象屬性 > 通過尋找數組位置 > 搜索數字第一次出現的位置是不是跟當前位置一樣

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍JS实现数组去重及数组内对象去重功能示例,包括了JS实现数组去重及数组内对象去重功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现数组去重及数组内对象去重功能。分享给大家供大家参考,具体如下: 大家在写项目的时候一定遇到过这种逻辑需求,就是给一个数组进行去重处理,还有一种就是给数组内的对象根据某一个属性,比如id,进行去重,下面我写了两个函数,都是可以达到这个效

  • 本文向大家介绍JS实现数组去重,显示重复元素及个数的方法示例,包括了JS实现数组去重,显示重复元素及个数的方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现数组去重,显示重复元素及个数的方法。分享给大家供大家参考,具体如下: 使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如

  • 本文向大家介绍JS实现数组去重复值的方法示例,包括了JS实现数组去重复值的方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现数组去重复值的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: PS:这里再为大家提供几款去重复工具供大家参考使用: 在线去除重复项工具: http://tools.jb51.net/code/quchong 在线文本去重复工

  • 本文向大家介绍JS简单实现数组去重的方法示例,包括了JS简单实现数组去重的方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS简单实现数组去重的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 出现的问题,新数组中值和index值对应。有局限性。虽然可以从小到大排列。 PS:这里再为大家提供几款去重复工具供大家参考使用: 在线去除重复项工具: http://tools.jb

  • 本文向大家介绍JS简单实现数组去重的方法分析,包括了JS简单实现数组去重的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS简单实现数组去重的方法。分享给大家供大家参考,具体如下: 运行结果: 关于indexOf()方法: indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 stringObject.indexOf(searchvalue,frominde

  • 本文向大家介绍JavaScript数组去重的几种方法效率测试,包括了JavaScript数组去重的几种方法效率测试的使用技巧和注意事项,需要的朋友参考一下 以下是我针对网上三种高效率方法总结与效率测试,如果大家有更好的意见或建议也可以提出,大家共勉学习。 数组去重法1: 数组去重法2: 数组去重法3: 效率测试方法: 效率测试结果: 总结 以上就是关于JavaScript几种数组去重的方法效率测试