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

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

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

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

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

數(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", {}, {}]

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

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

function unique(arr){            
        for(var i=0; i
雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時比較值。值相同時，則刪去這個值。
想快速學習更多常用的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、{}沒有去重
新建一個空的結果數(shù)組，for 循環(huán)原數(shù)組，判斷結果數(shù)組是否存在當前元素，如果有相同的值則跳過，不相同則push進數(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ù)排序后的結果進行遍歷及相鄰元素比對。
五、利用對象的屬性不能相同的特點進行去重（這種數(shù)組去重的方法有問題，不建議用，有待改進）
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 檢測數(shù)組是否有某個值
                    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) {
    //當前元素，在原始數(shù)組中的第一個索引==當前索引值，否則返回當前元素
    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ù)結構去重
function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 數(shù)組用于返回結果
  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)建一個空Map數(shù)據(jù)結構，遍歷需要去重的數(shù)組，把數(shù)組的每一個元素作為key存到Map中。由于Map中不會出現(xiàn)相同的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數(shù)組去重的方法，個人覺得都是大同小異，所以沒有寫上去。

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

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

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

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

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

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

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

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

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

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

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

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

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

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