JS Set去重|极客笔记

JS Set去重

在我们日常开发中，经常会遇到需要去除数组中重复项的场景。而在JavaScript中，可以通过Set去重的方法非常简便高效。本文将详细介绍JS中如何利用Set数据结构来实现数组去重。

什么是Set

Set是ES6新增的一种数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。

基本使用

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

set.add(6);
console.log(set); // Set(6) {1, 2, 3, 4, 5, 6}

set.delete(3);
console.log(set); // Set(5) {1, 2, 4, 5, 6}

console.log(set.has(4)); // true
console.log(set.has(7)); // false

console.log(set.size); // 5

set.clear();
console.log(set); // Set(0) {}

利用Set去重数组

方法一：利用Set数据结构

const arr = [1, 2, 3, 3, 4, 5, 5, 6];

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

方法二：利用Array.prototype.filter()

const arr = [1, 2, 3, 3, 4, 5, 5, 6];

const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

方法三：利用Array.prototype.reduce()

const arr = [1, 2, 3, 3, 4, 5, 5, 6];

const uniqueArr = arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6]

性能比较

在需要对大数组进行去重操作时，我们可以对上述三种方法进行性能比较。以下是一个对10000个随机数进行去重的比较：

const randomArr = Array.from({length: 10000}, () => Math.floor(Math.random() * 10000));

console.time('Set');
Array.from(new Set(randomArr));
console.timeEnd('Set');

console.time('Filter');
randomArr.filter((item, index) => randomArr.indexOf(item) === index);
console.timeEnd('Filter');

console.time('Reduce');
randomArr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
console.timeEnd('Reduce');

结果表明，在处理大数组时，Set方法的性能是最好的。