JavaScript でマップを反復処理する

マップには、キーと値の 2つのコンポーネントがあります。マップオブジェクトをトラバースするために使用できる手法は、最初にキーを取得してから、1つまたは複数の値を繰り返し処理します。このループは最後のマップキーまで終了し、その値が繰り返されます（それ以前に終了しない場合のみ）。

ここでは、反復に取り組む最も簡単な方法に焦点を当てます。マップオブジェクトを反復処理するための以前の ES6 メソッドには、比較的長いコード行がありますが、ES6 は、作業を実行するための新しく簡単な方法をもたらします。次のセクションでは、それらについて説明します。

JavaScript でマップを反復処理する一般的な方法

この例では、各キーの配列値を持つオブジェクトを取得します。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]);
  }
}

出力：

JavaScript で for of ループを使ってマップを反復処理する

for of ループの場合、破壊的な割り当てを使用して変数デュオを作成します。これにより、各反復後にキーと値が解凍されます。ここでは、マップコンストラクターのインスタンス 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);
}

出力：

forEach メソッドを使用してマップを反復処理する

ここに、ES6 マップの反復の一般的な方法の 1つがあります。このメソッドは、キーと値の 2つの引数を使用して関数をトリガーするのと同じくらい簡単です。これで、数行のコードでペアを繰り返してトラバースする準備が整いました。

コードスニペット：

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);
});

出力：