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

rozbo 發布于2019-08-23 12:01 / 2429人閱讀

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

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

注：寫的匆忙，加上這幾天有點忙，還沒有非常認真核對過，不過思路是沒有問題，可能一些小細節出錯而已。

數組去重的方法 一、利用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", {}, {}]

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

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

function unique(arr){            
        for(var i=0; i
雙層循環，外層循環元素，內層循環時比較值。值相同時，則刪去這個值。
想快速學習更多常用的ES6語法，可以看我之前的文章《學習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、{}沒有去重
新建一個空的結果數組，for 循環原數組，判斷結果數組是否存在當前元素，如果有相同的值則跳過，不相同則push進數組。
四、利用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()排序方法，然后根據排序后的結果進行遍歷及相鄰元素比對。
五、利用對象的屬性不能相同的特點進行去重（這種數組去重的方法有問題，不建議用，有待改進）
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", {…}]    //兩個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 檢測數組是否有某個值
                    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 判斷是否存在對象屬性
八、利用filter
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //當前元素，在原始數組中的第一個索引==當前索引值，否則返回當前元素
    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，然后數組去重
        }
    }
    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數據結構去重
function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 數組用于返回結果
  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]
創建一個空Map數據結構，遍歷需要去重的數組，把數組的每一個元素作為key存到Map中。由于Map中不會出現相同的key值，所以最終得到的就是去重后的結果。
十一、利用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)] 
//代碼就是這么少----（其實，嚴格來說并不算是一種，相對于第一種方法來說只是簡化了代碼）

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

GPU云服務器云服務器 javascript數組方法數組去重數組去重二維數組去重

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97839.html

史上最全的 Python 3 類型轉換指南

摘要：支持轉換為類型的，僅有，其他類型均不支持。如果中含有正負號數字和小數點以外的字符，則不支持轉換。轉換時，會自動添加虛數部分并以表示。轉換會直接完全轉換。轉換列表，會取每個字節的十進制值并組合成列表轉換為比較簡單。 int 支持轉換為 int 類型的，僅有 float、str、bytes，其他類型均不支持。 float -> int 會去掉小數點及后面的數值，僅保留整數部分。 int(-...

libxd 2019-07-30 17:09 評論0 收藏0
最全的數組去重方法對比

摘要：本文最早發布于，為原創常規方法兩種數組深拷貝，為不了影響原來的數組第一種方法常用但是有坑碰到這種情況就出問題了第二種方法使用，方法返回的結果并不一定是升序，主要目的是將重復的數字排到一起使用的方法兩種簡潔優雅版奇技淫巧更新看到評論本文最早發布于csdn，為原創常規方法兩種 let json = arr => { let res = [], obj = {};...

BlackHole1 2019-08-19 18:44 評論0 收藏0
【進階3-1期】JavaScript深入之史上最全--5種this綁定全面解析

摘要：在嚴格模式下調用函數則不影響默認綁定。回調函數丟失綁定是非常常見的。因為直接指定的綁定對象，稱之為顯示綁定。調用時強制把的綁定到上顯示綁定無法解決丟失綁定問題。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第三期，本周的主題是this全面解析，今天是第9天。本計劃一共28期，每期重點攻克一個面試重...

xavier 2019-08-23 13:47 評論0 收藏0
史上最全 40 道 Dubbo 面試題及答案，看完碾壓面試官！

摘要：更是中高級面試過程中經常會問的技術，無論你是否用過，你都必須熟悉。下面我為大家準備了一些常見的的面試題，一些是我經常問別人的，一些是我過去面試遇到的一些問題，總結給大家，希望對大家能有所幫助。想往高處走，怎么能不懂 Dubbo？ Dubbo是國內最出名的分布式服務框架，也是 Java 程序員必備的必會的框架之一。Dubbo 更是中高級面試過程中經常會問的技術，無論你是否用過，你都必須...

nemo 2019-08-19 11:17 評論0 收藏0
馬上收藏！史上最全正則表達式合集

摘要：今天小肆先把我自己收藏的一些正則表達式寫法分享給大家，當然想深入學習如何寫正則表達式，可以去看看教程。今天閑話少說，小肆直接給大家上干貨，收到的同時別忘了關注我的公眾號技術放肆聊哦。前言正則表達式，新手見它的感覺就是這都什么玩意，亂七八糟的，完全不知所云，但學會它就會體驗那種一行代碼抵數十上百行，效率飛起的感覺，簡直不要太爽。今天小肆先把我自己收藏的一些正則表達式寫法分享給大家，...

mengbo 2019-07-01 11:10 評論0 收藏0