6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

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

マップが持つ"要素を列挙メソッド"として、forEach、keys、values、entriesがあります。 今回はforEach、keysについて学んでいきます。

forEachメソッド

  • コールバック関数には値、キー、マップの3つが渡されます。
  • 配列のforEachではインデックスが渡されるところがMapではキーが渡されます。
  • 配列はインデックス・Mapではキーで要素を特定するためです。
const map = new Map([["key1", "value1"], ["key2", "value2"]]);
const results = [];
map.forEach((value, key) => {
    results.push(`${key}:${value}`);
});
console.log(results); // => ["key1:value1","key2:value2"]

MapのforEachで渡す3つの引数を出力しました

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

// 出力結果
value1
key1
Map(2) { 'key1' => 'value1', 'key2' => 'value2' }
value2
key2
Map(2) { 'key1' => 'value1', 'key2' => 'value2' }
  • 第一引数にはvalueが渡っています。
  • 第二引数にはkeyが渡っています。
  • 第三引数にはmapが渡っています。

keysメソッド

keysメソッドはマップが持つすべての要素のキーを挿入順に並べたIteratorオブジェクトを返します。 同様に、valuesメソッドはマップが持つすべての要素の値を挿入順に並べたIteratorオブジェクトを返します。 これらの返り値はIteratorオブジェクトであって配列ではありません。 そのため、次の例のようにfor...of文で反復処理を行ったり、Array.fromメソッドに渡して配列に変換して使ったりします。

  • keysメソッドはマップが持つすべての要素のキーを挿入順に並べたイテレータを返します。
  • valuesメソッドはマップがもつすべての要素の値を挿入順に並べたイテレータを返します。
  • 返り値はイテレータであって配列ではありません。
  • for...of文で反復処理をしたり、Array.fromで配列に変換したりできます。
const map = new Map([["key1", "value1"], ["key2", "value2"]]);
const keys = [];
// keysメソッドの返り値(Iterator)を反復処理する
for (const key of map.keys()) {
    keys.push(key);
}
console.log(keys); // => ["key1","key2"]
// keysメソッドの返り値(Iterator)から配列を作成する
const keysArray = Array.from(map.keys());
console.log(keysArray); // => ["key1","key2"]
  • Array.from() メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい Array インスタンスを生成します。
  • for...of文はインテレータを持つ値に対して使います。ループ毎にイテレータの各要素を取り出します。(for...in文はインデックス番号で取り出します)
  • keysとkeysArrayは過程は違いますが同じ出力結果です。

map.keysメソッドを出力

const map = new Map([["key1", "value1"], ["key2", "value2"]]);
map.keys()

出力結果: [object Map Iterator] (中身がmapの要素が列挙された状態のIteratorが返っています)

map.values()としても結果は出力結果は同じです。(中身がvalueの要素が列挙された状態のIteratorが返っています)

参考

マップの反復処理