说到数组去重的方法,我觉得是个前端工程师都能写出几个方法来,但是各种方法之间的性能怎么样了,这次带着这个问题,我们来一起做一下研究?
1、数组去重的方法有哪些?
2、哪种数组去重的的方法性能较好
下面先来介绍数组去重的几种方法
数组去重方法一:
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]){
arr.splice(j,1);//arr.splice(开始位置,要删除几个,要插入的数据)
j--;
}
//alert(arr);
//console.log(arr);
return arr;
}
}
}
数组去重方法二:
function unique(arr){
var arr2=[];
for(var i=0;i<arr.length;i++){
//假设没找到的
var find=false;
//在arr2里面一个一个的找
for(var j=0;j<arr2.length;j++){
if(arr2[j]==arr[i]){
find=true; //找到一个,结束小循环
}
}
//没找到,才添加
if(!find){
arr2.push(arr[i]);
}
}
return arr2;
}
数组去重方法三:
function unique(arr){
var arr2=[];
for (var i = 0; i < arr.length; i++)
{
var find=false;
for (var j = 0; j < arr2.length; j++)
{
if (arr2[j]==arr[i])
{
find=true;
break;
}else{
find=false;
}
}
if (!find) {
arr2.push(arr[i]);
}
}
return arr2
}
数组去重方法四:
function unique(arr){
function findInArr(arr,n){
for (var i = 0; i < arr.length; i++) {
if (arr[i]==n) {
return true;
}
}
return false;
};
var arr2=[];
for (var i = 0; i < arr.length; i++) {
if (!findInArr(arr2,arr[i])) {
arr2.push(arr[i])
}
}
return arr2;
}
数组去重方法五:
function unique(arr){
var n = [];//一个新的临时数组
for (var i = 0; i < arr.length; i++) {
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if (n.indexOf(arr[i]) == -1) n.push(arr[i]);
}
return n;
}
数组去重方法六:
function unique(array){
var arr = [];
var json = {};
for(var i = 0; i < array.length; i++){
if(!json[array[i]]){
arr.push(array[i]);
json[array[i]] = 1;
}
}
return arr;
}
数组去重方法七:
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
我们再来简单介绍一下性能测试的方法
如例:
//我们先来建立一个随机函数
function GetRandomNum(Min,Max)//随机数生成函数
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
//再来获取一组一亿个0到100的随机数,并把它们放到数组里面
var arr=[];
for (var i = 0; i < 100000000; i++) {
arr.push(GetRandomNum(0,100));
}
var d =new Date().getTime();//获取函数运算开始时间
function unique(arr){
var arr2=[];
for (var i = 0; i < arr.length; i++)
{
var find=false;
for (var j = 0; j < arr2.length; j++)
{
if (arr2[j]==arr[i])
{
find=true;
break;
}else{
find=false;
}
}
if (!find) {
arr2.push(arr[i]);
}
}
return arr2
}
document.write(unique(arr));
alert(new Date().getTime()-d);//获取函数运算结束时间,拿函数运算结束时间减去函数运算开始时间,得到函数运算的时间
下面我来介绍一下此次测试的设备
此次数组去重测试的浏览器:
Google Chrome 版本52.0.2743.10
Firefox 47.0.1
IE 10
性能检测的方法
1、获取一个有一亿0到100的随机数的数组,进行去重操作
2、每个方法检测三次,每个浏览器检测三次,取平均值并且每次测试后清除缓存关闭浏览器后重新打开
注:经过多次测试后,发现有一亿个元素的数组,Firefox和IE 10总是崩溃,所以chrome是采用数组内含有一亿个元素测试的,而Firefox和IE 10是按数组内含有一千万的元素测试的,大家注意一下!
以下测试数据为数组完成去重操作的时间
chrome浏览器下(数组内有一亿个0到100的随机数):
次数 | 第一次 | 第二次 | 第三次 | 平均 |
---|---|---|---|---|
方法1 | 浏览器崩溃 | 浏览器崩溃 | 浏览器崩溃 | 浏览器崩溃 |
方法2 | 21321ms | 21402ms | 21419ms | 21380ms |
方法3 | 9373ms | 9393ms | 9393ms | 9386ms |
方法4 | 9387ms | 9129ms | 9225ms | 9247ms |
方法5 | 5984ms | 5975ms | 5944ms | 5967ms |
方法6 | 642ms | 653ms | 687ms | 660ms |
方法7 | 597ms | 599ms | 598ms | 598ms |
firefox浏览器下(数组内有一千万个0到100的随机数):
次数 | 第一次 | 第二次 | 第三次 | 平均 |
---|---|---|---|---|
方法1 | 768ms | 562ms | 707ms | 679ms |
方法2 | 1353ms | 1352ms | 1358ms | 1354ms |
方法3 | 626ms | 624ms | 623ms | 624ms |
方法4 | 635ms | 638ms | 632ms | 635ms |
方法5 | 1459ms | 1459ms | 1453ms | 1457ms |
方法6 | 45ms | 45ms | 45ms | 45ms |
方法7 | 49ms | 50ms | 50ms | 49ms |
IE浏览器下(数组内有一千万个0到100的随机数):
次数 | 第一次 | 第二次 | 第三次 | 平均 |
---|---|---|---|---|
方法1 | 1060ms | 1091ms | 1016ms | 1055ms |
方法2 | 4185ms | 4177ms | 4185ms | 4182ms |
方法3 | 2189ms | 2140ms | 2142ms | 2157ms |
方法4 | 1533ms | 1539ms | 1534ms | 1535ms |
方法5 | 5101ms | 5076ms | 5026ms | 5067ms |
方法6 | 482ms | 503ms | 503ms | 496ms |
方法7 | 494ms | 490ms | 444ms | 476ms |
总结:
由上述数据我们可以得出,在上述几种数组去重的方法中,第7种去重方法,性能最优!
浏览器性能中chrome最优,firefox次之,IE最差!
版权申明:本文由前端工程师和派孔明亲测,仅供学习交流之用,如需转载,请注明出处!