淺談Javascript數(shù)組去重

Taste 發(fā)布于2019-08-19 14:48 / 341人閱讀

摘要：總結(jié)，其實數(shù)組去重無非就是判斷一個元素在數(shù)組中是否有重復的值。參考自從數(shù)組去重談性能優(yōu)化也談數(shù)組去重數(shù)組去重謝謝飛的更高指出的問題同步于個人博客

javascript 數(shù)組 array 去重 distinct unique

剛好前天面試的時候面試官問到了數(shù)組去重的問題，當時有點語塞只想到用了兩個循環(huán)檢測（其實模模糊糊想到了hash的方法做但是由于記得不清不敢說= =！），思路是檢測是否有元素重復，然后將只出現(xiàn)一次的元素推入到新數(shù)組中，然后返回新數(shù)組。然后面試官又問這種方法的時間效率，于是黑線了。so這兩天看了一下相關的文章，在這里也總結(jié)一下javascript數(shù)組去重的方法。

兩層循環(huán)檢測重復元素法

首先，介紹一下大家都會想到的兩層循環(huán)的demo，如下例：

function distinct(arr) {
    var ret = [],
        length = arr.length;
    for(var i = 0;i < length; i++){
        for(j = i+1; j

如上的代碼實現(xiàn)是輕松易得的，思路如下：

首先外層循環(huán)比遍歷整個數(shù)組


內(nèi)層循環(huán)匹配是否有值重復
a.如判斷有相同元素則自增i變量，跳出i的循環(huán)
b.如判斷無時則將無相等值的元素推入到ret數(shù)組中
3.返回ret。


優(yōu)點：便捷易懂，大多數(shù)程序員能想到。
缺點：很明顯時間消耗太高，兩層循環(huán)時間消耗太多，時間的消耗為O(n^2^)，在進行大量數(shù)據(jù)處理時會消耗大量資源。而且該方法無法處理字符和數(shù)組，如下例:
var arr = [1,23,4,5,6,7,"1",22,3,1,2];
distinct(arr);                  //返回[23, 4, 5, 6, 7, "1", 22, 3, 1, 2]

所以我們可以開始考慮一些別的方法優(yōu)化數(shù)組去重：
sort重排數(shù)組去除重復元素索引法(!每一個瀏覽器中的sort函數(shù)的排序方法并不一樣，所以實現(xiàn)結(jié)果可能會有差異，經(jīng)測試在chrome下測試別的數(shù)組實現(xiàn)會出現(xiàn)問題）
這種方法就是先講原數(shù)組使用sort方法將數(shù)組重排，以得到將相同元素為相鄰位的一個新數(shù)組。該方法如下：
function distinct(arr){
    var self = arr;
        list = self.concat().sort();
        
    list.sort(function(a, b){
        if(a === b){
            var ind = self.indexOf(a);
            self.splice(ind, 1);
        }
    });
    return self;
}
var arra = [1,2,3,3,1,1,1,"1"];
var arr = distinct(arra);                //返回的數(shù)組為[2,3,1,"1"]
同樣的，在使用這種方法的重排的時候，仍然會有一定的資源消耗，在sort()函數(shù)中回調(diào)函數(shù)是使用的冒泡排序，而冒泡排序的效率并不高。但是使用這種方法的效率仍然比上一種方法的效率高，因為在此例中只出現(xiàn)了一次循環(huán)遍歷。
優(yōu)點：程序簡潔，效率較高。
缺點：1.仍然無法解決數(shù)字1和字符"1"的去除。2.依賴indexOf方法，我們知道在IE6~8中并未支持indexOf()方法。
所以我們還要做一些兼容性的處理。如下:
var indexOf = [].indexOf ?
    function indexOf(arr, item){
        return arr.indexOf(item);
    }:
    function indexOf(arr, item){
        for(var i = 0; i < arr.length; i++){
            if(arr[i] === item){
                retrun i;            
            }
        }
        return -1;
    }
    
function distinct(arr){
    var self = arr;
        list = self.concat().sort();
        
    list.sort(function(a, b){
        if(a === b){
            var ind = self.indexOf(arr, a);
            self.splice(ind, 1);
        }
    });
    return self;
}    

將數(shù)組元素值存為對象的屬性
function distinct(arr) {
    var ret = [],
        json = {},
        length = arr.length;
        
    for(var i = 0; i < length; i++){
        var val = arr[i];
        if(!json[val]){
            json[val] = 1;
            ret.push(val);
        }
    }
    return ret;
}

var arra = [1,2,3,5,7,1,2,"1"];
以上方法更加的簡潔，而且也能在原來的基礎上區(qū)分字符‘1’和數(shù)字1的區(qū)別。
在此例中思路如下：
1.循環(huán)遍歷每一個元素
2.檢測在json對象中是否含遍歷到的元素的值
a: 如果是則跳過
b: 如果否存入json對象中該屬性名的值設為1
3.將存入對象了元素的值推入到新數(shù)組中，返回新數(shù)組。
總結(jié)，其實數(shù)組去重無非就是判斷一個元素在數(shù)組中是否有重復的值。優(yōu)化也是一直改變判定元素是否重復的一些技巧，如例1中是遍歷數(shù)組，例2是重排數(shù)組獲得索引，例3則別出心裁將元素的值作為對象的屬性。
參考自：
從 JavaScript 數(shù)組去重談性能優(yōu)化
也談javascript數(shù)組去重
js數(shù)組去重
謝謝@飛的更高 指出的問題
同步于個人博客：http://penouc.com

GPU云服務器云服務器淺談javascript 數(shù)組去重數(shù)組去重二維數(shù)組去重

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78122.html

淺談JS中 reduce() 的用法

摘要：一語法其中，表示將要原數(shù)組表示上一次調(diào)用回調(diào)時的返回值，或者初始值表示當前正在處理的數(shù)組元素表示當前正在處理的數(shù)組元素的索引，若提供值，則索引為，否則索引為表示初始值。一、語法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示將要原數(shù)組；prev 表示上一次調(diào)用回調(diào)時的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 評論0 收藏0
再見，重復的你（數(shù)組去重）

摘要：前言昨天跟在前端好友聊天時，她提到了一個問題數(shù)組去重你會怎么寫。利用將結(jié)構(gòu)轉(zhuǎn)換成數(shù)組拓展運算符內(nèi)部使用循環(huán)參考淺談數(shù)組去重數(shù)組去重小結(jié)標準入門第版前言昨天跟在前端好友聊天時，她提到了一個問題：數(shù)組去重你會怎么寫？。想了想，其實有好幾種方法，決定在這篇筆記中做一些記錄。思路一：雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時比較值如果有相同的值則跳過，不相同則push進數(shù)組 Array....

EsgynChina 2019-08-19 18:17 評論0 收藏0
JS程序

摘要：設計模式是以面向?qū)ο缶幊虨榛A的，的面向?qū)ο缶幊毯蛡鹘y(tǒng)的的面向?qū)ο缶幊逃行┎顒e，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設計模式必須要先搞懂面向?qū)ο缶幊蹋駝t只會讓你自己更痛苦。 JavaScript 中的構(gòu)造函數(shù) 學習總結(jié)。知識只有分享才有存在的意義。是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數(shù)操作對于什么是匿名函數(shù)，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數(shù)是一個很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個供以后使用的函數(shù)。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執(zhí)行機制本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0
ES6常用語法到Node淺談

摘要：是解釋性語言因服務端的應用，而貫通了前后臺。關于和聲明的變量和聲明的變量整體，會被提升到當前作用域的頂部。做后臺服務端，處理請求的代碼，得自己實現(xiàn)了。為提高下載速度，可通過來切換鏡像源。 JS是解釋性語言,因node服務端的應用，而貫通了前后臺。【ES6】關于var和let var: 1.var聲明的變量和function聲明的變量整體，會被提升到當前作用域的頂部。 2...

weizx 2019-08-21 17:07 評論0 收藏0