JavaScript數(shù)組去重的七種方法及特殊數(shù)據(jù)類型處理詳解
更新時間：2025年05月22日 11:32:50 作者：WAKEUP369
這篇文章主要介紹了數(shù)組去重的必要性及七種常見方法,涵蓋ES6 Set、filter、循環(huán)等技術,并提及處理對象與NaN等特殊數(shù)據(jù)的注意事項,需要的朋友可以參考下
一、為什么需要數(shù)組去重？
在數(shù)據(jù)處理場景中，重復元素會導致：
- 統(tǒng)計結果失真
- 渲染性能下降（如列表重復渲染）
- 接口重復提交風險
- 存儲空間浪費
通過去重操作可提升數(shù)據(jù)純凈度，優(yōu)化應用性能。以下 7 種常見實現(xiàn)方案。
二、去重方法
1. ES6 Set
function removeDuplicatesWithSet(arr) {
return [...new Set(arr)];
}
原理：
利用 Set 數(shù)據(jù)結構自動去重的特性，通過擴展運算符快速轉換回數(shù)組
2. filter + indexOf
function removeDuplicatesWithFilter(arr) {
return arr.filter((item, index) => arr.indexOf(item) === index);
}
原理：
通過 indexOf 檢查元素首次出現(xiàn)位置，過濾非首次出現(xiàn)的元素
3. ** for 循環(huán)法**
function removeDuplicatesWithFor(arr) {
const uniqueArray = [];
for (let i = 0; i < arr.length; i++) {
if (uniqueArray.indexOf(arr[i]) === -1) {
uniqueArray.push(arr[i]);
}
}
return uniqueArray;
}
4. 雙重 for 循環(huán)法
function removeDuplicatesWithDoubleFor(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
5. indexOf 首現(xiàn)檢測法
function removeDuplicatesWithIndexOf(arr) {
const uniqueArray = [];
for (let i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) === i) {
uniqueArray.push(arr[i]);
}
}
return uniqueArray;
}
原理：
利用 indexOf 返回首個匹配索引的特性
6. includes 檢測法
function removeDuplicatesWithIncludes(arr) {
const uniqueArray = [];
for (let item of arr) {
if (!uniqueArray.includes(item)) {
uniqueArray.push(item);
}
}
return uniqueArray;
}
7. reduce 累積法
function removeDuplicatesWithReduce(arr) {
return arr.reduce((acc, curr) => {
return acc.includes(curr) ? acc : [...acc, curr];
}, []);
}
三、特殊數(shù)據(jù)類型處理
- 對象去重：
// 根據(jù)特定屬性去重
const uniqueByKey = (arr, key) => {
const seen = new Set();
return arr.filter(item =>
seen.has(item[key]) ? false : seen.add(item[key])
};
- NaN 處理：
indexOf無法檢測 NaN（返回 -1）includes可識別 NaN
以上就是JavaScript數(shù)組去重的七種方法及特殊數(shù)據(jù)類型處理詳解的詳細內容，更多關于JavaScript數(shù)組去重及特殊數(shù)據(jù)處理的資料請關注腳本之家其它相關文章！
相關文章
目前用TypeScript的人越來越多,尤其是一些大廠,大的項目,github上面很多開源項目也都是ts語法編譯的,這篇文章主要給大家介紹了關于TypeScript學習筆記之類型窄化的相關資料,需要的朋友可以參考下2021-09-09
JavaScript統(tǒng)計數(shù)組中相同的數(shù)量的方法總結
在JavaScript中，我們經常需要對數(shù)組中對象的屬性進行統(tǒng)計。在本文中，我們將介紹如何使用JavaScript來實現(xiàn)這一功能，文中有詳細的代碼示例，需要的朋友可以借鑒參考2023-05-05
利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南
這篇文章主要給大家介紹了關于利用uniapp+vue3+js適配微信隱私協(xié)議開發(fā)指南的相關資料,適配最新微信小程序隱私協(xié)議開發(fā)指南,兼容uniapp版本,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了js+HTML5基于過濾器從攝像頭中捕獲視頻的方法,涉及javascript基于html5元素操作多媒體的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了js+audio實現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
我們知道，在js中，函數(shù)實際上是一個對象，每個函數(shù)都是Function類型的實例，并且都與其他引用類型一樣具有屬性和方法。下面給大家談下對JS中函數(shù)function的理解，一起看看吧2016-10-10
location.href 在IE6中不跳轉的解決方法與推薦使用代碼
在js中，我們經常使用location.href來實現(xiàn)頁面的跳轉，為了方便我們寫成函數(shù)。下面就分別說明下，下面的一些代碼的實現(xiàn)問題。2010-07-07
這篇文章主要為大家詳細介紹了js仿微信語音播放的實現(xiàn)思路，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)拖動的方法有很多，在本文將為大家介紹下使用getBoundingClientRect()方法是如何實現(xiàn)的，感興趣的朋友不要錯過2013-11-11
這篇文章主要為大家詳細介紹了JavaScript Ajax實現(xiàn)異步通信的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12