在 JavaScript 中遍歷 Map

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中遍歷 Map 的通用方法
  2. 使用 for of 迴圈遍歷 JavaScript 中的 Map
  3. 使用 forEach 方法遍歷 Map
在 JavaScript 中遍歷 Map

Map 有兩個元件,鍵和值。遍歷 Map 物件的可用技術最初獲取鍵,然後遍歷值或值。此迴圈終止直到最後一個 Map 鍵,並且它的值被迭代(僅當你在此之前沒有終止)。

在這裡,我們將重點介紹進行迭代的最簡單方法。ES6 之前用於迭代 Map 物件的方法具有相對較長的程式碼行,而 ES6 帶來了完成工作的新的簡單方法。在下一節中,我們將討論它們。

在 JavaScript 中遍歷 Map 的通用方法

對於這個例子,我們將採用一個物件,每個鍵都有一個陣列值。我們將使用 for in 迴圈來獲取物件並對其進行迭代。接下來,在 for in 範圍內,我們將執行一個普通的 for 迴圈來迭代物件鍵的陣列元素。

讓我們檢查程式碼和輸出以便更好地理解。

var fruitMap = {
    fruits: ['Grape', 'Orange', 'Strawberry'],
    taste: ['sour', 'tangy', 'sweet']
};
for (var m in fruitMap){
  console.log(fruitMap[m]);
    for (var i=0;i<fruitMap[m].length;i++){
    console.log(fruitMap[m][i]);
    }
} 

輸出:

遍歷 Map 的一般方法

使用 for of 迴圈遍歷 JavaScript 中的 Map

for of 迴圈的情況下,我們將建立一個帶有破壞性賦值的變數 duo,它將在每次迭代後解包鍵和值。在這裡,我們將有一個 Map 建構函式的例項 tasteMap

此外,我們將使用適當的鍵和值對載入物件例項。tasteMap.entries() 顯式返回鍵值對的可迭代物件。

讓我們跳到程式碼來猜測結果。

var tasteMap = new Map();
tasteMap.set("Grape", "sour");
tasteMap.set("Strawberry", "sweet");
tasteMap.set("Tomato", "tangy");

for (var [key, value] of tasteMap.entries()) {
  console.log(key + " = " + value);
}

輸出:

使用 for-of 遍歷 Map

使用 forEach 方法遍歷 Map

這裡我們介紹了一種流行的 ES6 Map 迭代方式。這種方法就像使用鍵和值這兩個引數觸發一個函式一樣簡單。你已經準備好用幾行程式碼迭代和遍歷這些對了。

程式碼片段:

var tasteMap = new Map();
tasteMap.set("Grape", "sour");
tasteMap.set("Strawberry", "sweet");
tasteMap.set("Tomato", "tangy");

tasteMap.forEach(function(key, val){
  console.log(key + " " + val);
});

輸出:

使用 forEach 方法遍歷 Map

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Map