快捷導(dǎo)航

JavaScript實現(xiàn)數(shù)組對象去重的多種方法

更新時間：2023年02月10日 14:13:25 作者：於生

這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組對象去重的多種方法，使用set對象或使用`reduce`方法，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友參考下吧

JavaScript實現(xiàn)數(shù)組對象去重的多種方法

有多種實現(xiàn)方式：

一、使用 Set 對象：

Array.from(new Set(array))

該方法會先創(chuàng)建一個 Set 對象，然后再使用 Array.from 方法將 Set 對象轉(zhuǎn)換為數(shù)組，因為 Set 對象不允許有重復(fù)的元素，所以這樣可以實現(xiàn)去重的效果。

但是，如果數(shù)組中的元素是對象，Set 對象會識別為不同的元素，所以不能直接使用該方法。為了解決這個問題，你可以使用一個映射函數(shù)，將數(shù)組中的對象映射為一個字符串或數(shù)字，然后再使用該方法。

以下是一個具體的例子：

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數(shù)組對象去重

1、使用reduce()方法對象數(shù)組去重

通過數(shù)組的reduce()方法對數(shù)組的對象從左到右進行處理，定義一個空對象obj{}；

如果數(shù)組當(dāng)前對象的name不在obj{}，就將當(dāng)前對象的name加入到空對象，并將當(dāng)前對象push到積累變量total數(shù)組里；

如果當(dāng)前對象的name存在obj{}，則跳過push操作。

//reduce第一個參數(shù)是遍歷需要執(zhí)行的函數(shù)，第二個參數(shù)是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))
}
//輸出結(jié)果：
unique(arr2)
[
    {
        "id": 1,
        "name": "張三"
    },
    {
        "id": 2,
        "name": "李四"
    },
    {
        "id": 3,
        "name": "王五"
    }
]

到此這篇關(guān)于JavaScript實現(xiàn)數(shù)組對象去重的多種方法的文章就介紹到這了,更多相關(guān)js數(shù)組對象去重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: