JavaScript - 集合

上一頁
下一頁

JavaScript 的Set 物件是一個唯一值的集合。每個值在一個 Set 中只能出現一次。一個Set可以儲存任何資料型別的任何值。集合是在 ECMAScript 6 (ES6) 中引入 JavaScript 的。

JavaScript 集合類似於陣列，但有一些關鍵區別

  • 集合只能儲存唯一值，而陣列可以儲存重複值。
  • 集合是無序的，而陣列是有序的。
  • 與陣列相比，集合新增和刪除項的速度更快。

JavaScript 集合通常用於儲存唯一值，例如訪問過網站的唯一使用者。它們也可以用於從陣列中刪除重複值。

語法

使用者可以按照以下語法在 JavaScript 中定義集合：

let set1 = new Set([iterable]);

在上述語法中，我們使用帶有“new”關鍵字的 Set() 建構函式來定義集合。

引數

  • Iterable−這是一個可選引數。Set() 建構函式遍歷 iterable 的元素，並使用這些元素建立一個新的集合。

示例

示例（訪問集合元素）

在下面的示例中，我們傳遞了一個包含重複元素的陣列作為 Set() 建構函式的引數。num_set 只包含唯一值。

我們使用 values() 方法獲取集合值的迭代器。要遍歷迭代器，我們使用 for...of 迴圈。在迴圈中，我們訪問元素並列印它。您可以觀察到，即使輸入陣列包含重複元素，集合也只包含唯一值。

<html>
<body>
   <p>The set elements are: </p>
   <p id = "output"></p>
   <script>
  
      const num_set = new Set([10, 20, 20, 20]);

      for (let value of num_set.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
    
   </script>
</body>
</html>

輸出

The set elements are:

10
20

示例（將元素插入集合）

使用者可以使用 add() 方法將元素插入集合。在這裡，我們建立了一個空集合。之後，我們使用 add() 方法三次將 60、50、50 元素新增到集合中。

我們插入了 2 次 50，但集合中只出現一次，因為它只包含唯一值。

<html>
<body>
   <p>Set elements after adding element/s to it: </p>
   <div id = "output"> </div>
   <script>

      const num_set = new Set();
      num_set.add(60);
      num_set.add(50);
      num_set.add(50);

      for (let value of num_set.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

輸出

Set elements after adding element/s to it:

60
50

示例（刪除集合元素）

集合的 delete() 方法允許您從集合中刪除元素。在這裡，我們建立了一個包含各種數字的集合，並使用 delete() 方法刪除集合中的 200 和 400。

<html>
<body>
   <p> After deleting elements from the set: </p>
   <div id = "output"> </div>
   <script>

      let num_set = new Set([100, 200, 300, 400, 500]);

      num_set.delete(200);
      num_set.delete(400);

      for (let value of num_set.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

輸出

The set contains 100?: true

示例（檢查集合是否包含特定值）

下面的示例演示瞭如何使用 has() 方法檢查集合是否包含特定值。

在這裡，我們檢查集合是否包含 100，並相應地在輸出中列印訊息。

<html>
<body>
   <p id = "output">The set contains 100?: </p>
   <script>
      const num_set = new Set([100, 200, 300, 400, 500]);
      document.getElementById("output").innerHTML += num_set.has(100);
   </script>
</body>
</html>

輸出

它返回“true”，因為元素 100 存在於集合中。

The set contains 100?: true

數學集合運算

Set 類不包含執行數學集合運算（如並集、交集或集合差）的內建方法。因此，您需要編寫自定義 JavaScript 程式碼來執行以下所示的數學運算。

示例（兩個集合的並集）

兩個集合的並集包含 set1 和 set2 的所有唯一元素。

在下面的示例中，set1 和 set2 包含汽車名稱。我們定義了“union”集合並將陣列作為引數傳遞。我們使用展開運算子建立一個包含 set1 和 set2 元素的陣列。

<html>
<body>
   <p>The Union of set1 and set2 is: </p>
   <div id = "output"> </div>
   <script>

      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TaTa", "Honda", "Suzuki"]);

      const union = new Set([...set1, ...set2]); // Taking union

      for (let value of union.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

輸出

如果我們執行程式，它將返回 set1 和 set2 的所有唯一元素。

The Union of set1 and set2 is:

BMW
Audi
TATA
TaTa
Honda
Suzuki

示例（兩個集合的交集）

兩個集合的交集包含同時存在於 set1 和 set2 中的唯一元素。

在這裡，我們有兩個包含汽車名稱的集合，並定義了“inter”集合來儲存同時存在於兩個集合中的集合元素。

我們遍歷 set1 的元素，在迴圈內我們使用 has() 方法來檢查 set1 的元素是否存在於 set2 中。如果存在，我們將元素新增到“inter”集合中。

<html>
<body>
   <p> The intersection of set1 and set2 is: </p>
   <p id = "output"> </p>
   <script>

      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TATA", "Honda", "Suzuki"]);

      const inter = new Set();
      for (let car of set1) {
         if (set2.has(car)) {
            inter.add(car);
         }
      }

      for (let value of inter.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }

   </script>
</body>
</html>

輸出

The intersection of set1 and set2 is:

BMW
TATA

示例（兩個集合的差集）

set1 和 set2 的差集包含 set1 中的所有元素，但不包含 set2 中的元素。

我們建立了一個名為“diff”的新集合，並用“set1”的元素初始化它。之後，我們遍歷set2的元素。如果set2的任何元素存在於“diff”集合中，我們將刪除它。

<html>
<body>
   <p>The difference of set1 and set2 is: </p>
   <div id = "output"> </div>
   <script>

      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TATA", "Honda", "Suzuki"]);

      const diff = new Set(set1);
      for (let car of set2) {
         diff.delete(car);
      }

      for (let value of diff.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

輸出

The difference of set1 and set2 is:

Audi

JavaScript Set 參考

在 JavaScript 中，Set 是一個唯一值的集合。換句話說，每個值在一個集合中只能出現一次。它提供新增、刪除和檢查集合中元素存在的方法。這裡，我們列出了 Set 類的屬性和方法。

JavaScript Set 建構函式()

以下是 JavaScript 中 Set 的建構函式：

序號 名稱及描述
1

Set()

建立並返回由作為引數傳遞的值組成的唯一值集合。

JavaScript Set 屬性

以下是 Set 類的屬性：

序號 名稱及描述
1

size

此屬性返回集合的大小。

JavaScript Set 方法

在下表中，我們列出了 Set 類所有屬性：

序號 名稱及描述
1

add()

此方法將元素插入集合中。
2

clear()

此方法刪除集合中的所有元素。
3

delete()

此方法刪除集合中的單個元素。
4

difference()

此方法返回第一個集合中存在但第二個集合中不存在的元素。
5

entries()

獲取包含所有集合條目的迭代器。
6

forEach()

此方法對該集合中的每個值執行一次提供的函式。
7

has()

此方法指示是否存在具有指定值的元素。
8

intersection()

此方法返回兩個集合中共同的元素。
9

keys()

此方法是 values() 方法的別名。
10

values()

此方法返回一個新的 Set 迭代器物件，其中包含 Set 物件中每個元素的值。
列印頁面
上一頁
下一頁
廣告