JavaScript數(shù)組去重（12種方法，史上最全）

rozbo 發(fā)布于2019-08-23 12:01 / 2484人閱讀

摘要：數(shù)組去重，一般都是在面試的時(shí)候才會(huì)碰到，一般是要求手寫數(shù)組去重方法的代碼。如果是被提問到，數(shù)組去重的方法有哪些你能答出其中的種，面試官很有可能對(duì)你刮目相看。數(shù)組去重的方法一利用去重中最常用不考慮兼容性，這種去重的方法代碼最少。

數(shù)組去重，一般都是在面試的時(shí)候才會(huì)碰到，一般是要求手寫數(shù)組去重方法的代碼。如果是被提問到，數(shù)組去重的方法有哪些？你能答出其中的10種，面試官很有可能對(duì)你刮目相看。
在真實(shí)的項(xiàng)目中碰到的數(shù)組去重，一般都是后臺(tái)去處理，很少讓前端處理數(shù)組去重。雖然日常項(xiàng)目用到的概率比較低，但還是需要了解一下，以防面試的時(shí)候可能回被問到。

注：寫的匆忙，加上這幾天有點(diǎn)忙，還沒有非常認(rèn)真核對(duì)過，不過思路是沒有問題，可能一些小細(xì)節(jié)出錯(cuò)而已。

數(shù)組去重的方法 一、利用ES6 Set去重（ES6中最常用）

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
console.log(unique(arr))
?//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考慮兼容性，這種去重的方法代碼最少。這種方法還無法去掉“{}”空對(duì)象，后面的高階方法會(huì)添加去掉重復(fù)“{}”的方法。

二、利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr){            
        for(var i=0; i
雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時(shí)比較值。值相同時(shí)，則刪去這個(gè)值。
想快速學(xué)習(xí)更多常用的ES6語法，可以看我之前的文章《學(xué)習(xí)ES6筆記──工作中常用到的ES6語法》。
三、利用indexOf去重
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log("type error!")
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}沒有去重
新建一個(gè)空的結(jié)果數(shù)組，for 循環(huán)原數(shù)組，判斷結(jié)果數(shù)組是否存在當(dāng)前元素，如果有相同的值則跳過，不相同則push進(jìn)數(shù)組。
四、利用sort()
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log("type error!")
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
     var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
        console.log(unique(arr))
//?[0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}沒有去重
利用sort()排序方法，然后根據(jù)排序后的結(jié)果進(jìn)行遍歷及相鄰元素比對(duì)。
五、利用對(duì)象的屬性不能相同的特點(diǎn)進(jìn)行去重（這種數(shù)組去重的方法有問題，不建議用，有待改進(jìn)）
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log("type error!")
        return
    }
    var arrry= [];
     var  obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            arrry.push(arr[i])
            obj[arr[i]] = 1
        } else {
            obj[arr[i]]++
        }
    }
    return arrry;
}
    var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
        console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]    //兩個(gè)true直接去掉了，NaN和{}去重
六、利用includes
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log("type error!")
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 檢測(cè)數(shù)組是否有某個(gè)值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}沒有去重
七、利用hasOwnProperty
function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了
利用hasOwnProperty 判斷是否存在對(duì)象屬性
八、利用filter
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //當(dāng)前元素，在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值，否則返回當(dāng)前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]
九、利用遞歸去重
function unique(arr) {
        var array= arr;
        var len = array.length;

    array.sort(function(a,b){   //排序后更加方便去重
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //遞歸loop，然后數(shù)組去重
        }
    }
    loop(len-1);
    return array;
}
 var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
十、利用Map數(shù)據(jù)結(jié)構(gòu)去重
function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 數(shù)組用于返回結(jié)果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有該key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果沒有該key值
      array .push(arr[i]);
    }
  } 
  return array ;
}
 var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
    console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
創(chuàng)建一個(gè)空Map數(shù)據(jù)結(jié)構(gòu)，遍歷需要去重的數(shù)組，把數(shù)組的每一個(gè)元素作為key存到Map中。由于Map中不會(huì)出現(xiàn)相同的key值，所以最終得到的就是去重后的結(jié)果。
十一、利用reduce+includes
function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,"true","true",true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,"NaN", 0, 0, "a", "a",{},{}];
console.log(unique(arr));
//?[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
十二、[...new Set(arr)]
[...new Set(arr)] 
//代碼就是這么少----（其實(shí)，嚴(yán)格來說并不算是一種，相對(duì)于第一種方法來說只是簡化了代碼）

PS：有些文章提到了foreach+indexOf數(shù)組去重的方法，個(gè)人覺得都是大同小異，所以沒有寫上去。

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

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

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

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

登陸后可評(píng)論

0條評(píng)論

rozbo

男|高級(jí)講師

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

TA的文章

ffmpeg圖片縮放

閱讀 2152·2021-11-24 09:39
極光KVM：中秋特別活動(dòng),美西洛杉磯cn2 gia vps,21元/月起;香港cn2+bgp直連vp

閱讀 1244·2021-09-10 11:25
LightNode：香港、臺(tái)灣、新加坡等亞洲多地機(jī)房，按小時(shí)計(jì)費(fèi)，月付$7.71起，注冊(cè)最高送$20

閱讀 1923·2021-09-08 10:42
LoRa模塊獲取光照值

閱讀 3876·2021-09-06 15:00
JS基礎(chǔ)入門篇（四十三）—ES6（二）

閱讀 2581·2019-08-30 15:54
前端如何高效的與后端協(xié)作開發(fā)

閱讀 3188·2019-08-29 17:08
css 實(shí)現(xiàn)豎直居中的 N 種場(chǎng)景及 N 種方法

閱讀 3368·2019-08-29 11:26
彈性盒子模型詳解

閱讀 2906·2019-08-28 18:27

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

資訊專欄INFORMATION COLUMN

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

JavaScript數(shù)組去重（12種方法，史上最全）

相關(guān)文章

史上最全的 Python 3 類型轉(zhuǎn)換指南

**最全的數(shù)組去重方法對(duì)比**

**【進(jìn)階3-1期】JavaScript深入之史上最全--5種this綁定全面解析**

史上最全 40 道 Dubbo 面試題及答案，看完碾壓面試官！

馬上收藏！史上最全正則表達(dá)式合集

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

0條評(píng)論

rozbo

男|高級(jí)講師

TA的文章

ffmpeg圖片縮放

極光KVM：中秋特別活動(dòng),美西洛杉磯cn2 gia vps,21元/月起;香港cn2+bgp直連vp

LightNode：香港、臺(tái)灣、新加坡等亞洲多地機(jī)房，按小時(shí)計(jì)費(fèi)，月付$7.71起，注冊(cè)最高送$20

LoRa模塊獲取光照值

JS基礎(chǔ)入門篇（四十三）—ES6（二）

前端如何高效的與后端協(xié)作開發(fā)

css 實(shí)現(xiàn)豎直居中的 N 種場(chǎng)景及 N 種方法

彈性盒子模型詳解

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

JavaScript數(shù)組去重（12種方法，史上最全）

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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