如何从 JavaScript 数组中删除重复元素?

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 去重的方法比较适合对大量数据的数组进行去重操作。

不同的场景下可以选择不同的方法。在实际开发过程中,要根据具体需求去选择最适合的方法。