Help us understand the problem. What is going on with this article?

JavaScript Mapオブジェクト

More than 1 year has passed since last update.

今まで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' ]
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away