JavaScript數(shù)組去重的七種方法及特殊數(shù)據(jù)類型處理詳解
更新時(shí)間：2025年05月22日 11:32:50 作者：WAKEUP369
這篇文章主要介紹了數(shù)組去重的必要性及七種常見方法,涵蓋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)
通過去重操作可提升數(shù)據(jù)純凈度，優(yōu)化應(yīng)用性能。以下 7 種常見實(shí)現(xiàn)方案。
二、去重方法
1. ES6 Set
function removeDuplicatesWithSet(arr) {
return [...new Set(arr)];
}
原理：
利用 Set 數(shù)據(jù)結(jié)構(gòu)自動(dòng)去重的特性，通過擴(kuò)展運(yùn)算符快速轉(zhuǎn)換回?cái)?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)檢測(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無法檢測(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)文章
在2016年10月11日facebook 公開了新的javascript包管理工具 yarn, 用來替代目前被廣泛使用的npm(nodejs 自帶的包管理工具)，本文將介紹yarn工具帶來的優(yōu)點(diǎn)和使用入門，以及對(duì)比npm解決了什么問題，帶來哪些便利。有需要的朋友們下面來一起看看吧。2016-12-12
JavaScript第七種數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個(gè)獨(dú)一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用，需要的可以參考一下2022-09-09
本文主要介紹了使用javascript來控制背景圖片的顯示和隱藏，當(dāng)點(diǎn)擊關(guān)閉按鈕時(shí)，控制CSS使頁面不加載背景圖，同時(shí)記錄COOKIE相關(guān)參數(shù)，并設(shè)置cookie的有效期2014-02-02
JavaScript中in和hasOwnProperty區(qū)別詳解
in操作符只要通過對(duì)象能訪問到屬性就返回true。hasOwnProperty()只在屬性存在于實(shí)例中時(shí)才返回true。下面通過本文給大家分享JavaScript中in和hasOwnProperty區(qū)別詳解，感興趣的朋友一起看看吧2017-08-08
js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法
這篇文章主要介紹了js模擬淘寶網(wǎng)的多級(jí)選擇菜單實(shí)現(xiàn)方法,涉及javascript針對(duì)頁面元素結(jié)點(diǎn)的遍歷與設(shè)置等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
俗話說，自己動(dòng)手豐衣足食。直接拿Firebug找到字幕文件地址，下載下來看到是JSON格式的，隨即想到直接用JS輸出字符串就可以轉(zhuǎn)換到srt字幕。2009-10-10
原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法，由于遇到相關(guān)序列化的問題，但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制，導(dǎo)致不能用$.param來序列化參數(shù)，下面小編給大家分享了實(shí)例代碼，需要的朋友參考下吧2018-08-08
微信小程序 自定義彈窗實(shí)現(xiàn)過程(附代碼)
這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過程(附代碼),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript時(shí)間與時(shí)間戳的轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript時(shí)間與時(shí)間戳的轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了javascript日期與時(shí)間戳轉(zhuǎn)換相關(guān)函數(shù)與操作技巧,需要的朋友可以參考下2018-12-12
JavaScript中關(guān)于Object.create()的用法
這篇文章主要介紹了JavaScript中關(guān)于Object.create()的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02