JavaScript - Mapの作成と初期化、3つの方法

JavascriptでMapを生成して初期化する方法を紹介します。

1. 配列によるマップの作成と初期化

Map は以下のように new Map() で生成できます。このように生成されたMapには何の要素もありません。

let myMap = new Map();

もしMap生成と同時に要素を持つように初期化するには、以下のように2配列をコンストラクタの引数に渡すだけです。配列の中に [key, value] 型の配列として要素を追加するだけです。

let myMap = new Map([
  ['c', 2],
  ['a', 4],
  ['d', 1],
  ['b', 3],
]);

console.log(myMap);

Output:

Map(4) { 'c' => 2, 'a' => 4, 'd' => 1, 'b' => 3 }

Mapを作成しながら、Objectの内容を要素として追加することもできます。

次の例では、 Object.entries(obj) は Object の key と value を 2 次配列にして返します。 2 次配列を Map のコンストラクタに渡して初期化を行います。

let obj = {'c': 2, 'a': 4, 'd': 1, 'b': 3};

let myMap = new Map(Object.entries(obj));

console.log(myMap);

Output:

Map(4) { 'c' => 2, 'a' => 4, 'd' => 1, 'b' => 3 }

ちなみに、 Object.entries(obj) の戻り値を出力してみると、2 次配列が返されることが確認できます。

let obj = {'c': 2, 'a': 4, 'd': 1, 'b': 3};
console.log(Object.entries(obj));

Output:

[ [ 'c', 2 ], [ 'a', 4 ], [ 'd', 1 ], [ 'b', 3 ] ]

Map.set(key, value) は Map に key-value 要素を追加します。

以下のように空の Map を生成し、生成後に set() で要素を追加できます。

let myMap = new Map();
myMap.set('c', 2);
myMap.set('a', 4);
myMap.set('d', 1);
myMap.set('b', 3);

console.log(myMap);

Output:

[ [ 'c', 2 ], [ 'a', 4 ], [ 'd', 1 ], [ 'b', 3 ] ]