陣列去重的幾種方法及對比
阿新 • • 發佈:2020-11-17
在開發和麵試中總是或多或少會提及陣列去重問題,今天特意花時間整理了一下,涉及到基本資料型別陣列去重及物件陣列去重。
let arr = [1,'a',true,undefined,1,{},NaN,null,{'a':'1','b': '3'},true,NaN,'a',undefined,{'a':'1','b': '2'},,null,{},{'a':'1','b': '2'}]; // 1. 使用for迴圈加indexOf()去重 // 缺陷:只適用於基本資料型別陣列去重,且無法對NaN進行去重,原因:arr.indexOf(NaN)返回值總為-1 function unique1(arr) { let resultArr = []; for (let i = 0; i < arr.length; i++) { if(resultArr.indexOf(arr[i]) < 0) { resultArr.push(arr[i]); } } // console.log(resultArr,'1'); return resultArr; } // 2. 利用ES6中的set資料型別和Array.from()方法去重 // 缺陷:只適用於基本資料型別陣列去重 function unique2(arr) { // console.log(Array.from(new Set(arr)),'2'); return Array.from(new Set(arr)); // 或者如下: // return [...new Set(arr)]; } // 3. 利用ES6中的map方法去重 // 只適用於基本資料型別陣列去重 function unique3(arr) { let map = new Map(); let resultArr = []; for (let i = 0; i < arr.length; i++) { if(!map.has(arr[i])) { map.set(arr[i], true); resultArr.push(arr[i]); } } // console.log(resultArr,'3'); return resultArr; } // 4. 利用filter方法去重 // 原理:根據元素當前所在下標是否為元素第一次出現下標做對比判斷是否重複 // 缺陷:只適用於基本資料型別陣列去重,且會丟失NaN資料,原因:arr.indexOf(NaN)返回值總為-1 function unique4(arr) { let resultArr = arr.filter((item, index, arr) => { return arr.indexOf(item) === index; }) // console.log(resultArr,'4'); return resultArr; } // 5. 藉助ES6中的Array.includes()方法去重 // Array.includes():判斷某陣列中是否包含指定值,返回一個boolean值 // 缺陷:只適用於基本資料型別陣列去重 function unique5(arr) { let resultArr = []; arr.forEach(item => { if(!resultArr.includes(item)) { resultArr.push(item); } }); // console.log(resultArr, '5'); return resultArr; } // 6. 利用Array.reduce()和Array.includes()方法結合去重 // Array.reduce(回撥函式,初始值): 接受一個函式作為累加器,其中prev引數為上一次累加結果 // [...prev,cur]:ES6新增的陣列擴充套件運算子,類似於將cur元素插入到原有的prev陣列後面 // 缺陷:只適用於基本資料型別陣列去重 function unique6(arr) { let resultArr = arr.reduce((prev,cur,index,array) => { return prev.includes(cur) ? prev : [...prev,cur]; }, []); // console.log(resultArr, '6'); return resultArr; } // 物件陣列去重 -- 物件型陣列去重需具體業務邏輯具體分析 let arr2 = [{ id: '01', name: '樂樂' }, { id: '02', name: '博博' }, { id: '01', name: '樂樂2' }, { id: '03', name: '淘淘' }, { id: '04', name: '哈哈' }, { id: '01', name: '樂樂' }, { id: '05', name: '樂樂' }]; unique9(arr2); // 1. 利用物件訪問屬性的方法,判斷物件中是否存在key function unique7(arr) { let resultArr = []; let obj = {}; arr.forEach(item => { let key = item.id + item.name; // 以每一個物件中的id+name作為key來判斷是否存在,過濾掉陣列中id+name相同的物件 if(!obj[key]) { resultArr.push(item); obj[key] = true; } }); // console.log(resultArr, '7'); return resultArr; } // 2. 利用map型別去重,原理同上述方法1 function unique8(arr) { let map = new Map(); let resultArr = []; arr.forEach(item => { let key = item.name; // 以每一個物件中的name作為key來判斷是否存在,過濾掉陣列中name相同的物件 if(!map.has(key)) { resultArr.push(item); map.set(key, true); } }); // console.log(resultArr, '8'); return resultArr; } // 3. 利用Array.reduce()累加器方法去重,原理同上述方法1 function unique9(arr) { let obj = {}; let resultArr = arr.reduce((prev,cur) => { // 以每一個物件中的id作為key來判斷是否存在,過濾掉陣列中id相同的物件 obj[cur.id] ? '' : prev.push(cur) && (obj[cur.id] = true); return prev; }, []); // console.log(resultArr, '9'); return resultArr; }