快捷導(dǎo)航

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

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

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

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

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

一、使用 Set 對(duì)象：

Array.from(new Set(array))

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

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

以下是一個(gè)具體的例子：

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);

補(bǔ)充：js數(shù)組對(duì)象去重

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

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

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

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

//reduce第一個(gè)參數(shù)是遍歷需要執(zhí)行的函數(shù)，第二個(gè)參數(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去重

可以判斷多個(gè)屬性，這里判斷了兩個(gè)條件，（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實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法的文章就介紹到這了,更多相關(guān)js數(shù)組對(duì)象去重內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: