2022年3月1日 [ES2015] Map/Set - Map (JavaScript Primer)
JavaScriptには配列の他にマップ型のコレクションであるMapと、セット型のコレクションであるSetというデータの集まりを扱うコレクションがあります。
Map
マップ型のコレクションを扱うためのビルトインオブジェクトです。 キーと値の組み合わせからなります。
マップの作成と初期化
他のビルトインオブジェクトと同じようにMapオブジェクトもnewでインスタンス化することが出来ます。 sizeプロパティはマップのサイズを返します。
const map = new Map() console.log(map.size); //=>0
初期化時にコンストラクタに値を渡す場合はエントリーの配列を渡します。
エントリーとは 1つのキーと値の組み合わせを[キー, 値]という形式の配列で表現したものです。
引数にはエントリーの配列が渡せます
const map = new Map([["key1", "value1"], ["key2", "value2"]]); // 2つのエントリーで初期化されている console.log(map.size); // => 2
エントリーを配列リテラルで囲わずに引数として渡すとTypeErrorが発生しました。
const map = new Map(["key1", "value1"]); TypeError: Iterator value key1 is not an entry object
エントリーがどこに渡されているのかを検証ツールで確認しました。 Entries内部プロパティがありその中にありました。ここにnew演算子でインスタンス化した際に渡した引数が入っています。
要素の追加と取り出し
Mapが持つメソッド
- setメソッド・・・2つの要素(キーとバリュー)を引数に渡すことで新しくmapに要素を追加出来ます。
- getメソッド・・・引数に既存のキーを渡すことでvalueにあたる値を取り出せます。
- hasメソッド・・・引数にkeyを渡すことで、そのkeyに紐づく値を持っているかを確認し、真偽値を返します。
const map = new Map(); // 新しい要素の追加 map.set("key", "value1"); console.log(map.size); // => 1 console.log(map.get("key")); // => "value1" // 要素の上書き map.set("key", "value2"); console.log(map.get("key")); // => "value2" // キーの存在確認 console.log(map.has("key")); // => true console.log(map.has("foo")); // => false
ObjectとMapの違い
- Mapのキーは任意の型で指定できます。
- Objectのキーは文字列かシンボルの型でしか指定できません。
ObjectもMapも、キー付けされたデータの集まりですが、違いもあります。 それは、Objectの場合、キーを文字列またはシンボルの型のみでしか指定できませんでしたが、Mapの場合は、キーを任意の型で取ることができるようになった点です。
インスタンス化をしたMapオブジェクトにsetメソッドを使って要素を追加した状態を検証しました。 - Entries内部プロパティにsetで追加した要素(keyとvaluのセット)が入っていました。
deleteメソッド clearメソッド
const map = new Map(); map.set("key1", "value1"); map.set("key2", "value2"); console.log(map.size); // => 2 map.delete("key1"); console.log(map.size); // => 1 map.clear(); console.log(map.size); // => 0
- map.delete("キー名")の記述で要素を削除する事ができます。
- map.clear()の記述で要素を全て削除する事ができます。
メモ
- ArrayやObject、Mapなどのデータの集まりをコレクションといいます。
- Mapではキー文字列やシンボル型以外にも指定できます。
- エントリーとは、1つのキーと値の組み合わせを[キー, 値]という形式の配列で表現したものです。
- Mapインスタンスをnew演算子で作成する際に渡す引数にはエントリーを配列リテラルで囲う必要があります。[[]]このように2重になるイメージです。
復習
- new演算子には関数呼び出しと同じように引数を渡すことができます。
- new演算子の引数はクラスのconstructorメソッド(コンストラクタ関数)の仮引数に渡されます。
- コンストラクタの中ではインスタンスオブジェクト(this)が新しく作成されています。(初期化処理)