js中常見數組去重方法

數組去重的方法

一、利用ES6 Set去重（ES6中最經常使用）數組

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique (arr) { 
      return Array.from(new Set(arr)) //Set()方法打印出來是個沒有重複值的對象，因此要用Array.from方法把它轉成數組後返回
}
console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]

//簡寫：
let arr1 = [...new Set(arr)]
console.log(arr1);

//擴展：將任意個數組合並，並去重
function merge() { 
    return Array.from(new Set(arguments[0].concat(...arguments)))
}
console.log(merge([1, 2, 3, 4], [5, 6, 1, 2], [5, 6, 7, 8, 9]))

//運行結果：
//[ 1, 2, 3, 4, 5, 6, 7, 8, 9]

二、利用for嵌套for，而後splice去重（ES5中最經常使用）性能優化

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr){             
  for(var i=0; i<arr.length; i++){ 
    for(var j=i+1; j<arr.length; j++){ 
      if(arr[i]==arr[j]){  //第一個等同於第二個，splice方法刪除第二個
        arr.splice(j,1);
        j--;
      }
    }
}
  return arr;
}
console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]

三、利用indexOf去重數據結構

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr) { 
//性能優化，首先判斷輸入數據的類型，不是array，直接報錯並返回
  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;
}
console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]

四、利用sort()去重性能

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr) { 
//性能優化，首先判斷輸入數據的類型，不是array，直接報錯並返回
  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;
}
console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]

五、利用對象的屬性不能相同的特色進行去重優化

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr) { 
  if (!Array.isArray(arr)) { 
  //性能優化，首先判斷輸入數據的類型，不是array，直接報錯並返回
    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;
}
console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]

六、利用includes去重spa

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr) { 
    //性能優化，首先判斷輸入數據的類型，不是array，直接報錯
  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
}
console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]

七、利用hasOwnProperty去重code

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr) { 
  var obj = { };
  return arr.filter(function(item, index, arr){ 
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
console.log(unique(arr))
//運行結果：
//[ 1, 'true', true, 15, false, null, NaN, 'NaN', 0, 'a', {} ]

八、利用filter去重對象

var arr = [1,1,'true','true',true,true,15,15,false,false, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{ },{ }];

function unique(arr) { 
      return arr.filter(function(item, index, arr) { 
        //當前元素，在原始數組中的第一個索引==當前索引值，不然返回當前元素
        return arr.indexOf(item, 0) === index;
      });
    }
console.log(unique(arr))
//運行結果：
//[ 1, 'true', true, 15, false, null, 'NaN', 0, 'a', {}, {} ]

九、利用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 ;
    }

十、利用reduce+includes 去重it

var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', { }, { }];

//利用reduce方法 循環遍歷數組，prev做爲上一次計算的結果傳給下一次運算
//在每次計算中，利用數組的includes方法，判斷當前prev中是否含有cur，若是有，則返回當前prev；不然，利用展開運算符合並prev和cur值，最後，返回reduce方法計算的結果

function unique(arr) { 
    return arr.reduce((prev, cur) => { 
        return prev.includes(cur) ? prev : [...prev, cur]
    }, [])  //須要注意的是，當reduce方法有第2個參數時，它爲prev的初始值
}

console.log(unique(arr))
//運行結果：
//[1, "true", true, 15, false, null, NaN, "NaN", 0, "a", {}, {}]