首頁 > web前端 > js教程 > 主體

操作js數組去重的方法

小云云
發布: 2018-03-31 17:04:19
原創
2474 人瀏覽過

陣列去重算是個老生常談的問題了,不管是面試還是工作都會有所涉及,去重的方法比較多,不好說誰一定好誰一定差,可根據實際需求進行選擇。本文列舉一些常見的去重方法,並附上方法優劣與適用場合,如有紕漏請指正。

1. 二重循環對比法:

const array = [1, NaN, '1', null, /a/, 1, undefined, null, NaN, '1', {}, /a/, [], undefined, {}, []];function uniqueByCirculation(arr) {
  const newArr = [];  let isRepet = false;    for(let i=0;i < arr.length; i++) {    for(let j=0;j < newArr.length; j++) {      if(arr[i] === newArr[j]) {
        isRepet = true;
      }
    };    if(!isRepet) {
      newArr.push(arr[i]);
    };
  };  return newArr;
}const uniquedArr = uniqueByCirculation(array);
console.log(uniquedArr);
登入後複製

結果:操作js數組去重的方法,從結果可以看出Array、Object、RegExp進行了保留, NaN沒有去重,原因就牽涉到「===」的比較機制了,詳情可閱:操作js數組去重的方法
此方法時間複雜度O(NlogN),空間複雜度O(N),適用場合:資料型別簡單,資料量少。
2. indexOf法:

const array = [1, NaN, &#39;1&#39;, null, /a/, 1, undefined, null, NaN, &#39;1&#39;, {}, /a/, [], undefined, {}, []];function uniqueByIndexOf(arr) {  return arr.filter((e, i) => arr.indexOf(e) === i);
}const uniquedArr = uniqueByIndexOf(array);console.log(uniquedArr);
登入後複製

結果:操作js數組去重的方法
程式碼簡單粗暴,從結果來看,NaN沒了,Array、Object、RegExp進行了保留,這是因為Array.indexOf(NaN)總是會回傳-1,其他複雜類型回傳的值總是等於自己index,因此得到這樣的結果。此方法時間空間複雜度和二重循環一致,適用場合相仿,當然二者相比還是首推這個,畢竟程式碼短啊。
3. Object[key]法: (個人深度加強版)

const array = [1, &#39;1&#39;, NaN, 1, &#39;1&#39;,NaN, -0, +0, 0, null, /a/, null, /a/, [], {}, [], {}, [1,2,[2,3]], [1,2,[2,3]], [1,2,[3,2]], undefined,
  {a:1,b:[1,2]}, undefined, {b:[2,1],a:1}, [{a:1},2], [2,{a:1}], {a:{b:1,d:{c:2,a:3},c:1},c:1,d:{f:1,b:2}}, {a:{b:1,d:{c:2,a:3},c:1},c:1,d:{f:1,b:2}}];function uniqueByObjectKey(arr) {
  const obj = {};  const newArr = [];  let key = &#39;&#39;;
  arr.forEach(e => {    if(isNumberOrString(e)) { // 针对number与string和某些不适合当key的元素进行优化
      key = e + typeof e;
    }else {      if(e&&isObject(e)){  // 解决同key同value对象的去重
        e = depthSortObject(e);
      }
      key = JSON.stringify(e) + String(e); //JSON.stringify(e)为了应对数组或对象有子内容,String(e)为了区分正则和空对象{}
    }    if(!obj[key]) {
      obj[key] = key;
      newArr.push(e);
    }
  });  return newArr;
}function isNumberOrString(e){
  return typeof e === &#39;number&#39; || typeof e === &#39;string&#39;;
}function isObject(e){
  return e.constructor === Object;
}function depthSortObject(obj){
    if(obj.constructor !== Object){      return;
    }    const newobj = {};    for(const i in obj){
        newobj[i] = obj[i].constructor === Object ? 
        sortObject(depthSortObject(obj[i])) : obj[i]; 
    } 
    return newobj;
}function sortObject(obj){
  const newObj = {};  const objKeys = Object.keys(obj)
  objKeys.sort().map((val) => {
      newObj[val] = obj[val];
  });  return newObj;
}const uniquedArr = uniqueByObjectKey(array);
console.log(uniquedArr);
登入後複製

結果:操作js數組去重的方法此方法得到了「深去重*」的結果,因為我在函數中加了一些類型判斷改變key,直接暴力object[原始key]會出現number與string被捨一,而且很多類型無法成為key,寫函數過程中被JSON.stringify(/a/)坑了,還一直以為是{}的問題·~·,後來輸出所以key才發現JSON.string(/a/) === '{}',而String([]) === ”,所以得兩個都轉然後相加以避免意外。無序的,即{a:1,b:2}應該與{b:2,a:1}等價,所以深度去重把Object內部key:value都相同也進行去重)。 . ES6 Set法:

const array = [1, NaN, &#39;1&#39;, null, /a/, 1, undefined, null, NaN, &#39;1&#39;, {}, /a/, [], undefined, {}, []];function uniqueByES6Set(arr) {
  return Array.from(new Set(arr))  // return [...new Ser(arr)]}const uniquedArr = uniqueByES6Set(array);
console.log(uniquedArr);
登入後複製

結果:

操作js數組去重的方法從結果看Array、Object、RegExp進行了保留,此方法原理是ES6的新數據結構Set,裡面存儲無序不重複數據,Set結構詳情參閱:Set與Map-阮一峰,空間複雜度O(N),時間複雜度位置,·這方法速度很快,保留複雜物件時直接用這個最好咯。 Map法:

const array = [1, NaN, &#39;1&#39;, null, /a/, 1, undefined, null, NaN, &#39;1&#39;, {}, /a/, [], undefined, {}, []];function uniqueByES6Map(arr) {
  const map = new Map();  return arr.filter(e => {    return map.has(e) ? false : map.set(e, &#39;map&#39;)
  })
}const uniquedArr = uniqueByES6Map(array);
console.log(uniquedArr);
登入後複製

結果:結果和用Set時一樣的,主要用到了ES6的新資料結構Map,Map以key-value組映射存儲,特點是key可以為任意類型,透過hash位址映射數據,時間複雜度O(1),空間複雜度比O(N),不過實際花費位址比Set的大些,也適用於保留複雜物件的情況。 #本文記載了五種較為常見的數組除重方式,原則上直接用ES6的Set來的最快,如果有要除物件數組的可以使用第三種,當然第三種稍微一改結果就和後面的一樣了

操作js數組去重的方法

數組去重算是個老生常談的問題了,不管是面試還是工作都會有所涉及,去重的方法比較多,不好說誰一定好誰一定差,可根據實際需求進行選擇。 #PHP陣列去重較快的實作方式

JS陣列去重方法總結


js的陣列去重實例詳解

以上是操作js數組去重的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!