7種方法實現陣列去重

2021-09-26 14:36:00 字數 1874 閱讀 6431

去重是開發中經常會碰到的乙個熱點問題,不過目前專案中碰到的情況都是後台介面使用sql去重,簡單高效,基本不會讓前端處理去重。

那麼前端處理去重會出現什麼情況呢?假如每頁顯示10條不同的資料,如果資料重複比較嚴重,那麼要顯示10條資料,可能需要傳送多個http請求才能夠篩選出10條不同的資料,而如果在後台就去重了的話,只需一次http請求就能夠獲取到10條不同的資料。

當然,這並不是說前端去重就沒有必要了,依然需要會熟練使用。本文主要介紹幾種常見的陣列去重的方法。

雙重for(或while)迴圈是比較笨拙的方法,它實現的原理很簡單:先定義乙個包含原始陣列第乙個元素的陣列,然後遍歷原始陣列,將原始陣列中的每個元素與新陣列中的每個元素進行比對,如果不重複則新增到新陣列中,最後返回新陣列;因為它的時間複雜度是o(n^2),如果陣列長度很大,那麼將會非常耗費記憶體

function unique(arr) 

let res = [arr[0]]

for (let i = 1; i < arr.length; i++)

}if (flag)

}return res

}

陣列的indexof()方法可返回某個指定的元素在陣列中首次出現的位置。該方法首先定義乙個空陣列res,然後呼叫indexof方法對原來的陣列進行遍歷判斷,如果元素不在res中,則將其push進res中,最後將res返回即可獲得去重的陣列

function unique(arr) 

let res =

for (let i = 0; i < arr.length; i++)

}return res

}

利用indexof檢測元素在陣列中第一次出現的位置是否和元素現在的位置相等,如果不等則說明該元素是重複元素

function unique(arr) 

return array.prototype.filter.call(arr, function(item, index));

}

這種方法首先呼叫了陣列的排序方法sort(),然後根據排序後的結果進行遍歷及相鄰元素比對,如果相等則跳過改元素,直到遍歷結束

function unique(arr) 

arr = arr.sort()

let res =

for (let i = 0; i < arr.length; i++)

}return res

}

建立空物件,遍歷陣列,將陣列中的值設為物件的屬性,並給該屬性賦初始值1,每出現一次,對應的屬性值增加1,這樣,屬性值對應的就是該元素出現的次數了

function unique(arr) 

let res = ,

obj = {}

for (let i = 0; i < arr.length; i++) else

}return res

}

es6中新增了資料型別set,set的乙個最大的特點就是資料不重複。set函式可以接受乙個陣列(或類陣列物件)作為引數來初始化,利用該特性也能做到給陣列去重

function unique(arr) 

return [...new set(arr)]

}

array.from方法可以將set結構轉換為陣列結果,而我們知道set結果是不重複的資料集,因此能夠達到去重的目的

function unique(arr) 

return array.from(new set(arr))

}

陣列去重是開發中經常會碰到的乙個熱點問題。我們可以根據不同的應用場景來選擇不同的實現方式。

7種方法實現陣列去重

去重是開發中經常會碰到的乙個熱點問題,不過目前專案中碰到的情況都是後台介面使用sql去重,簡單高效,基本不會讓前端處理去重。那麼前端處理去重會出現什麼情況呢?假如每頁顯示10條不同的資料,如果資料重複比較嚴重,那麼要顯示10條資料,可能需要傳送多個http請求才能夠篩選出10條不同的資料,而如果在後...

JavaScript陣列去重12種方法

陣列去重,一般都是在面試的時候才會碰到,一般是要求手寫陣列去重方法的 如果是被提問到,陣列去重的方法有哪些?你能答出其中的10種,面試官很有可能對你刮目相看。在真實的專案中碰到的陣列去重,一般都是後台去處理,很少讓前端處理陣列去重。雖然日常專案用到的概率比較低,但還是需要了解一下,以防面試的時候可能...

JavaScript陣列去重(12種方法)

陣列去重,一般都是在面試的時候才會碰到,一般是要求手寫陣列去重方法的 如果是被提問到,陣列去重的方法有哪些?你能答出其中的10種,面試官很有可能對你刮目相看。在真實的專案中碰到的陣列去重,一般都是後台去處理,很少讓前端處理陣列去重。雖然日常專案用到的概率比較低,但還是需要了解一下,以防面試的時候可能...