ES6 中集合 Set 的使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的 ES6 版本中，引入了集合 Set 这一新的数据类型。Set 的特点是不允许重复元素，且元素的顺序不是固定的。在前端开发中，Set 可以帮助我们更加高效地处理数据，提高开发效率。本文将介绍 ES6 中集合 Set 的使用技巧，帮助读者更好地理解和应用该数据类型。

Set 的创建

Set 的创建非常简单，只需要使用 new Set() 即可创建一个空的集合。如果需要在创建时添加元素，可以使用 new Set([element1, element2, ...]) 的方式。

const emptySet = new Set();
const numberSet = new Set([1, 2, 3]);

Set 的基本操作

Set 的基本操作包括添加元素、删除元素、判断元素是否存在、获取元素个数以及清空集合等。

添加元素

使用 add() 方法可以向 Set 中添加元素。

const numberSet = new Set();
numberSet.add(1);
numberSet.add(2);
numberSet.add(3);
console.log(numberSet); // Set {1, 2, 3}

需要注意的是，Set 不会添加重复的元素。如果添加的元素已经存在于集合中，那么不会有任何变化。

const numberSet = new Set([1, 2, 3]);
numberSet.add(1);
console.log(numberSet); // Set {1, 2, 3}

删除元素

使用 delete() 方法可以从 Set 中删除元素。

const numberSet = new Set([1, 2, 3]);
numberSet.delete(2);
console.log(numberSet); // Set {1, 3}

判断元素是否存在

使用 has() 方法可以判断 Set 中是否存在某个元素。

const numberSet = new Set([1, 2, 3]);
console.log(numberSet.has(2)); // true
console.log(numberSet.has(4)); // false

获取元素个数

使用 size 属性可以获取 Set 中元素的个数。

const numberSet = new Set([1, 2, 3]);
console.log(numberSet.size); // 3

清空集合

使用 clear() 方法可以清空 Set 中的所有元素。

const numberSet = new Set([1, 2, 3]);
numberSet.clear();
console.log(numberSet); // Set {}

Set 的遍历

Set 的遍历方式有很多种，包括 for...of 循环、forEach 方法、entries 方法等。

for...of 循环

使用 for...of 循环可以遍历 Set 中的所有元素。

const numberSet = new Set([1, 2, 3]);
for (const number of numberSet) {
  console.log(number);
}
// 1
// 2
// 3

forEach 方法

使用 forEach 方法可以对 Set 中的每个元素执行一个函数。

const numberSet = new Set([1, 2, 3]);
numberSet.forEach((number) => {
  console.log(number);
});
// 1
// 2
// 3

entries 方法

使用 entries 方法可以获取 Set 中所有元素的键值对。

const numberSet = new Set([1, 2, 3]);
const entries = numberSet.entries();
console.log(entries.next().value); // [1, 1]
console.log(entries.next().value); // [2, 2]
console.log(entries.next().value); // [3, 3]

Set 的实际应用

Set 在实际开发中有很多应用场景，下面介绍几个常见的应用。

数组去重

Set 的一个重要应用是对数组进行去重。由于 Set 不允许重复元素，因此可以将数组转换为 Set，再将 Set 转换回数组来实现去重。

const array = [1, 2, 3, 2, 1];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3]

判断两个数组是否有交集

使用 Set 可以很方便地判断两个数组是否有交集。只需要将其中一个数组转换为 Set，再遍历另一个数组，使用 has() 方法判断是否存在即可。

const array1 = [1, 2, 3];
const array2 = [2, 4, 5];
const set1 = new Set(array1);
const hasIntersection = array2.some((number) => set1.has(number));
console.log(hasIntersection); // true

获取数组中重复的元素

使用 Set 可以很方便地获取数组中重复的元素。只需要将数组转换为 Set，再使用 filter() 方法过滤出重复的元素。

const array = [1, 2, 3, 2, 1];
const set = new Set(array);
const duplicateElements = array.filter((number) => !set.delete(number));
console.log(duplicateElements); // [2, 1]

总结

本文介绍了 ES6 中集合 Set 的使用技巧，包括 Set 的创建、基本操作、遍历以及实际应用。通过学习本文，读者可以更加深入地理解和应用 Set，提高前端开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655e8130d2f5e1655d8b1f61