JavaScriptでのマップの概要
提供:Dev Guides
JavaScriptでsetsを導入したので、ES2015でも導入されたマップに関する議論を続けるのは論理的です。 マップは、キーと値のペアのコレクションを格納できる新しいオブジェクトタイプです。
オブジェクトとは異なり、マップキーは、オブジェクトや関数を含め、どのタイプでもかまいません。 マップのサイズを取得するのも簡単ですが、オブジェクトの場合はそれほど簡単ではありません。 その上、マップを使用すると、順序が保証されていないオブジェクトとは対照的に、値が追加された順序で反復処理できます。
これは、 set 、 get 、 size 、 has 、などの使用可能なメソッドとプロパティのいくつかを示すマップの簡単な例です。 deleteおよびclear:
let things = new Map(); const myFunc = () => '🍕'; things.set('🚗', 'Car'); things.set('🏠', 'House'); things.set('✈️', 'Airplane'); things.set(myFunc, '😄 Key is a function!'); things.size; // 4 things.has('🚗'); // true things.has(myFunc) // true things.has(() => '🍕'); // false, not the same reference things.get(myFunc); // '😄 Key is a function!' things.delete('✈️'); things.has('✈️'); // false things.clear(); things.size; // 0 // setting key-value pairs is chainable things.set('🔧', 'Wrench') .set('🎸', 'Guitar') .set('🕹', 'Joystick'); const myMap = new Map(); // Even another map can be a key things.set(myMap, 'Oh gosh!'); things.size; // 4 things.get(myMap); // 'Oh gosh!'
アレイからのマップの初期化
次の2つの値の配列を含む配列からマップを初期化できます。
const funArray = [ ['🍾', 'Champagne'], ['🍭', 'Lollipop'], ['🎊', 'Confetti'], ]; let funMap = new Map(funArray); funMap.get('🍾'); // Champagne
マップ上での反復
for…ofおよびarraydestructuring を使用すると、マップを簡単に繰り返すことができます。
let activities = new Map(); activities.set(1, '🏂'); activities.set(2, '🏎'); activities.set(3, '🚣'); activities.set(4, '🤾'); for (let [nb, activity] of activities) { console.log(`Activity ${nb} is ${activity}`); } // Activity 1 is 🏂 // Activity 2 is 🏎 // Activity 3 is 🚣 // Activity 4 is 🤾
…また、 forEach を使用して、同じ方法でマップを反復処理することもできます。 ただし、forEachコールバック関数の最初の引数が value であり、2番目の引数がkeyであることに注意してください。 以下は、for…ofの例と同じ結果になります。
activities.forEach((value, key) => { console.log(`Activity ${key} is ${value}`); });