Map クラスについて
■Map クラスについて
■Map クラスについて
ECMAScript 6 世代の機能です。
Map クラス は、連想配列のクラスです。
特に、辞書としての利用に最適です。
Map クラスは、データをコレクションする機能がまとまっています。
キーを利用して、任意のデータを追加、取得、除外する事ができます。
キーとは、任意のデータにアクセスするための、ユニーク（唯一）な識別情報です。
■Map クラスと Oject クラスの違い
Object クラスは、プロパティ名（文字列）のみを、キーとして利用する事ができます。
Map クラスは、さらにオブジェクトの参照も、キーとして利用する事ができます。
■辞書としての特性について
Map クラスは、内部でハッシュテーブルを使った高速化が実現されています。
キーを識別情報にして、該当するデータを高速で検索する事ができます。
また、すべてのデータの中から該当するデータが存在しない事を、高速で判別する事もできます。
データの総数が、100 万以上ある場合でも、瞬時に検索できます。
Map クラスについて
■マップオブジェクトを作成する
マップには、Map クラスと、WeakMap クラスの２つがあります。
■ Map と WeakMap クラスの違い
Map クラスは、キーとなるオブジェクトが、強参照となります。
WeakMap クラスは、キーとなるオブジェクトが、弱参照となります。
WeakMap クラスには、格納したデータを、まとめて取得する機能が存在しません。
それ以外の、基本的な使い方は、同じです。
■ Map オブジェクトを作成する
new Map ( Iterator ) :Map
| 第01引数(略可) | Iterator | 初期値として格納したいデータを、Iterator インターフェース実装済みオブジェクトで指定。 |
| 戻り値 | Map | Map オブジェクトが得られる。 |
Map オブジェクトを作成する
// Map オブジェクトを作成
var map = new Map();
// 出力テスト
console.log(map);
■ WeakMap オブジェクトを作成する
new WeakMap ( Iterator ) :WeakMap
| 第01引数(略可) | Iterator | 初期値として格納したいデータを、Iterator インターフェース実装済みオブジェクトで指定。 |
| 戻り値 | WeakMap | WeakMap オブジェクトが得られる。 |
WeakMap オブジェクトを作成する
// WeakMap オブジェクトを作成
var map = new WeakMap();
// 出力テスト
console.log(map);
■マップクラスのメソッドについて
■マップクラスのメソッド
| メソッド | 説明 |
| set() | データを追加する |
| get() | データを取得する |
| delete() | データを除外する |
| clear() | データをすべてクリアする |
| has() | データが存在するか調べる |
| forEach() | コールバック関数を使って、すべてのデータを順番に取得する。 |
| keys() | Iterator オブジェクトを作成する。（キー情報のみ） |
| values() | Iterator オブジェクトを作成する。（値情報のみ） |
| entries() | Iterator オブジェクトを作成する。（キーと値情報） |
■オブジェクトキーについて
マップクラスでは、オブジェクトの参照を、キーとして使用する事ができます。
Map オブジェクトに、データを追加する
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var ary = new Array();
var obj = new Object();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(ary , "あいうえお");
map.set(obj , "かきくけこ");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(map.get(ary)); // "あいうえお"
console.log(map.get(obj)); // "かきくけこ"
■オブジェクトキーの弱参照について
■オブジェクトキーの弱参照について
WeakMap クラスを使用すると、弱参照となります。
これは、オブジェクトをキーとして利用している場合に、効果があります。
オブジェクトキーが弱参照となる、WeakMap オブジェクトを作成
// ------------------------------------------------------------
// WeakMap オブジェクトを作成
// ------------------------------------------------------------
var map = new WeakMap();
// 出力テスト
console.log(map);
■弱参照の動作について
キーとして使用したオブジェクトが、どこからも参照されなくなった場合、ガベージコレクションの対象となります。
ガベージコレクションが実行され、オブジェクトが消滅した場合、格納したデータも消滅します。
オブジェクトキーが消滅した場合、格納したデータも消滅する（タスクマネージャーからメモリ使用量の変化を確認）
// ------------------------------------------------------------
// WeakMap オブジェクトを作成
// ------------------------------------------------------------
var map = new WeakMap();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
// ------------------------------------------------------------
// 256 MByte 相当のデータを格納する
// ------------------------------------------------------------
map.set(obj , (new Uint8Array(1024 * 1024 * 256)));
// ------------------------------------------------------------
// オブジェクトキーへの参照を断つ（ガベージコレクションが発生すると、格納したデータも連動して消滅する）
// ------------------------------------------------------------
obj = null;
■弱参照の使用例について
キーとなるオブジェクトが、自動的に消滅する場合に最適です。
破棄処理が、不要になります。
例えば、DOM オブジェクトを、外部から管理する場合に便利でしょう。
DOM オブジェクトは、ノードリストから除外され、自動的に消滅する事があります。
DOM オブジェクトをキーにして、任意の付随データを格納します。
任意の DOM オブジェクトの参照があれば、付随データを取得できます。
付随データが存在しない事を、瞬時に調べる事もできます。
すべてのデータは、１つの WeakMap オブジェクト内に格納されます。
DOM オブジェクトに、データを保持させる必要はありません。
DOM オブジェクト内が、汚染する事はありません。
DOM オブジェクトが消滅した場合、付随データも連動して消滅します。
DOM オブジェクトが除去されたかを、わざわざ監視する必要はありません。
イベントリスナーの、コールバック関数内で使用する例は、こちらです。
データを追加する
■set() メソッドを使って、データを追加する
マップオブジェクトに、データを追加するには、set() メソッドを使用します。
キーには、オブジェクトの参照を指定する事もできます。
WeakMap クラスの場合、キーにプリミティブな値を指定する事はできません。
Map.set ( キー , データ ) :Void
| 第01引数(略可) | Object | キーとなる任意のデータを指定。省略した場合 undefined 値。 |
| 第02引数(略可) | Object | 格納したい任意のデータ（値）を指定。省略した場合 undefined 値。 |
| 戻り値 | Void | なし |
■使用例
Map オブジェクトに、データを追加する（キーにプリミティブ型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(false , "あいうえお");
map.set(123 , "かきくけこ");
map.set("str" , "さしすせそ");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(map.get(false)); // "あいうえお"
console.log(map.get(123)); // "かきくけこ"
console.log(map.get("str")); // "さしすせそ"
Map オブジェクトに、データを追加する（キーにリファレンス型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
var ary = new Array();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(obj , "たちつてと");
map.set(ary , "なにぬねの");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(map.get(obj)); // "たちつてと"
console.log(map.get(ary)); // "なにぬねの"
データを取得する
■get() メソッドを使って、データを取得する
マップオブジェクトから、データを取得するには、get() メソッドを使用します。
キーには、オブジェクトの参照を指定する事もできます。
WeakMap クラスの場合、キーにプリミティブな値を指定する事はできません。
Map.get ( キー ) :Object
| 第01引数(略可) | Object | キーとなる任意のデータを指定。省略した場合 undefined 値。 |
| 戻り値 | Object | キーに該当するデータが得られる。存在しない場合、undefined 値が得られる。 |
■使用例
Map オブジェクトから、データを取得する（キーにプリミティブ型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(false , "あいうえお");
map.set(123 , "かきくけこ");
map.set("str" , "さしすせそ");
// ------------------------------------------------------------
// データを取得する
// ------------------------------------------------------------
var a = map.get(false);
var b = map.get(123);
var c = map.get("str");
var d = map.get(999);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(a); // "あいうえお"
console.log(b); // "かきくけこ"
console.log(c); // "さしすせそ"
console.log(d); // undefined
Map オブジェクトから、データを取得する（キーにリファレンス型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
var ary = new Array();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(obj , "たちつてと");
map.set(ary , "なにぬねの");
// ------------------------------------------------------------
// データを取得する
// ------------------------------------------------------------
var a = map.get(obj);
var b = map.get(ary);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(a); // "たちつてと"
console.log(b); // "なにぬねの"
■データが存在するか調べる
マップオブジェクトに、データが存在するか調べるには、has() メソッドを使用します。
WeakMap クラスの場合、キーにプリミティブな値を指定する事はできません。
Map.has ( キー ) :Boolean
| 第01引数(略可) | Object | キーとなる任意のデータを指定。省略した場合 undefined 値。 |
| 戻り値 | Boolean | キーに該当するデータが存在する場合 true、存在しない場合 false が得られる。 |
■使用例
Map オブジェクトに、データが存在するか調べる（キーにリファレンス型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
var ary = new Array();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(obj , "あいうえお");
// ------------------------------------------------------------
// データが存在するか調べる
// ------------------------------------------------------------
var a = map.has(obj);
var b = map.has(ary);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(a); // true
console.log(b); // false
■データの総数を取得する
データの総数を取得するには、size プロパティを使用します。
このプロパティは、WeakMap クラスには、存在しません。
Map オブジェクトの、データの総数を取得する
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set("aaa" , "a");
map.set("bbb" , "b");
map.set("ccc" , "c");
map.set("ddd" , "d");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(map.size); // 4
■すべてのデータを順番に取得する
■ for..of 文を使用する
for..of 文を使って、アクセスする例です。
配列を得ることができます。
0 番地にはキー情報、1 番地には値情報が格納されています。
この文は、WeakMap クラスでは動作しません。
for..of 文を使用して、すべてのデータにアクセスする
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set("aaa" , false);
map.set("bbb" , 123);
map.set("ccc" , "str");
// ------------------------------------------------------------
// for..of 文を使用して、すべてのデータにアクセスする
// ------------------------------------------------------------
for (var [key,value] of map){
console.log("---");
console.log("key:" + key);
console.log("value:" + value);
}
■forEach() メソッドを使って、すべてのデータを順番に取得する
すべてのデータを順番に取得するには、forEach() メソッドを使用します。
このメソッドは、WeakMap クラスには、存在しません。
Map.forEach ( コールバック関数 , this ) :Void
| 第01引数 | Function | コールバック関数を指定する。 |
| 第02引数(略可) | Object | コールバック関数内で this 演算子に該当するオブジェクトを指定。 |
| 戻り値 | Void | なし |
■コールバック関数について
第01引数から、値情報が得られます。
第02引数から、キー情報が得られます。
第03引数から、自身の Map オブジェクトが得られます。
■使用例
すべてのデータを順番に取得する
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set("aaa" , false);
map.set("bbb" , 123);
map.set("ccc" , "str");
// ------------------------------------------------------------
// すべてのデータを順番に取得する
// ------------------------------------------------------------
map.forEach(function(value,key,map){
console.log("---");
console.log("key:" + key);
console.log("value:" + value);
console.log("map:" + map);
});
データを除外する
■delete() メソッドを使って、データを除外する
マップオブジェクトから、データを除外するには、delete() メソッドを使用します。
WeakMap クラスの場合、キーにプリミティブな値を指定する事はできません。
Map.delete ( キー ) :Void
| 第01引数(略可) | Object | キーとなる任意のデータを指定。省略した場合 undefined 値。 |
| 戻り値 | Void | なし |
■使用例
Map オブジェクトから、データを除外する（キーにプリミティブ型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(false , "あいうえお");
map.set(123 , "かきくけこ");
map.set("str" , "さしすせそ");
// ------------------------------------------------------------
// データを除外する
// ------------------------------------------------------------
map.delete(false);
map.delete(123);
map.delete("str");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
map.forEach(function(value,key,map){
console.log("---");
console.log("key:" + key);
console.log("value:" + value);
});
Map オブジェクトから、データを除外する（キーにリファレンス型の値を使用）
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
var ary = new Array();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(obj , "たちつてと");
map.set(ary , "なにぬねの");
// ------------------------------------------------------------
// データを除外する
// ------------------------------------------------------------
map.delete(obj);
map.delete(ary);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
map.forEach(function(value,key,map){
console.log("---");
console.log("key:" + key);
console.log("value:" + value);
});
WeakMap オブジェクトから、データを除外する（オブジェクトキーの弱参照）
// ------------------------------------------------------------
// WeakMap オブジェクトを作成（弱参照）
// ------------------------------------------------------------
var map = new WeakMap();
// ------------------------------------------------------------
// オブジェクトを作成
// ------------------------------------------------------------
var obj = new Object();
var ary = new Array();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set(obj , "たちつてと");
map.set(ary , "なにぬねの");
// ------------------------------------------------------------
// オブジェクトキーへの参照を断つ
// ------------------------------------------------------------
obj = null;
ary = null;
■すべてのデータをクリアする
マップオブジェクトから、すべてのデータを除外するには、clear() メソッドを使用します。
■使用例
マップオブジェクトから、すべてのデータを除外する
// ------------------------------------------------------------
// Map オブジェクトを作成
// ------------------------------------------------------------
var map = new Map();
// ------------------------------------------------------------
// データを格納する
// ------------------------------------------------------------
map.set("aaa" , "あいうえお");
map.set("bbb" , "かきくけこ");
map.set("ccc" , "さしすせそ");
// ------------------------------------------------------------
// データをすべてクリアする
// ------------------------------------------------------------
map.clear();
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(map.size); // 0