JS進階篇5---JS數(shù)組去重的n種方式

baihe 發(fā)布于2019-08-26 10:40 / 375人閱讀

1、利用 indexOf() 方法之一

Array.prototype.unique = function(){
    var temp = [];
    for (var i = 0;i < this.length;i++){
        // 如果當前數(shù)組的第 i 項已經保存到了臨時數(shù)組，那么跳過
        if(temp.indexOf( this[i] ) == -1){
            temp.push( this[i] );
        }
    }
    return temp;
}

2、利用 indexOf() 方法之二

Array.prototype.unique = function(){
    var temp = [ this[0] ];
    for (var i = 1;i < this.length;i++){
        // 如果當前數(shù)組元素在數(shù)組中第一次出現(xiàn)的位置不是i，說明是重復元素
        if(this.indexOf( this[i] ) == i){
            temp.push( this[i] );
        }
    }
    return temp;
}

3、優(yōu)化遍歷數(shù)組法

Array.prototype.unique = function(){
    var hash=[];
    // 雙層循環(huán)，外循環(huán)表示從 0 到 arr.length
    for (var i = 0; i < this.length; i++) {
        // 內循環(huán)表示從 i+1 到 arr.length
        for (var j = i+1; j < this.length; j++) {
            if(this[i]===this[j]){
                // 檢測到有重復值時終止當前循環(huán)同時進入外層循環(huán)的下一輪判斷
                ++i;
            }
        }
        // 將沒重復的右邊值放入新數(shù)組
        hash.push(this[i]);
    }
    return hash;
}

4、排序后再進行數(shù)組去重

Array.prototype.unique = function(){
    this.sort(function( a,b ){ return a-b; });
    var temp = [ this[0] ];
    for (var i = 0;i < this.length;i++){
        if( this[i] != this[i-1]){
            temp.push( this[i] );
        }
    }
    return temp;
}

5、利用數(shù)組 filter 方法過濾

Array.prototype.unique = function unique() {
    var res = this.filter(function(item, index, array) {
        return array.indexOf(item) === index;
    });
  
    return res;
}

6、利用對象屬性的唯一性

Array.prototype.unique = function(){
    var temp = [],hash = {};    // hash 作為哈希表
    for (var i = 0;i < this.length;i++){
        if(!hash[ this[i] ]){    // 如果哈希表中沒有當前項
            hash[ this[i] ] = true;
            temp.push(this[i])
        }
    }
    return temp;
}

7、利用 ES6 set 數(shù)據(jù)結構

Array.prototype.unique = function(){
    return Array.from(new Set(this));
}

上述七種方法中，經測試（測試數(shù)組元素個數(shù)從 1 萬個- 1000 萬個），代碼運行速度從上到下依次降低，其中方法 1 和方法 2 速度差異不大，速度最慢，方法 3 的具體運行速度和數(shù)組具體情況相關，方法 4 速度比方法 1，2，3 快，但比方法 5，6，7 慢得比較多，方法 5，6，7 運行速度最快，且運行速度差異不大，不過鑒于 set 是 ES6 新加內容，在實際開發(fā)環(huán)境中，推薦使用穩(wěn)定性和速度都比較不錯的方法 5 和方法 6 。

拓展：若重復，則去掉該元素

function unique(arr){
    var hash=[];
    for (var i = 0; i < arr.length; i++) {
        if(arr.indexOf(arr[i])==arr.lastIndexOf(arr[i])){
            hash.push(arr[i]);
        }
    }
    return hash;
}

GPU云服務器云服務器進階篇 webrtc進階信令篇 webrtc進階-信令篇 js繼承的幾種方式

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

轉載請注明本文地址：http://systransis.cn/yun/106572.html

數(shù)組去重的正確編寫姿勢

摘要：引言數(shù)組去重是前端面試的一個必備題目，其具體表現(xiàn)內容為怎樣去掉的的重復項。一般姿勢使用數(shù)組的方法可以很簡單的達到目的。所以這算是委曲求全的一種中庸姿勢。改編自劉春龍博客中的文章中數(shù)組去重問題引言數(shù)組去重是前端面試的一個必備題目，其具體表現(xiàn)內容為：怎樣去掉Javascript的Array的重復項。問題簡單直接，咱們也廢話不多說，直入主題吧。一般姿勢使用數(shù)組的indexOf()方法...

G9YH 2019-08-21 10:47 評論0 收藏0
思維導圖整理大廠面試高頻數(shù)組補充1: 最接近的三數(shù)之和和三數(shù)之和的兩個不同之處, 力扣16

摘要：此專欄文章是對力扣上算法題目各種方法的總結和歸納整理出最重要的思路和知識重點并以思維導圖形式呈現(xiàn)當然也會加上我對導圖的詳解目的是為了更方便快捷的記憶和回憶算法重點不用每次都重復看題解畢竟算法不是做了一遍就能完全記住的所 ...

longmon 2021-11-12 10:36 評論0 收藏0
也談面試必備問題之 JavaScript 數(shù)組去重

摘要：而數(shù)組元素去重是基于運算符的。而如果有迭代函數(shù)，則計算傳入迭代函數(shù)后的值，對值去重，調用方法，而該方法的核心就是調用方法，和我們上面說的方法一異曲同工。 Why underscore （覺得這部分眼熟的可以直接跳到下一段了...）最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一些著名框架類庫的源碼，就好像...

Coly 2019-08-21 10:51 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現(xiàn)復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰(zhàn)。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

you_De 2019-08-29 12:34 評論0 收藏0
前端空間 - 收藏集 - 掘金

摘要：封裝手寫的方筆記使用檢測文件前端掘金副標題可以做什么以及使用中會遇到的坑。目的是幫助人們用純中文指南實現(xiàn)復選框中多選功能前端掘金作者緝熙簡介是推出的一個天挑戰(zhàn)。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測試框架 Chai.js 源碼貢獻者之一，Chai.js 中會遇到很多異常處理...

lwx12525 2019-08-20 16:35 評論0 收藏0