从多个角度详解 map 去重

TYNP • 2024-10-27 23:47 • 编程

一、背景介绍

在前端开发中，经常需要处理一些数据，而对于数据的去重操作，是一件非常常见的任务。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 对象进行去重。深入理解这些去重操作对于优化前端开发效率及性能都有很大的帮助。

原创文章，作者：TYNP，如若转载，请注明出处：https://www.506064.com/n/145276.html