JavaScript數(shù)組去重問題的深入研究
前言👀
數(shù)組去重應該是一個很常見的問題了，既然是常見的，那我們就更應該來學習一下！
免得自己不會，尷尬呀~ 嘿嘿
開始研究🐱🏍
原始🧶
數(shù)組去重，最開始我的思路是這樣：定義一個新數(shù)組，完后兩層for循環(huán)，如果數(shù)據(jù)第一次出現(xiàn)，就push到新數(shù)組里，如果重復就break掉，利用j的值與res長度相等這一點來判斷數(shù)據(jù)唯一，最后返回新數(shù)組就行了。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < res.length; j ++){
if(arr[i] === res[j]){
break
}
}
// 如果數(shù)據(jù)第一次出現(xiàn)，那么執(zhí)行完上面for語句后，j的值應該等于res的長度才對
if(j === res.length){
res.push(arr[i])
}
}
return res;
}
console.log(unique(arr));
利用indexOf優(yōu)化原始方法✍
我們先來簡單了解一下indexOf：
indexOf(item,start) 方法可返回數(shù)組中某個指定的元素位置。
該方法將從頭到尾地檢索數(shù)組，看它是否含有對應的元素。開始檢索的位置在數(shù)組 start 處或數(shù)組的開頭（沒有指定 start 參數(shù)時）。如果找到一個 item，則返回 item 的第一次出現(xiàn)的位置。開始位置的索引為 0。
如果在數(shù)組中沒找到指定元素則返回 -1。
看到這大家都明白我們利用的是哪一點了吧，沒錯，就是加粗的那一句話：如果在數(shù)組中沒找到指定元素則返回 -1。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
if(res.indexOf(arr[i]) === -1){
res.push(arr[i])
}
}
return res;
}
console.log(unique(arr));
再次優(yōu)化，filter方法🎉
filter，顧名思義，過濾的意思，該方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
思路：用filter代替一層循環(huán)與indexOf配合，達到過濾效果，直接返回去重過后的數(shù)組。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = arr.filter(function(item,index,arr){
return arr.indexOf(item) === index
})
return res;
}
console.log(unique(arr));
換種思路？變成有序數(shù)組✨
不知道刷過幾天力扣的小伙伴們有沒有這種感覺，看見題目中出現(xiàn)數(shù)組，眼睛就立刻往前瞄了瞄，看看是有序數(shù)組還是無序數(shù)組~
回到這個問題上，我們將要去重的數(shù)組變成有序，重復的數(shù)據(jù)肯定都挨著了，用一個變量存放上一個元素值，再循環(huán)判斷當前值與上一個元素值是否相同，如果不相同，就將它添加到res中。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
var pre
arr = arr.sort()
for(var i = 0; i < arr.length; i++){
if(!i || pre !== arr[i]){
res.push(arr[i])
}
pre = arr[i]
}
return res;
}
console.log(unique(arr));
再再次優(yōu)化，filter🧨
剛剛悟了~，filter好像也可以把排序這里重寫一下，變得更為簡潔，我們直接看代碼：
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = arr.sort().filter(function(item,index,arr){
return !index || item !== arr[index - 1]
})
return res;
}
console.log(unique(arr));
ES6，Set來襲🧸
ES6給我們帶來了很多好處，其中，map、set尤為優(yōu)秀。
Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。
Set 對象允許你存儲任何類型的唯一值，無論是原始值或者是對象引用。
所以我們可以利用Set的這一特性，來進行去重處理。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
return Array.from(new Set(arr))
}
console.log(unique(arr));
注：Set是對象，所以要轉(zhuǎn)成數(shù)組進行返回。
懂解構(gòu)賦值的你，可以再簡化一點🧵
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
return [...new Set(arr)]
}
console.log(unique(arr));
想了解一下解構(gòu)賦值的也可以先康康這個：解構(gòu)運算符的理解與運用
之前學習，記錄的筆記🎨
繼續(xù)優(yōu)秀下去（箭頭函數(shù)）🏆
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66'] var unique = (arr) => [...new Set(arr)] console.log(unique(arr));
最后📖
從最開始的好幾行代碼，到最后利用箭頭函數(shù)，可以一行就寫完，足以見得，只有不斷學習，才能寫出更優(yōu)雅簡潔的代碼。
到此這篇關(guān)于JavaScript數(shù)組去重問的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組去重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何在js中計算兩個時間段重疊的時長問題的相關(guān)資料,判斷兩個時間段是否重疊可以通過比較兩個時間段的開始時間和結(jié)束時間來實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了js如何獲取窗口相對于屏幕左邊和上邊的位置,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了javascript+Canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了JS仿iGoogle自定義首頁模塊拖拽特效的方法,實例分析了頁面的布局及拖拽的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐
本文主要介紹了fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要給大家介紹了關(guān)于如何利用d3.js力導布局繪制資源拓撲圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
jscript之Read an Excel Spreadsheet
jscript之Read an Excel Spreadsheet...2007-06-06
JavaScript中日期函數(shù)的相關(guān)操作知識
日期函數(shù)是我們經(jīng)常用到的知識點，下面通過本文給大家介紹JavaScript中日期函數(shù)的相關(guān)操作知識，非常不錯，感興趣的朋友一起學習吧2016-08-08
在刪除時為了提醒用戶刪除數(shù)據(jù)的不可恢復一般都會有提示處理的，通常會使用js做到這一點，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11