JavaScript實現數組對象去重的多種方法
更新時間：2023年02月10日 14:13:25 作者：於生
這篇文章主要介紹了JavaScript實現數組對象去重的多種方法，使用set對象或使用`reduce`方法，本文結合示例代碼給大家介紹的非常詳細，需要的朋友參考下吧
JavaScript實現數組對象去重的多種方法
有多種實現方式：
一、使用 Set 對象：
Array.from(new Set(array))
該方法會先創(chuàng)建一個 Set 對象，然后再使用 Array.from 方法將 Set 對象轉換為數組，因為 Set 對象不允許有重復的元素，所以這樣可以實現去重的效果。
但是，如果數組中的元素是對象，Set 對象會識別為不同的元素，所以不能直接使用該方法。為了解決這個問題，你可以使用一個映射函數，將數組中的對象映射為一個字符串或數字，然后再使用該方法。
以下是一個具體的例子：
const arr = [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 1, name: 'A' },
{ id: 3, name: 'C' }
];
const result = Array.from(new Set(arr.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
console.log(result);二、使用`reduce`方法：
const arr = [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 1, name: 'A' },
{ id: 3, name: 'C' }
];
const result = arr.reduce((pre, cur) => {
var exists = pre.find(item => JSON.stringify(item) === JSON.stringify(cur));
if (!exists) {
pre.push(cur);
}
return pre;
}, []);
console.log(result);三、使用`filter`方法
const arr = [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 1, name: 'A' },
{ id: 3, name: 'C' }
];
const result =arr.filter((item, index, self) => {
return self.findIndex(t => JSON.stringify(t) === JSON.stringify(item)) === index;
});
console.log(result);補充：js數組對象去重
1、使用reduce()方法對象數組去重
通過數組的reduce()方法對數組的對象從左到右進行處理，定義一個空對象obj{}；
如果數組當前對象的name不在obj{}，就將當前對象的name加入到空對象，并將當前對象push到積累變量total數組里；
如果當前對象的name存在obj{}，則跳過push操作。
//reduce第一個參數是遍歷需要執(zhí)行的函數，第二個參數是item的初始值
var arr = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"張三"}];
var obj = {};
arr = arr.reduce(function(item, next) {
obj[next.id] ? '' : obj[next.id] = true && item.push(next);
return item;
}, []);
console.log(arr);2、利用set去重
可以判斷多個屬性，這里判斷了兩個條件，（id 和 name）
var arr2 = [{"id":1,"name":"張三"},{"id":2,"name":"李四"},{"id":3,"name":"王五"},{"id":2,"name":"張三"},{'id':4,'name':'李四'}];
function unique(arr){
const res= new Map()
return arr.filter((a)=> !res.has(a.id) && res.set(a.id,1) && !res.has(a.name) && res.set(a.name,1))
}
//輸出結果：
unique(arr2)
[
{
"id": 1,
"name": "張三"
},
{
"id": 2,
"name": "李四"
},
{
"id": 3,
"name": "王五"
}
]到此這篇關于JavaScript實現數組對象去重的多種方法的文章就介紹到這了,更多相關js數組對象去重內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了js實現旋轉的星空效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章介紹了echarts實現餅圖與樣式設置的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
動態(tài)添加js事件，主要是不用具體指定位置的事件，這種動態(tài)添加事件的方法比較方便，并可以擴展等。2009-03-03
最近聽說了一個名詞word宏編程。自己也學習了一下js動態(tài)添加word表格2010-06-06
JS+flash實現chrome和ie瀏覽器下同時可以復制粘貼
chrome和ie同時可以復制粘貼，想必大家一直思索的問題在本文將有一個不錯的實現，下面為大家介紹下JS+flash是如何實現的，感興趣的朋友可以參考下2013-09-09
設置div的值想必大家都會吧，按要說動態(tài)設置想必知道的人及寥寥無幾了，下面有個不錯的示例，希望對大家有所幫助2013-10-10
本文通過實例給大家詳細介紹了get post jsonp三種數據交互形式，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
本文主要對Javascript的外部對象進行介紹，列舉了具體實例。便于理解。有需要的朋友可以看下2016-12-12
這篇文章主要介紹了JavaScript框架特性，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家學習介紹了JS如何實現根據URL批量下載文件并壓縮成zip文件，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-08-08