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);
});
出力：
