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