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

EsgynChina 發(fā)布于2019-08-19 18:17 / 2690人閱讀

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

前言

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

思路一：

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

如果有相同的值則跳過(guò)，不相同則push進(jìn)數(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ù)組進(jìn)行操作

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

值相同時(shí)，則刪去這個(gè)值

注意點(diǎn):刪除元素之后，需要將數(shù)組的長(zhǎng)度也減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)點(diǎn)：簡(jiǎn)單易懂
缺點(diǎn)：占用內(nèi)存高，速度慢

思路三：利用對(duì)象的屬性不能相同的特點(diǎn)進(jìn)行去重

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ù)組遞歸去重

運(yùn)用遞歸的思想

先排序，然后從最后開(kāi)始比較，遇到相同，則刪除

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

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

    function loop(index){
        if(index >= 1){
            if(arr[index] === arr[index-1]){
                arr.splice(index,1);
            }
            loop(index - 1);    //遞歸loop函數(shù)進(jìn)行去重
        }
    }
    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方法也可以實(shí)現(xiàn)
        var bool =  arr.indexOf(v,i+1);        //從傳入?yún)?shù)的下一個(gè)索引值開(kāi)始尋找是否存在重復(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（不推薦）

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

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

    list.sort(function(a,b){
        if(a === b){
            var index = arr.indexOf(a);
            arr.splice(index,1);    //在復(fù)制的數(shù)組進(jìn)行排序（相鄰的兩個(gè)元素進(jìn)行比較）時(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]

拓展運(yùn)算符(...)內(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)入門(mén)(第2版)

云服務(wù)器 GPU云服務(wù)器數(shù)組去重數(shù)組去重二維數(shù)組去重 php數(shù)組去重

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79426.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

EsgynChina

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【計(jì)算機(jī)畢業(yè)設(shè)計(jì)】基于ssm家校通網(wǎng)站系統(tǒng)

閱讀 3430·2021-11-11 16:54
三分鐘告訴你軟件測(cè)試工程師到底是不是程序員？讀完你就懂了！

閱讀 3598·2021-10-11 10:58
Realtek SDK漏洞被發(fā)現(xiàn)用來(lái)傳播Mirai bot變體受影響設(shè)備包括中興、華碩等

閱讀 1344·2021-08-30 09:41
對(duì)企業(yè)網(wǎng)站的一些看法

閱讀 1865·2019-08-30 15:54
用ABAP 生成二維碼 QR Code

閱讀 2098·2019-08-30 14:00
常用前端布局，CSS技巧介紹

閱讀 2767·2019-08-29 17:13
關(guān)于文件上傳按鈕樣式美化的一些總結(jié)

閱讀 1724·2019-08-29 15:19
Codepen 每日精選（2018-4-28）

閱讀 725·2019-08-29 15:14

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

參考

相關(guān)文章

CSS技巧 - 收藏集 - 掘金

CSS技巧 - 收藏集 - 掘金

前端空間 - 收藏集 - 掘金

前端空間 - 收藏集 - 掘金

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

發(fā)表評(píng)論

0條評(píng)論

EsgynChina

男|高級(jí)講師

TA的文章

【計(jì)算機(jī)畢業(yè)設(shè)計(jì)】基于ssm家校通網(wǎng)站系統(tǒng)

三分鐘告訴你軟件測(cè)試工程師到底是不是程序員？讀完你就懂了！

Realtek SDK漏洞被發(fā)現(xiàn)用來(lái)傳播Mirai bot變體受影響設(shè)備包括中興、華碩等

對(duì)企業(yè)網(wǎng)站的一些看法

用ABAP 生成二維碼 QR Code

常用前端布局，CSS技巧介紹

關(guān)于文件上傳按鈕樣式美化的一些總結(jié)

Codepen 每日精選（2018-4-28）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

參考

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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