JavaScript - Map 物件

上一頁
下一頁

JavaScript 中的Map 物件是一個鍵值對的集合，其中鍵可以是任何型別，包括物件或函式。Map 元素的順序與鍵值對的插入順序相同。

要建立一個新的 Map 物件，可以使用 `new Map()` 建構函式。然後可以使用 `set()` 方法向 Map 新增鍵值對。要獲取特定鍵的值，可以使用 `get()` 方法。要從 Map 中刪除鍵值對，可以使用 `delete()` 方法。

語法

以下是 JavaScript 中使用 Map 資料結構的語法：

const map = new Map([iterable]);

在上述語法中，我們使用 `new` 關鍵字和 `Map()` 建構函式來定義 Map 的例項。

引數

  • iterable − 這是一個可迭代物件，包含用於用可迭代物件的元素初始化 Map 的鍵值對。這也是一個可選引數。

JavaScript 中的 Map 類包含一組內建方法，允許我們使用 Map 物件。這裡我們列出了 Map 的屬性和方法。

Map 屬性

以下是 Map 物件的屬性：

序號 名稱和描述
1

size

此屬性返回此 Map 中的元素數量。

Map 方法

在下表中，我們列出了 Map 物件的所有方法及其描述：

序號 名稱和描述
1

clear()

此方法刪除 Map 物件中的所有元素。
2

delete()

此方法透過鍵從 Map 物件中刪除指定的元素。
3

entries()

此方法返回一個新的 Map 迭代器物件，其中包含 [鍵，值] 對。
4

forEach()

此方法對 Map 物件中的每個鍵/值對執行一次回撥函式。
5

get()

此方法用於從 Map 物件中返回指定的元素。
6

has()

此方法指示是否指定鍵的元素存在。
7

keys()

此方法返回一個新的迭代器物件，其中包含 Map 物件中每個元素的鍵。
8

set()

此方法將鍵值對插入到 Map 物件中。
9

values()

此方法返回一個新的迭代器物件，其中包含 Map 物件的值。

JavaScript Map 建構函式()

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

序號 名稱和描述
1

Map()

用於建立 Map 物件。

示例

示例：建立新的 Map 物件

在下面的示例中，我們將包含鍵值對的二維陣列作為 `Map()` 建構函式的引數。

之後，我們遍歷 Map 以獲取 Map 的每個值並在輸出中顯示。

<html>
<body>
   <div> Map elements are: </div>
   <div id = "output"> </div>
   <script>
      const map = new Map([["Apple", 100], ["Banana", 20], ["Orange", 50]]);
      for (let [key, value] of map) {
         document.getElementById("output").innerHTML += `${key} : ${value} <br>`;
      }
   </script>
</body>
</html>

輸出

執行上述程式後，它將返回 Map 的每個值。

Map elements are:
Apple : 100
Banana : 20
Orange : 50

示例：在 Map 中插入鍵值對

在下面的示例中，我們使用 `set()` 方法將鍵值對插入到 Map 中。`set()` 方法將鍵作為第一個引數，將值作為第二個引數。

<html>
<body>
   <div>After inserting 2 key-value pairs in the map: </div>
   <div id = "output"> </div>
   <script>
      const map = new Map();
      map.set("Grapes", 40);
      map.set("Apples", 50);
      for (let [key, value] of map) {
         document.getElementById("output").innerHTML += `${key} : ${value} <br>`;
      }
   </script>
</body>
</html>

輸出

After inserting 2 key-value pairs in the map:
Grapes : 40
Apples : 50

正如我們在輸出中看到的，提供的 [鍵-值] 對已插入到 Map 物件中。

示例：訪問 Map 元素

可以使用 `get()` 方法訪問 Map 元素。這裡我們向集合中添加了元素。

之後，我們使用get()方法訪問name和RollId鍵的值。

<html>
<body>
   <div id = "output1">Name: </div>
   <div id = "output2">Roll Id: </div>
   <script>
      const map = new Map();
      map.set("name", "John");
      map.set("rollId", 123);
      document.getElementById("output1").innerHTML += map.get("name");
      document.getElementById("output2").innerHTML += map.get("rollId");
   </script>
</body>
</html>

輸出

執行後，它返回Map物件中存在的所有元素。

Name: John
Roll Id: 123

示例：移除Map元素

在下面的示例中，我們使用delete()方法刪除鍵為20的鍵值對。

但是，您也可以使用clear()方法刪除map中的所有元素。

<html>
<body>
   <div>Map after deleting the [20,30] key-value pair: </div>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const map = new Map([[10, 20], [20, 30], [30, 40]]);

      map.delete(20); // Deleting a [20,30] key-value pair from the map

      for (let [key, value] of map)
         output.innerHTML += "Key: " + key + " Value: " + value + "<br/>";
   </script>
</body>
</html>

輸出

Map after deleting the [20,30] key-value pair:
Key: 10 Value: 20
Key: 30 Value: 40

示例：Map的大小

在下面的程式碼中，我們使用Map類的'size'屬性獲取map中鍵值對的總數。

<html>
<body>
   <p id = "output">Size of the map object is: </p>
   <script>
      const map = new Map();
      map.set("Grapes", 40);
      map.set("Apples", 50);
      document.getElementById("output").innerHTML += map.size;
   </script>
</body>
</html>

輸出

Size of the map object is: 2

示例：使用物件作為鍵

map允許開發者使用物件作為鍵。這裡，我們定義了一個包含兩個屬性的laptop物件。

之後，我們將該物件作為鍵，並將筆記型電腦的價格作為值設定到map中。

<html>
<body>
   <p id = "output">The laptop price is: </p>
   <script>
      const map = new Map();
      const laptop = {
         brand: "HP",
         model: "Pavilion",
      }
      map.set(laptop, 100000);
      document.getElementById("output").innerHTML += map.get(laptop);
   </script>
</body>
</html>

輸出

The laptop price is: 100000

JavaScript中的Map與Object

Map類似於JavaScript中的Object，但是有一些區別，我們在這裡解釋：

比較依據 Map Object
鍵 map允許您設定物件、函式和其他原始值作為鍵。 Object只能包含字串和符號作為鍵。
大小 您可以使用'size'屬性獲取map的大小。 您需要遍歷物件來確定物件的大小。
鍵比較 它使用靈活的方法來比較鍵。它認為兩個具有不同引用的相似物件是不同的。 它隱式地將鍵轉換為字串並進行匹配。
迭代 您可以使用for...of迴圈遍歷map。 您可以使用for...in迴圈遍歷物件的屬性。
效能 由於其複雜的結構，map稍微慢一些。 Object比map快，因為它只以字串格式儲存鍵。
用例 對於動態新增鍵值對，map是更好的選擇。 如果鍵值對是靜態和固定的，則object更好。
列印頁面
上一頁
下一頁
廣告