Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript辞典

Map対応: ES6（ECMAScript 2015）

キーと値のペアを管理するコレクションです。オブジェクトと異なり、あらゆるデータ型をキーとして使用でき、挿入順序が保持されます。

構文

// 新しいMapを作成します。
var map = new Map();

// 初期値を指定して作成することもできます。
var map = new Map([
	["キー1", "値1"],
	["キー2", "値2"]
]);

メソッド・プロパティ一覧

メソッド / プロパティ	概要
set(キー, 値)	キーと値のペアを追加します。同じキーがすでに存在する場合は値が上書きされます。
get(キー)	指定したキーの値を取得します。キーが存在しない場合は『undefined』を返します。
has(キー)	指定したキーが存在するかどうかを『true』または『false』で返します。
delete(キー)	指定したキーのペアを削除します。削除に成功した場合は『true』、キーが存在しなかった場合は『false』を返します。
clear()	すべてのペアを削除します。
size	格納されているペアの数を返します。
forEach(関数)	すべてのペアに対して関数を実行します。コールバック関数の引数は『値, キー, Map本体』の順番です。

サンプルコード

// Mapの基本操作
var userMap = new Map();

// データを追加します。
userMap.set("name", "太郎");
userMap.set("age", 25);
userMap.set("active", true);

// データを取得します。
console.log(userMap.get("name")); // 『太郎』と出力されます。
console.log(userMap.get("age")); // 『25』と出力されます。

// キーの存在を確認します。
console.log(userMap.has("name")); // 『true』と出力されます。
console.log(userMap.has("email")); // 『false』と出力されます。

// 件数を確認します。
console.log(userMap.size); // 『3』と出力されます。

// すべてのペアを順番に処理します。
userMap.forEach(function(value, key) {
	console.log(key + ": " + value);
});

// オブジェクトをキーとして使う例
var key1 = { id: 1 };
var key2 = { id: 2 };
var objMap = new Map();
objMap.set(key1, "ユーザー1");
objMap.set(key2, "ユーザー2");
console.log(objMap.get(key1)); // 『ユーザー1』と出力されます。

// データを削除します。
userMap.delete("active");
console.log(userMap.size); // 『2』と出力されます。

// すべてのデータを削除します。
userMap.clear();
console.log(userMap.size); // 『0』と出力されます。

実行結果

上記のコードを実行すると、コンソールには以下のように出力されます。

"太郎"
25
true
false
3
"name: 太郎"
"age: 25"
"active: true"
"ユーザー1"
2
0

Mapとオブジェクトの違い

特徴	Map	オブジェクト
キーの型	あらゆるデータ型が使えます。	文字列とSymbolのみです。
挿入順序	保持されます。	保持されますが、数値キーは先にソートされます。
件数の取得	『size』プロパティで取得できます。	『Object.keys(obj).length』で計算する必要があります。
繰り返し処理	『forEach()』や『for...of』で直接走査できます。	『Object.keys()』等で変換が必要です。

概要

『Map』はキーと値のペアを格納するコレクションで、ES6で追加されたデータ構造です。通常のオブジェクトでもキーと値を管理できますが、『Map』はキーにあらゆるデータ型を使え、挿入順序が保持され、件数を『size』プロパティで簡単に取得できるという利点があります。

特にオブジェクトや関数をキーとして使いたい場合や、頻繁にデータの追加・削除を行う場合は『Map』が適しています。『forEach()』メソッドのコールバック関数は『値, キー, Map本体』の順番で引数が渡されます。配列の『forEach()』と同様に値が第1引数のため注意してください。

一意な値だけを管理したい場合は『Set』を使用してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPlaceウェブプログラミングプレイス