JavaScript　Mapオブジェクト #JavaScript

今まで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' ]

JavaScript Mapオブジェクト