去重是開發中經常會碰到的乙個熱點問題,不過目前專案中碰到的情況都是後台介面使用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種,面試官很有可能對你刮目相看。在真實的專案中碰到的陣列去重,一般都是後台去處理,很少讓前端處理陣列去重。雖然日常專案用到的概率比較低,但還是需要了解一下,以防面試的時候可能...