JavaScriptでのマップの概要

投稿日: 2022-04-20 2022-04-20
タグ: javascript

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

getdocs

13036