快捷導(dǎo)航

JavaScript中Map遍歷方法代碼示例

更新時間：2023年11月08日 11:07:20 作者：科學(xué)熊

這篇文章主要給大家介紹了關(guān)于JavaScript中Map遍歷方法的相關(guān)資料,Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

Map 結(jié)構(gòu)原生提供三個遍歷器生成函數(shù)和一個遍歷方法。

Map.prototype.keys()：返回鍵名的遍歷器。
Map.prototype.values()：返回鍵值的遍歷器。
Map.prototype.entries()：返回所有成員的遍歷器。
Map.prototype.forEach()：遍歷 Map 的所有成員。

需要特別注意的是，Map 的遍歷順序就是插入順序。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

上面代碼最后的那個例子，表示 Map 結(jié)構(gòu)的默認(rèn)遍歷器接口（Symbol.iterator屬性），就是entries方法。

map[Symbol.iterator] === map.entries
// true

Map 結(jié)構(gòu)轉(zhuǎn)為數(shù)組結(jié)構(gòu)，比較快速的方法是使用擴(kuò)展運(yùn)算符（…）。

const map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

結(jié)合數(shù)組的map方法、filter方法，可以實現(xiàn) Map 的遍歷和過濾（Map 本身沒有map和filter方法）。

const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 產(chǎn)生 Map 結(jié)構(gòu) {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 產(chǎn)生 Map 結(jié)構(gòu) {2 => '_a', 4 => '_b', 6 => '_c'}

此外，Map 還有一個forEach方法，與數(shù)組的forEach方法類似，也可以實現(xiàn)遍歷。

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

forEach方法還可以接受第二個參數(shù)，用來綁定this。

const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

上面代碼中，forEach方法的回調(diào)函數(shù)的this，就指向reporter。

附：Map的使用和entry相關(guān)類型查看

map = new Map();  // 構(gòu)造Map對象。
Map(0) {}
map.size  // 大小為0
0
map.set(1, "one").set(2, "two").set(3, "three");  // 增加鍵值對
Map(3) {1 => "one", 2 => "two", 3 => "three"}
map.size  // 大小為3
3
entries = map.entries();  // 獲取鍵值對的`Map Iterator`對象
MapIterator {1 => "one", 2 => "two", 3 => "three"}
Object.prototype.toString.call(entries) // 類型為`MapIterator`。
"[object Map Iterator]"
entryObj = entries.next(); // 調(diào)用next()，返回一個entryObj，是個對象{value:數(shù)組, done:false}。
{value: Array(2), done: false}
Object.prototype.toString.call(entryObj)
"[object Object]"
entry = entryObj.value  // 對象的value屬性是一個數(shù)組，長度為2。
(2) [1, "one"]
Object.prototype.toString.call(entry)
"[object Array]"
entry
(2) [1, "one"]
console.log(entry[0], entry[1])
VM7998:1 1 "one"