從多個角度詳解 map 去重

一、背景介紹

在前端開發中，經常需要處理一些數據，而對於數據的去重操作，是一件非常常見的任務。map 是一種十分常用的數據結構，也是一種進行去重操作的好幫手。

二、方法介紹

下面我們就從幾個角度來詳解如何運用 map 實現一些高效的去重操作。

三、基礎去重

map 最基本的用途就是進行去重，我們可以簡單的將需要去重的數據作為 map 的鍵，這樣就可以通過 map 的鍵的唯一性來實現去重。下面是一段實現基礎去重的代碼。

const arr = [1, 2, 3, 3, 4, 5, 5];
const map = new Map();
arr.forEach(item => {
    map.set(item, true);
});
console.log([...map.keys()]); // [1,2,3,4,5]

上面的代碼中，通過遍曆數組，將每個元素作為鍵來存儲在 map 中，由於 map 的鍵的唯一性，存儲相同的元素時，後一次存儲會覆蓋前一次存儲，最終只保留了一個副本。

四、對象數組去重

在前端開發中，經常會遇到需要對一個包含多個對象的數組進行去重的情況，這時我們可以使用 JSON.stringify 的方式將對象序列化成字元串再存儲到 map 中。下面是一段對象數組去重的代碼。

const arr = [
    {name: 'apple', price: 2},
    {name: 'banana', price: 3},
    {name: 'apple', price: 2},
    {name: 'orange', price: 4}
];
const map = new Map();
arr.forEach(item => {
    map.set(JSON.stringify(item), item);
});
console.log([...map.values()]); // [{name: 'apple', price: 2}, {name: 'banana', price: 3}, {name: 'orange', price: 4}]

上述代碼中，遍歷對象數組，將每個對象序列化成字元串，然後使用序列化後的字元串作為鍵，原始對象作為值進行存儲。由於對象的屬性值順序不同會導致序列化後的字元串不同，從而起到了去重的作用。

五、多欄位去重

有時候我們需要按照多個欄位進行去重，這時我們可以將這些欄位拼接起來作為鍵存儲在 map 中。下面是一段實現多欄位去重的代碼。

const arr = [
    {name: 'apple', price: 2, color: 'red'},
    {name: 'banana', price: 3, color: 'yellow'},
    {name: 'apple', price: 2, color: 'green'},
    {name: 'orange', price: 4, color: 'orange'}
];
const map = new Map();
arr.forEach(item => {
    const key = item.name + '-' + item.price + '-' + item.color;
    map.set(key, item);
});
console.log([...map.values()]); // [{name: 'apple', price: 2, color: 'red'}, {name: 'banana', price: 3, color: 'yellow'}, {name: 'orange', price: 4, color: 'orange'}]

上述代碼中，按照每個對象的 name、price、color 這三個屬性拼接成一個字元串作為鍵進行存儲，這樣就可以實現按照多個欄位進行去重。

六、Set 對象去重

除了使用 map 進行去重之外，我們還可以使用 JavaScript 的原生對象 Set 來對數據進行去重。Set 對象是一種無序且不重複的數據集合，可以用來快速判斷一個元素是否出現在集合中。下面是一段使用 Set 對象實現去重的代碼。

const arr = [1, 2, 3, 3, 4, 5, 5];
const set = new Set(arr);
console.log([...set]); // [1,2,3,4,5]

上述代碼中，通過向 Set 對象中傳遞數組來創建一個集合對象，在構建時，Set 對象會自動進行去重操作。最終可以通過將 Set 對象轉換成數組來輸出結果。

七、小結

本文從多個角度闡述了如何使用 map 構建去重邏輯，包括基礎去重、對象數組去重、多欄位去重以及使用 Set 對象進行去重。深入理解這些去重操作對於優化前端開發效率及性能都有很大的幫助。