JavaScript Mapオブジェクト

JavaScript　Mapオブジェクト:

今までMapオブジェクトをそんなに使ったことがないと気づいたので、調べてみました。

まとめます。

Mapオブジェクトとは

ES2015(ES6)から導入された、キーと値の組み合わせを保持することができるオブジェクト。

以下のような特徴があります。

• キーと値の組み合わせを保持することができる
• キーは一意(あとから同じキーで追加された場合、値は上書きされる)
• キーと値にはあらゆるオブジェクトを使用できる
  
  
  • キー：オブジェクトの場合、参照が違う場合は違うキーとして認識される

Mapの使い方

動作確認環境

• Windows10
• Node.js v10.14.1

Mapの作成

var map = new Map(); 

これで作成することができます。

中身が空のMapオブジェクトが作成されます。

コンストラクタに初期値を渡すこともできます。

キーと値の組み合わせ(["キー", "値"])の配列を渡すことができます。

var map = new Map([["key1", 1000]]); 
console.log(map.get("key1")); 
// 1000 

(上にも書きましたが)キーにはどのようなデータ型でも使うことができます。

要素の参照 get

get(key)で、keyに対応する値を参照することができます。

var map = new Map([["key1", 1000], [5, "value"]]); 
 
var value1 = map.get("key1"); 
console.log(value1);   // 1000 
 
var value2 = map.get(5); 
console.log(value2);   // value 

要素の追加 set

set(key, value)で、keyに対応する値をmapオブジェクトへ追加することができます。

同じキーで追加を行うと、後から追加された値で上書きされます。

var map = new Map(); 
 
map.set("key1", "apple"); 
map.set("key2", "banana") 
 
console.log(map.get("key1"));   // apple 
console.log(map.get("key2"));   // banana 
 
// 同じキーを使って要素の追加 
map.set("key1", "red"); 
console.log(map.get("key1"));   // red 

要素の削除

delete(key)で、そのkeyとkeyに対応する値の組み合わせをmapオブジェクトから削除します。

var map = new Map([["key1", 1000]]); 
console.log(map.get("key1"));   // 1000 
 
map.delete("key1"); 
console.log(map.get("key1"));   // undefined 

全ての要素を削除

clear()で、mapオブジェクトのすべての要素を削除します。

var map = new Map([["key1", 1000], [5, "value"]]); 
console.log(map.size);   // 2 
 
map.clear(); 
console.log(map.size);   // 0 

サイズの取得

sizeプロパティを参照することで、mapオブジェクトに含まれる要素の数を取得します。

var map = new Map([["key1", 1000]]); 
console.log(map.size);   // 1 

キーが存在するかどうかの確認

has(key)で、そのキーがmapオブジェクトに存在するかどうかを確認できます。

var map = new Map([["key1", 1000]]); 
console.log(map.has("key1"));   // true 
console.log(map.has("key2"));   // false 

また、以下の状態ではすべてtrueとなります。

var map = new Map([["key1", 1000], ["key2", null], ["key3"]]); 
console.log(map.size);   　　　　// 3 
console.log(map.get("key1"));   // 1000 
console.log(map.get("key2"));   // null 
console.log(map.get("key3"));   // undefined 
 
console.log(map.has("key1"));   // true 
console.log(map.has("key2"));   // true 
console.log(map.has("key3"));   // true 

反復処理

forEach

Mapへの追加順に要素を取り出せます。

var map = new Map(); 
 
map.set("key1", "apple"); 
map.set("key2", "banana"); 
map.set("key3", "melon"); 
 
map.forEach(function(value, key){ 
  console.log("[" + key + ", " + value + "]" ); 
}); 
 
// [key1, apple] 
// [key2, banana] 
// [key3, melon] 

keys

keys()は、全ての要素のキーを追加順に並べたIteratorオブジェクトを返します。

Iteratorについてこちらの記事がとても分かりやすかったため、リンクさせていただきます。
JavaScript の イテレータ を極める！

var map = new Map(); 
 
map.set("key1", "apple"); 
map.set("key2", "banana"); 
map.set("key3", "melon"); 
 
var keys = map.keys(); 
for(var key of keys) { 
  console.log(key); 
} 
 
// key1 
// key2 
// key3 

values

values()は、全ての要素の値を追加順に並べたIteratorオブジェクトを返します。

var map = new Map(); 
 
map.set("key1", "apple"); 
map.set("key2", "banana"); 
map.set("key3", "melon"); 
 
var values = map.values(); 
for(var value of values) { 
  console.log(value); 
} 
 
// apple 
// banana 
// melon 

entries

entries()は、全ての要素を追加順に並べたIteratorオブジェクトを返します。

var map = new Map(); 
 
map.set("key1", "apple"); 
map.set("key2", "banana"); 
map.set("key3", "melon"); 
 
var entries = map.entries(); 
for(var entry of entries) { 
  console.log(entry); 
} 
 
// [ 'key1', 'apple' ] 
// [ 'key2', 'banana' 
// [ 'key3', 'melon' ]