JavaScript 集合：組織數據的友好指南

你好，未來的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，進入 JavaScript 集合的世界。別擔心如果你是編程新手——我將成為你可靠的導師，我們將一步一步地探索這個主題。在這個教程結束時，你將能夠像專業人士一樣操作集合！

JavaScript - Sets

什麼是集合？

在我們深入研究代碼之前，讓我們先來討論一下集合到底是什麼。想像你有一袋彈珠，但這袋彈珠很特別——它只允許每種顏色有一顆彈珠。這基本上就是 JavaScript 中的集合：一個只能包含唯一值的集合。不允許重複！

語法：創建集合

讓我們從基礎開始。以下是如何創建一個新的集合：

let mySet = new Set();

就這樣！你剛剛創建了一個空的集合。但如果你想要創建一個帶有一些初始值的集合怎麼辦？沒問題：

let fruitSet = new Set(['apple', 'banana', 'orange']);

現在你在集合中有三種水果。記住，即使你試圖再次添加 'apple'，它也不會被包括，因為集合只保留唯一值。

參數：你能在集合中放入什麼？

JavaScript 中的集合非常灵活。你可以添加各種類型的值：

數字
字符串
對象
数组
甚至其他集合！

讓我們看一個例子：

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

如果你運行這段代碼，你會看到我們的集合包含了所有這些不同類型的值。

示例：玩轉集合

現在我們已經了解了基礎知識，讓我們來一些有樂趣的集合操作！

添加和刪除元素

let colorSet = new Set();

// 添加元素
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // 輸出: Set(3) { 'red', 'blue', 'green' }

//嘗試添加重複元素
colorSet.add('red');
console.log(colorSet); // 輸出: Set(3) { 'red', 'blue', 'green' }

// 刪除元素
colorSet.delete('blue');
console.log(colorSet); // 輸出: Set(2) { 'red', 'green' }

正如你所看到的，當我們再次嘗試添加 'red' 時，集合沒有變化。這就是集合的美妙之處——它們自動為我們處理重複！

檢查元素

想知道集合是否包含特定值？使用 has() 方法：

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // 輸出: true
console.log(animalSet.has('fish')); // 輸出: false

集合的大小

要找出你的集合中有多少個唯一元素，使用 size 屬性：

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // 輸出: 5

即使我們添加了三次 5，集合也只計算一次！

數學集合操作

現在，讓我們戴上數學帽子，看看我們可以對集合進行哪些操作。

合並

合並將兩個集合合在一起，保留兩個集合中的所有唯一元素：

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // 輸出: Set(5) { 1, 2, 3, 4, 5 }

交集

交集只保留兩個集合中都存在的元素：

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // 輸出: Set(2) { 3, 4 }

差集

差集保留第一個集合中的元素，但不包括第二個集合中的元素：

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // 輸出: Set(2) { 1, 2 }

JavaScript 集合參考

這裡是我們討論過的所有方法和屬性，還有一些額外的：

方法/屬性	描述
`new Set()`	創建一個新的集合
`add(value)`	向集合中添加一個新元素
`delete(value)`	從集合中刪除一個元素
`has(value)`	如果值存在於集合中，則返回 true
`clear()`	從集合中刪除所有元素
`size`	返回集合中的元素數量
`forEach(callback)`	對集合中的每個元素調用一個函數
`values()`	返回一個包含集合中所有值的迭代器
`keys()`	與 values() 相同
`entries()`	返回一個包含集合中 [值, 值] 對的迭代器

好了，各位！你剛剛完成了對 JavaScript 集合的快速入門。記住，集合就像那些總是保持獨特和有組織的朋友一樣——當你處理不應該有重複的數據時，他們是非常有用的。

練習創建和操作集合，不久你會發現自己自然地在編程冒險中使用它們。誰知道呢？也許你甚至會開始到處看到集合——就像那個每雙襪子都不一樣的襪子抽屜一樣！

繼續編程，保持好奇心，並記住：在集合的世界裡，獨一無二就是遊戲的名字！

Credits: Image by storyset