成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

再見，重復(fù)的你（數(shù)組去重）

EsgynChina / 2651人閱讀

摘要：前言昨天跟在前端好友聊天時，她提到了一個問題數(shù)組去重你會怎么寫。利用將結(jié)構(gòu)轉(zhuǎn)換成數(shù)組拓展運算符內(nèi)部使用循環(huán)參考淺談數(shù)組去重數(shù)組去重小結(jié)標(biāo)準(zhǔn)入門第版

前言

昨天跟在前端好友聊天時，她提到了一個問題：“數(shù)組去重你會怎么寫？”。想了想，其實有好幾種方法，決定在這篇筆記中做一些記錄。

思路一：

雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時比較值

如果有相同的值則跳過，不相同則push進數(shù)組

Array.prototype.distinct = function(){
    var arr = this,
        result = [],
        i,
        j,
        len = arr.length;

    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] === arr[j]){
                j = ++i;
            }
        }
        result.push(arr[i]);
    }
    return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct();             //返回[3,4,2,1]
思路二：利用splice直接在原數(shù)組進行操作

雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時比較值

值相同時，則刪去這個值

注意點:刪除元素之后，需要將數(shù)組的長度也減1.

Array.prototype.distinct = function (){
    var arr = this,
        i,
        j,
        len = arr.length;

    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] == arr[j]){
                arr.splice(j,1);
                len--;
                j--;
            }
        }
    }
    return arr;
};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

優(yōu)點：簡單易懂
缺點：占用內(nèi)存高，速度慢

思路三：利用對象的屬性不能相同的特點進行去重 
Array.prototype.distinct = function (){
    var arr = this,
        i,
        obj = {},
        result = [],
        len = arr.length;

    for(i = 0; i< arr.length; i++){
        if(!obj[arr[i]]){    //如果能查找到，證明數(shù)組元素重復(fù)了
            obj[arr[i]] = 1;
            result.push(arr[i]);
        }
    }
    return result;
};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56
思路四、數(shù)組遞歸去重

運用遞歸的思想

先排序，然后從最后開始比較，遇到相同，則刪除

Array.prototype.distinct = function (){
    var arr = this,
        len = arr.length;

    arr.sort(function(a,b){        //對數(shù)組進行排序才能方便比較
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(arr[index] === arr[index-1]){
                arr.splice(index,1);
            }
            loop(index - 1);    //遞歸loop函數(shù)進行去重
        }
    }
    loop(len-1);

    return arr;
};

var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
var b = a.distinct();
console.log(b.toString());        //1,2,3,4,5,6,45,56
思路五、利用indexOf以及forEach 
Array.prototype.distinct = function (){
    var arr = this,
        result = [],
        len = arr.length;

    arr.forEach(function(v, i ,arr){        //這里利用map，filter方法也可以實現(xiàn)
        var bool =  arr.indexOf(v,i+1);        //從傳入?yún)?shù)的下一個索引值開始尋找是否存在重復(fù)
        if(bool === -1){
            result.push(v);
        }
    })

    return result;
};

var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
var b = a.distinct();
console.log(b.toString());    //1,23,2,3
思路六、利用indexOf以及sort（不推薦）

注意：這個方法依賴于瀏覽器內(nèi)置Array類的sort方法，由于瀏覽器不同，效果就不同。（經(jīng)實驗，該方法在chrome瀏覽器無法實現(xiàn)去重）

Array.prototype.distinct = function (){
    var arr = this,
        len = arr.length,
        list = arr.concat().sort();    //注意這個地方的concat：復(fù)制一個新的數(shù)組

    list.sort(function(a,b){
        if(a === b){
            var index = arr.indexOf(a);
            arr.splice(index,1);    //在復(fù)制的數(shù)組進行排序（相鄰的兩個元素進行比較）時，操作原有數(shù)組arr
        }
    });
    return arr;
};

var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3,25];
var b = a.distinct();
console.log(b.toString());
思路七、利用ES6的set

Set數(shù)據(jù)結(jié)構(gòu)，它類似于數(shù)組，其成員的值都是唯一的。

利用Array.from將Set結(jié)構(gòu)轉(zhuǎn)換成數(shù)組

function dedupe(array){
    return Array.from(new Set(array));
}

dedupe([1,1,2,3]) //[1,2,3]

拓展運算符(...)內(nèi)部使用for...of循環(huán)

let arr = [3,5,2,2,5,5];
let unique = [...new Set(arr)];    //[3,5,2]
參考

淺談Javascript數(shù)組去重

javascript數(shù)組去重小結(jié)

ES6標(biāo)準(zhǔn)入門(第2版)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79426.html

相關(guān)文章

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續(xù)更新… 一、...

    Jonathan Shieber 評論0 收藏0

  • CSS技巧 - 收藏集 - 掘金

    摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續(xù)更新… 一、...

    SHERlocked93 評論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    you_De 評論0 收藏0

  • 前端空間 - 收藏集 - 掘金

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

    lwx12525 評論0 收藏0

  • JavaScript專題系列20篇正式完結(jié)！

    摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。 寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發(fā)中一些功能點的實現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...

    sixleaves 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<