2022年3月4日 [ES2015] Map/Set - Map (JavaScript Primer) マップの反復処理

entriesメソッド

const map = new Map([["key1", "value1"], ["key2", "value2"]]);
const entries = [];
for (const [key, value] of map.entries()) {
    entries.push(`${key}:${value}`);
}
console.log(entries); // => ["key1:value1","key2:value2"]

entriesメソッドはマップが持つすべての要素をエントリーとして挿入順に並べたIteratorオブジェクトを返します。先述のとおりエントリーは[キー, 値]のような配列です。そのため、配列の分割代入を使うとエントリーからキーと値を簡単に取り出せます。

Mapが持つすべての要素をエントリーとして挿入順に並べたイテレーターオブジェクトを返します。
エントリーは[キー, 値]です。(配列リテラルを含めてエントリーです)
配列の分割代入を使うとエントリーからキーと値を取り出せます。

マップを直接for...of文で反復処理してもentriesメソッドと同じ結果を得られます。

const map = new Map([["key1", "value1"], ["key2", "value2"]]);
const results = [];
for (const [key, value] of map) {
    results.push(`${key}:${value}`);
}
console.log(results);// => ["key1:value1","key2:value2"]

Mapがイテレータを持つ値なのでfor...of文を使う事ができます。

entriesメソッドを使ったときとMapに直接反復処理を使ったときの違いについて

結果は同じですが違いに関して検証してみました。

map.entries()の場合

const map = new Map([["key1", "value1"], ["key2", "value2"]]);
const entries = [];
for (const [key, value] of map.entries()) {
    console.log(map.entries());  // => [object Map Iterator] [object Map Iterator]
    entries.push(`${key}:${value}`);
}

mapに対して直接for...of文を使った場合

const map = new Map([["key1", "value1"], ["key2", "value2"]]);
const results = [];
for (const [key, value] of map) {
    console.log(map); // => [object Map] [object Map]
    results.push(`${key}:${value}`);
}