【JavaScript】Mapで連想配列を使おう

おはようございます。タカヒデです。

さて今回の記事はMapオブジェクトです。

Mapってよく使いませんか？

私の感覚ですが、参考書やUdemyの講座などを受けているとよく使われるオブジェクトです。

体感一つの参考書で一回は使われているのではないでしょうか。（体感ですけど…）

Mapは配列のイメージは持っているものの、出てくるたびに正確に理解できていないことを思い出します。

というわけで本日は、「JavaScriptにおける、『連想配列』について、『Mapオブジェクト』」を紹介します。

ぜひ本記事を参考にしてください。

Mapオブジェクトとは？

さっそく「Mapオブジェクト」について見ていきましょう。

Mapオブジェクトとは、「キー/値のセットである連想配列を管理するためのオブジェクト」です。

「連想配列？普通の「={}」を使用する配列と何が違うの？」
そう思ったことでしょう。

「={}」この普通のよくあるオブジェクトを「オブジェクトリテラル」と呼びます。

ではまずは、「Mapオブジェクト」と「オブジェクトリテラル」の違いから確認してみましょう。

Mapオブジェクトとオブジェクトリテラルの違い

Mapオブジェクトとオブジェクトリテラルの違いをまとめるとこんな感じです。

オブジェクトリテラルと比べ、Mapオブジェクトの方が高いパフォーマンスで使用することができます。

• キーが文字列以外
• キーが事前に決まっていない

こんな時にはMapを使用することが多いそうです。

Mapオブジェクトの使い方

では、具体的な『Mapオブジェクト』の使い方をみてみます。

Mapの生成

まずは「Mapを生成する方法」です。

//記載方法

new Map ([ キー , 値 ])

//記載方法

new Map ([ キー , 値 ])

以下が実際の記載例です。

let test = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
]);

console.log(test);
//実行結果：{'key1' => 'value1', 'key2' => 'value2'}

let test = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
]);

console.log(test);
//実行結果：{'key1' => 'value1', 'key2' => 'value2'}

Mapによって連想配列が生成できていることが分かります。

オブジェクトリテラルで記載する場合と比べ、[]で囲う必要があるため、少し複雑に見える方もいるかもしれませんね。

Mapの値を追加/取得

続けて、「Mapの値を追加/取得する方法」です。

「値の追加」「値の取得」まとめて記載方法を見てみましょう。

//Mapの値を追加：記載方法

Map格納変数.set(キー,値)

//Mapの値を追加：記載方法

Map格納変数.set(キー,値)

//Mapの値を取得：記載方法

Map格納変数.get( キー )

//Mapの値を取得：記載方法

Map格納変数.get( キー )

以下が記載例です。

let test = new Map();
test.set("key1", "value1").set("key2", "value2");

console.log(test.get("key2"));
// 実行結果：value2

let test = new Map();
test.set("key1", "value1").set("key2", "value2");

console.log(test.get("key2"));
// 実行結果：value2

「set」で追加をして、「get」で取得をしています。

ここでは「key2」の値だけ取得していることが分かりますね。

Mapのキーを削除

次は「Mapのキーを削除する方法」です。

//記載方法

Map格納変数.delete( キー )

//記載方法

Map格納変数.delete( キー )

こちらも記載例を見てみましょう。

let test = new Map();
test.set("key1", "value1").set("key2", "value2");
test.delete("key1");

console.log(test.get("key1"));
// 実行結果：undefined

let test = new Map();
test.set("key1", "value1").set("key2", "value2");
test.delete("key1");

console.log(test.get("key1"));
// 実行結果：undefined

Mapの「key1」をキーを削除したため、「undefined」になっていることが分かります。

またすべてのキーを削除する場合には、『Map格納変数.clear()』で実施できるので覚えておきましょう。

すべてのキー・値の取得

最期に、Mapにおける「すべてのキー・すべての値を取得する方法」です。

3つの記載方法を紹介しますが、「for…of文」と組み合わせ、すべてのキー・値を取得します。

//すべてのキーを取得：記載方法

Map格納変数. keys()

//すべてのキーを取得：記載方法

Map格納変数. keys()

//すべての値を取得：記載方法

Map格納変数. values()

//すべての値を取得：記載方法

Map格納変数. values()

//すべてのキー/値を取得：記載方法

Map格納変数. entries()

//すべてのキー/値を取得：記載方法

Map格納変数. entries()

すべてまとめて記載例を見てみましょう。

let test = new Map();
test.set("key1", "value1").set("key2", "value2");


//すべてのキーを取得
for (let key of test.keys()) {
    console.log(key);
}
//実行結果：key1,key2


//すべての値を取得
for (let value of test.values()) {
    console.log(value);
}
//実行結果：value1,value2


//すべてのキーと値を取得
for (let [key, value] of test.entries()) {
    console.log(key, value);
}
//実行結果：key1 value1, key2 value2

let test = new Map();
test.set("key1", "value1").set("key2", "value2");


//すべてのキーを取得
for (let key of test.keys()) {
    console.log(key);
}
//実行結果：key1,key2


//すべての値を取得
for (let value of test.values()) {
    console.log(value);
}
//実行結果：value1,value2


//すべてのキーと値を取得
for (let [key, value] of test.entries()) {
    console.log(key, value);
}
//実行結果：key1 value1, key2 value2

少し見づらいかもしれませんが、キー・値をそれぞれすべて取得できていることが分かります。

まとめ

以上が「JavaScriptにおける『連想配列』について、『Mapオブジェクト』」の紹介でした。

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

タカヒデ

ITを楽しく勉強中

X

通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね