快捷導(dǎo)航

JavaScript數(shù)組去重由慢到快由繁到簡(jiǎn)(優(yōu)化篇)

更新時(shí)間：2016年08月26日 08:52:00 作者：人在路途

本文給大家介紹通過indexof去重，hash去重，排序后去重及set去重由慢到快有繁到簡(jiǎn)的方法給大家介紹了js數(shù)組去重的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧

在進(jìn)行數(shù)組操作時(shí)往往會(huì)遇到去掉重復(fù)項(xiàng)的問題，下面簡(jiǎn)單介紹下數(shù)組去重的方法。

indexOf去重

Array.prototype.unique1 = function() {
var arr = [];
for (var i = 0; i < this.length; i++) {
var item = this[i];
if (arr.indexOf(item) === -1) {
arr.push(item);
}
}
return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique1(); //[1, 2, 3, "4", 4, "34"]

不過，在 IE6-8 下，數(shù)組的 indexOf 方法還不存在（雖然這已經(jīng)算有點(diǎn)古老的話題了O(∩_∩)O~），但是，程序員就要寫一個(gè)indexOf方法：

var indexOf = [].indexOf ? function(arr, item) {
return arr.indexOf(item);
} :
function indexOf(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return i;
}
}
return -1;
}
Array.prototype.unique2 = function() {
var arr = [];
for (var i = 0; i < this.length; i++) {
var item = this[i];
if (arr.indexOf(item) === -1) {
arr.push(item);
}
}
return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique2(); //[1, 2, 3, "4", 4, "34"]

indexOf還可以以這樣的去重思路：

Array.prototype.unique3 = function(){
var arr = [this[0]]; 
for(var i = 1; i < this.length; i++) 
{
if (this.indexOf(this[i]) == i){
arr.push(this[i]);
} 
}
return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique3(); //[1, 2, 3, "4", 4, "34"]

hash去重

以上indexOf正確性沒問題，但性能上，兩重循環(huán)會(huì)降低性能。那我們就用hash。

Array.prototype.unique4 = function() {
var arr = [];
var hash = {};
for (var i = 0; i < this.length; i++) {
var item = this[i];
var key = typeof(item) + item
if (hash[key] !== 1) {
arr.push(item);
hash[key] = 1;
}
} 
return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique4(); //[1, 2, 3, "4", 4, "34"]

核心是構(gòu)建了一個(gè) hash 對(duì)象來替代 indexOf。空間換時(shí)間。注意在 JavaScript 里，對(duì)象的鍵值只能是字符串（當(dāng)然，ES6提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。也就是說，Object結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的Hash結(jié)構(gòu)現(xiàn)。），因此需要var key = typeof(item) + item 來區(qū)分?jǐn)?shù)值 1 和字符串 '1' 等情況。

那如果你想要'4' 和 4 被認(rèn)為是相同的話（其他方法同理）

Array.prototype.unique5 = function(){
var arr=[];
var hash={};
for(var i=0,len=this.length;i<len;i++){
if(!hash[this[i]]){ 
arr.push(this[i]);
hash[this[i]]=true;
}
}
return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique5(); //[1, 2, 3, "4", "34"]

排序后去重

Array.prototype.unique6 = function(){
this.sort();
var arr = [this[0]];
for(var i = 1; i < this.length; i++){
if( this[i] !== arr[arr.length-1]){
arr.push(this[i]);
}
}
return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique6(); //[1, 2, 3, "34", "4", 4]

先把數(shù)組排序，然后比較相鄰的兩個(gè)值，排序的時(shí)候用的JS原生的sort方法，所以非常快。而這個(gè)方法的缺陷只有一點(diǎn)，比較字符時(shí)按照字符編碼的順序進(jìn)行排序。所以會(huì)看到10排在2前面這種情況。不過在去重中不影響。不過，解決sort的這個(gè)問題，是sort方法接受一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)方法：

function compare(value1,value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
[1,2,5,2,10,3,20].sort(compare); //[1, 2, 2, 3, 5, 10, 20]

Set去重

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。現(xiàn)在瀏覽器正在全面支持，服務(wù)端的node也已經(jīng)支持。

Array.prototype.unique7 = function(){
return Array.from(new Set(this));
}
[1,2,3,'4',3,4,3,1,'34',2].unique7(); //[1, 2, 3, "4", 4, "34"]

方法庫

推薦一個(gè)方法庫Underscore.js，在node或?yàn)g覽器js中都很受歡迎。

const _ = require('underscore');
_.uniq([1, 2, 1, 3, 1, 4]); //[1, 2, 3, 4]

測(cè)試時(shí)間

以上方法均可以用一個(gè)簡(jiǎn)單的方法去測(cè)試一下所耗費(fèi)的時(shí)間,然后對(duì)各個(gè)方法做比較擇優(yōu)：

console.time("test");
[1,2,3,'4',3,4,3,1,'34',2].unique7();
console.timeEnd("test");
==> VM314:3 test: 0.378ms

讓數(shù)據(jù)變得大一點(diǎn)，就隨機(jī)創(chuàng)建100萬個(gè)數(shù)：

var arr = [];
var num = 0;
for(var i = 0; i < 1000000; i++){
num = Math.floor(Math.random()*100);
arr.push(num);
}
console.time("test");
arr.unique7();
console.timeEnd("test");

以上所述是小編給大家介紹的JavaScript數(shù)組去重由慢到快由繁到簡(jiǎn)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: