90 - 内置对象 - Set 对象 - 集合的创建与操作

前端 - Javascript 《内置对象 - Set 对象 - 集合的创建与操作》

在 JavaScript 的世界里，有许多内置对象为开发者提供了强大且便捷的功能，Set 对象就是其中之一。Set 对象是一种无序且唯一的数据集合，类似于数学中的集合概念，它可以帮助我们轻松处理不重复元素的存储和操作。本文将详细介绍 Set 对象的创建与操作，带你领略它的魅力。

一、Set 对象的创建

在 JavaScript 中，我们可以使用 Set 构造函数来创建一个新的 Set 对象。下面是几种常见的创建方式：

1. 创建一个空的 Set 对象

const mySet = new Set();
console.log(mySet); // 输出: Set(0) {}

这里我们使用 new Set() 创建了一个空的 Set 对象，初始时它不包含任何元素。

2. 使用数组初始化 Set 对象

const numbers = [1, 2, 3, 2, 4];
const numberSet = new Set(numbers);
console.log(numberSet); // 输出: Set(4) { 1, 2, 3, 4 }

当我们使用数组初始化 Set 对象时，Set 会自动去除数组中的重复元素，只保留唯一的值。

3. 使用可迭代对象初始化 Set 对象

除了数组，我们还可以使用其他可迭代对象（如字符串）来初始化 Set 对象。

const str = 'hello';
const charSet = new Set(str);
console.log(charSet); // 输出: Set(4) { 'h', 'e', 'l', 'o' }

同样，Set 会去除字符串中的重复字符。

二、Set 对象的基本操作

1. 添加元素

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

const fruitSet = new Set();
fruitSet.add('apple');
fruitSet.add('banana');
fruitSet.add('apple'); // 重复元素不会被添加
console.log(fruitSet); // 输出: Set(2) { 'apple', 'banana' }

add() 方法返回 Set 对象本身，因此我们可以进行链式调用。

fruitSet.add('cherry').add('date');
console.log(fruitSet); // 输出: Set(4) { 'apple', 'banana', 'cherry', 'date' }

2. 删除元素

使用 delete() 方法可以从 Set 对象中删除指定的元素。

fruitSet.delete('banana');
console.log(fruitSet); // 输出: Set(3) { 'apple', 'cherry', 'date' }

delete() 方法返回一个布尔值，表示是否成功删除了指定元素。

3. 检查元素是否存在

使用 has() 方法可以检查 Set 对象中是否包含指定的元素。

console.log(fruitSet.has('apple')); // 输出: true
console.log(fruitSet.has('banana')); // 输出: false

4. 获取 Set 对象的大小

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

console.log(fruitSet.size); // 输出: 3

5. 清空 Set 对象

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

fruitSet.clear();
console.log(fruitSet); // 输出: Set(0) {}

三、Set 对象的遍历

Set 对象是可迭代的，我们可以使用多种方式对其进行遍历。

1. 使用 for...of 循环

const colorSet = new Set(['red', 'green', 'blue']);
for (const color of colorSet) {
    console.log(color);
}
// 输出:
// red
// green
// blue

2. 使用 forEach() 方法

colorSet.forEach((color) => {
    console.log(color);
});
// 输出:
// red
// green
// blue

四、Set 对象的应用场景

1. 数组去重

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]

2. 交集、并集和差集的计算

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);
// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // 输出: Set(2) { 2, 3 }
// 并集
const union = new Set([...setA,...setB]);
console.log(union); // 输出: Set(4) { 1, 2, 3, 4 }
// 差集
const difference = new Set([...setA].filter(x =>!setB.has(x)));
console.log(difference); // 输出: Set(1) { 1 }

五、总结

通过本文的介绍，相信你已经对 JavaScript 中的 Set 对象有了全面的了解。Set 对象在处理不重复元素的存储和操作方面非常强大，合理使用它可以让你的代码更加简洁高效。希望你在实际开发中能够充分发挥 Set 对象的优势，提升开发效率。