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