js陣列去重效率測試

最近一次面試遇到了乙個問題,用原生js至少實現三種數思路,巴拉巴拉…,描述完畢.另乙個問題又來了,請分析一下哪一種的效率最高,當時我就想,應該越是原生的**,效率應該越高吧.然後就現實並非如此,面試自然也就無疾而終,然後我回家做了一番測試,結果如下

1 雙層遍歷 default: 7.007080078125ms 2 排序去重 default: 43.743896484375ms 3 物件屬性去重 default: 3.615966796875ms 4 indexof去重 default: 8.56396484375ms 5 includes去重 default: 8.193115234375ms 6 filter過濾檢測 default: 8.48291015625ms 7 foreach去重 default: 8.1611328125ms 8 lastindexof去重 default: 3.82177734375ms 9 set方法

default: 1.489990234375ms

首先我建立了乙個大陣列

const
random
=(min, max)
=> math.
floor
(math.
random()
*(max - min)
)+ min;
const arr1 = array.
from
(array
(10000),
(v,k)
=>()
);

網上找了一些方法 ,用了這位博主的 [ 感謝

// methods 1 雙層遍歷
function
unique
(arr)}if
(!repeat)
}return res;
}// methods 2 排序去重
function
unique2
(arr)
}return res;
}// methods 3 物件屬性去重
function
unique3
(arr)
;for
(var i=
0; ireturn res;
}// methods 4 indexof去重
function
unique4
(arr)
}return res;
}// methods 5 includes檢測去重
function
unique5
(arr)
}return res;
}// methods 6 filter過濾檢測
function
unique6
(arr));
return res;
}// methods 7 foreach去重
function
unique7
(arr));
return res;
}// methods 8 lastindexof去重
function
unique8
(arr)
return res;
}// methods 9 set去重
function
unique9
(arr)

列印測試

// 1 雙層遍歷
console.
log(
"1 雙層遍歷"
) console.
time()
unique
(arr1)
console.
timeend()
;// 2 排序去重
console.
log(
"2 排序去重"
) console.
time()
unique2
(arr1)
console.
timeend()
;// 3 物件屬性去重
console.
log(
"3 物件屬性去重"
) console.
time()
unique3
(arr1)
console.
timeend()
;// 4 indexof去重
console.
log(
"4 indexof去重"
) console.
time()
unique4
(arr1)
console.
timeend()
;// 5 includes去重
console.
log(
"5 includes去重"
) console.
time()
unique5
(arr1)
console.
timeend()
;// 6 filter過濾檢測
console.
log(
"6 filter過濾檢測"
) console.
time()
unique6
(arr1)
console.
timeend()
;// 7 foreach去重
console.
log(
"7 foreach去重"
) console.
time()
unique7
(arr1)
console.
timeend()
;// 8 lastindexof去重
console.
log(
"8 lastindexof去重"
) console.
time()
unique8
(arr1)
console.
timeend()
;// 9 set方法
console.
log(
" 9 set方法"
) console.
time()
unique9
(arr1)
console.
timeend()
;

由以上的結果我們可以知道,其實es6去重方法set()效率還是最高的,究其原因,大概是底層的c原始碼實現的緣故.所以在不考慮相容的前提下,大家放心大膽的用new set()方法就行了,假如需要考慮相容問題,indexof也是個不錯的選擇,此方法也是最常用最容易理解的。

2023年-6-25 結論修改：

new set的效率在一萬條資料的情況下，確實是最快的。但是當資料達到百萬千萬級別，for迴圈結合物件屬性的唯一性來實現，效率則更高。研究了幾個es6的api效率的問題，包括filter、map、reduce等方法，它們在一萬條資料計算的情況下，效率優於其他方案。同樣，當資料量達到百萬千萬級別時，for迴圈的一些實現方案則效率更優。所以我們在做js優化的過程中，應該考慮對於不同的資料量選用不同的優化方案才能更好的做好優化。順帶提一句，indexof在大量的資料處理過程中會極大的降低**效能，所以在大量資料處理的**中，我們應該避免使用它。

貼一下以上結論的部分測試**，有興趣的可自行編碼測試

1萬，100萬，

/**
* 研究陣列物件去重的效率問題
* 對陣列進行去重
*/const
random
=(min, max)
=> math.
floor
(math.
random()
*(max - min)
)+ min;
const list = array.
from
(array
(10000),
(v,k)
=>
random(0
,100000))
; console.
time
("set");
let arr = array.
from
(new
set(list));
console.
timeend
("set");
console.
time
("for");
let obj1 =
;let data1 =
;for
(let i =
0, len = list.length; i < len; i++)}
console.
timeend
("for"
);

測試結果

1萬條資料

set: 0.512939453125 ms

for: 4.902099609375 ms

100萬條資料

set: 30.05615234375 ms

for: 17.64111328125 ms

js陣列去重效率測試

陣列去重，效率比較

JS陣列去重，物件去重

js 陣列去重

js陣列去重效率測試

陣列去重，效率比較

JS陣列去重，物件去重

js 陣列去重

相關推薦