# JavaScript 基礎編10(学習日:9/25)(Map/Set) ## Map/Set<ES2015対応> ## 1. Map ### Mapの定義と基本操作 Mapは、キーと値の組み合わせでデータを扱うビルドインオブジェクトの一つである。(JavaでいうHashMap) <基本操作> * Mapの新規作成 const map = new Map(); * Mapの新規作成(初期値あり)const map new Map(["キー1", "値1"], ["キー2", "値2"],・・・); * 要素の追加・上書き map.set(キー,値); * 要素の取り出し map.get(キー); * 要素数の確認 map.size; * 要素の存在確認 map.has(キー); * 要素の削除 map.delete(キー); * 要素をすべて削除 map.clear(); (mapはマップのオブジェクト名) ```javascript= //新規作成 const OsakaMetro = new Map(["Midosuji", "red"],["Tanimachi", "purple"], ["Yotsubashi", "blue"]); //要素の追加 OsakaMetro.set("Chuo", "green"); //要素数の確認 console.log(OsakaMetro.size);//=>4 //要素の取り出し console.log(OsakaMetro.get("Chuo"));//=>"green" //要素の上書き OsakaMetro.set("Chuo", "Kintetsu"); //要素の取り出し console.log(OsakaMetro.get("Chuo"));//=>"Kintetsu" //要素の確認 console.log(OsakaMetro.has("Chuo"));//=>true //要素の削除 OsakaMetro.delete("Chuo"); //要素数の確認 console.log(OsakaMetro.size);//=>3 //要素の取り出し console.log(OsakaMetro.get("Chuo"));//=>undefined ``` ### Mapと反復処理 * forEach マップが持つすべての要素を挿入順に反復処理する。 * keys マップが持つすべての要素のキーを挿入順に並べたIteratorオブジェクトを返す。 * values マップが持つすべての要素の値を挿入順に並べたIteratorオブジェクトを返す。 * entires マップが持つすべての要素のキーと値を挿入順に並べたIteratorオブジェクトを返す。 ```javascript= //新規作成 const OsakaMetro = new Map(["Midosuji", "red"],["Tanimachi", "purple"], ["Yotsubashi", "blue"]); //forEach処理 const results = []; OsakaMetro.forEach((value, key) =>{ results.push(`${key}:${value}`); }) console.log(results);//=>["Midosuji":"red", "Tanimachi":"purple", "Yotsubashi":"blue"] //keys処理 const keys = []; // keysメソッドの戻り値(Iterator)を反復処理する for (const key of OsakaMetro.keys()) { keys.push(key); } console.log(keys);//=>["Midosuji", "Tanimachi", "Yotsubashi"] //values処理 const values = []; // valuesメソッドの戻り値(Iterator)を反復処理する for (const values of OsakaMetro.values()) { values.push(value); } console.log(values);//=>["red", "purple", "blue"] //entires処理 const entires = []; // valuesメソッドの戻り値(Iterator)を反復処理する for (const entires of OsakaMetro.entires()) { entires.push(`${key}:${value}`); } console.log(entires);//=>["Midosuji":"red", "Tanimachi":"purple", "Yotsubashi":"blue"] ``` ### マップとしてのObjectとMap Map登場前は、Objectで表現されていた。 Objectを利用したマップは、以下の問題点がある。 * 継承の問題(prototypeから継承されたプロパティが意図せぬ影響を及ぼす可能性がある。) * キーのデータ型の問題(文字列とSymbolのどちらかしか使えない) Mapの特長 * Objectを利用したマップの問題を解決できる。 * マップサイズ(要素数)を表現できる。 * 要素を列挙できる。 * オブジェクトをキーに持てる。 Objectの特長 * リテラル表現があり、作成しやすい。 * JSONへの変換が容易である。 * 多くの関数がマップとしてObjectを渡される設計となっている。 ### Weak Map Mapと同じ形式のビルドインオブジェクトの一つ。 Mapと異なるのは、キーを弱い参照で持つ点である。 Mapではいつまでも不要なオブジェクトメモリが解放されず、メモリリークを起こしやすい問題点がある。 WeakMapを利用すると、ガベージコレクションが不要なオブジェクトに対し、自動的にメモリ開放を行ってくれる。 主な利用方法として、クラスにプライベートの値を格納することがあげられる。this(クラスインスタンス)をWeakMapのキーにすることで、インスタンス外からアクセスできない値を保持できる。参照が終わると自動的に解放される。 他に、計算結果を一時的に格納する場合等にも利用できる。 ## 2. Set ### Setの定義と基本操作 Setは、重複排除が保証されたコレクションを扱うビルドインオブジェクトの一つである。 値が一意(ユニーク)である配列のようなものであるが、順序は持たない。(インデックスは存在しない) <基本操作> * Setの新規作成 const set = new Set(); * Setの新規作成(初期値あり)const set new Set(["値1", "値2", "値3",・・・]); * 要素の追加・上書き set.add(値); * 要素数の確認 set.size; * 要素の存在確認 set.has(値); * 要素の削除 set.delete(キー); * 要素をすべて削除 set.clear(); ※すべての場合で、重複要素の追加は無視される。 ### 反復処理・WeakSet * forEach 利用可能。 * keys 存在はするが、有用ではない。(結果はvaluesと同一となる。) * values 利用可能。 * entires 値を2回返す["値","値"]という形が返る。 * WeakSet 弱い参照のSet。WeakMapとは異なり、反復処理は不可能。 ###### tags: `JavaScript`