1. 前言
JavaScript 数组是一个非常实用和常用的数据类型,在实际开发中经常会用到数组去存储数据,但是数组中可能会存在重复元素,这时候就需要用到去重操作。本文将介绍几种从 JavaScript 数组中删除重复元素的方法。
2. 使用 Set 去重
2.1 Set 的概念
Set 是 ES6 中新增的一个数据类型,它可以用来存储任意类型的唯一值,每个值在 Set 中只出现一次。
它的声明方法为:
const mySet = new Set();
向 Set 中添加元素的方法为:
mySet.add('value');
删除 Set 中元素的方法为:
mySet.delete('value');
判断 Set 中是否存在元素的方法为:
mySet.has('value');
2.2 使用 Set 去重数组
由于 Set 能够自动去重,所以我们可以将数组中的元素添加到 Set 中,最后再将 Set 转换回数组。
const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const newArr = Array.from(new Set(arr));
console.log(newArr); // [1, 2, 3, 4, 5]
注意:由于 Set 转换成数组的顺序是按照添加的顺序排列的,所以不能保证数组的顺序不变。
3. 使用 Array.filter 去重
使用 Array.filter 去重的思路是通过 Array.filter 方法遍历数组,并且只返回不等于当前元素的元素。当相同的元素遇到的时候,我们可以保留数组中第一次出现的元素,而将后面的相同元素过滤掉。
const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const newArr = arr.filter((item, index, arr) => {
return arr.indexOf(item) === index;
});
console.log(newArr); // [1, 2, 3, 4, 5]
上面这个方法的原理是通过 indexOf 方法查找数组中是否已经存在即将添加的元素。由于 indexOf 只会返回第一次出现的位置,所以当找到相同的元素时,它的 indexOf 和当前元素的 index 就不相等,就会被过滤掉。
4. 使用 Map 去重
4.1 Map 的概念
Map 是一种集合类型,它以键值对的形式存储数据,其中 key 是唯一的。Map 可以用来存储任意类型的数据(包括对象),并且可以根据 key 对存储的数据进行查找和排序。
它的声明方法为:
const myMap = new Map();
向 Map 中添加键值对的方法为:
myMap.set(key, value);
删除 Map 中键值对的方法为:
myMap.delete(key);
获取 Map 中键值对数量的方法为:
console.log(myMap.size);
4.2 使用 Map 去重数组
使用 Map 去重的思路是使用 Map 的 key 来存储不同的元素,如果已经添加过相同元素,那么就会将相同的元素覆盖掉,这样就能保证最后的数组中没有重复元素。
const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const map = new Map();
const newArr = [];
for (const item of arr) {
if (!map.has(item)) {
map.set(item, true);
newArr.push(item);
}
}
console.log(newArr); // [1, 2, 3, 4, 5]
上面这个方法的核心部分是判断 map 中是否已经有相同元素。如果没有,我们就将该元素添加到 map 中,并且将该元素添加到新的数组中。如果已经有相同的元素了,那么就不做任何操作。最后返回的就是过滤后的新数组。
5. 总结
上面介绍了三种从 JavaScript 数组中去重的方法。使用 Set 去重是最简单的方法,但是不能保证数组的顺序不变。使用 Array.filter 去重的思路是通过遍历和过滤保留唯一元素,但是对于大量数据的数组会耗费更多的时间和资源。使用 Map 去重的方法比较适合对大量数据的数组进行去重操作。
不同的场景下可以选择不同的方法。在实际开发过程中,要根据具体需求去选择最适合的方法。