1. 程式人生 > >JS實現陣列去重總結

JS實現陣列去重總結

在真實的專案中碰到的陣列去重,一般都是後臺去處理,很少讓前端處理陣列去重。雖然日常專案用到的概率比較低,但還是需要了解一下

一、[...new Set(arr)]

      [...new Set(arr)] //利用Set資料結構不存在重複值的特性,轉化為Set類陣列去重,通過‘...’擴充套件運算子將lei陣列轉為陣列

二、利用ES6 Set去重(ES6中最常用)

function unique(arr) { return Array.from(new Set(arr)) } let arr = [1,'true', true,null, NaN,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}] console.log(unique(arr))   不考慮相容性,這種去重的方法程式碼最少。這種方法還無法去掉“{}”空物件,後面的高階方法會新增去掉“{}”空物件。
 測試結果如下

   

三、利用filter

function unique(arr) { return arr.filter(function(item, index,arr){ return arr.indexOf(item, 0) === index; }); } let arr = [1,1, 4,5,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}] console.log(unique(arr)) 測試結果如下  

四、利用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); }); } let arr = [1,1, 4,5,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}] console.log(unique(arr)) 利用hasOwnProperty 判斷是否存在物件屬性
 

五、利用for巢狀for,然後splice去重(ES5中最常用)

function unique(arr) { for(let i=0; i<arr.length;i++){ for(let j=i+1; j<arr.length; j++){ if(arr[i] == arr[j]){ //第一個等同於第二個,splice方法刪除第二個 arr.splice(j,1); j--; } } } return arr } let arr = [1,'true', true,null, NaN,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}] console.log(unique(arr))   雙層迴圈,外層迴圈元素,內層迴圈時比較值。值相同時,則刪去這個值。

 執行如下圖

六、利用indexOf去重

function unique(arr) { if(!Array.isArray(arr)){ console.log('type error') return } let array = [] for(let i=0; i<arr.length;i++){ if (array.indexOf(arr[i]) === -1){ array.push(arr[i]) } } return array; } let arr = [1,'true', true,null, NaN,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}] console.log(unique(arr))

新建一個空的結果陣列,for 迴圈原陣列,判斷結果陣列是否存在當前元素,如果有相同的值則跳過,不相同則push進陣列。

 執行結果如下,依然無法去掉{}空物件

  

 

七、利用sort()

function unique(arr) { if(!Array.isArray(arr)){ console.log('type error') return } arr = arr.sort() let array = [arr[0]] for(let i= 1; i<arr.length;i++){ if (arr[i] !== arr[i-1]){ array.push(arr[i]) } } return array; } let arr = [1,1, 4,5, 4,'NaN',0, 'a',{},1,'true', true,null, NaN,'NaN',0, 'a',{}] console.log(unique(arr))

利用sort()排序方法,然後根據排序後的結果進行遍歷及相鄰元素比對,不推薦,針對全是數字的陣列。

測試如下圖