作 ▸ 2019-03-13 12:33

JavaScriptのMapの使い方

調べるのが面倒でいつも Object でやっちゃってたので書いておく

基本

0番目にキー、1番目に値をセットした2次元配列をコンストラクタに渡して作成。(※正確にはイテレータブルなものらしいが)

set() で設定、get() で取得、delete() で削除。

// 作成
const map = new Map([
	['key1', 'value1'],
	['key2', ['value2', '!!!']]
]);

// 設定
map.set('key3', 'value3');
map.set('key1', 'value111');

// 取得
console.log( map.get('key1') );  // -> "value111"
console.log( map.get('key2') );  // -> ["value2", "!!!"]
console.log( map.get('key3') );  // -> "value3"
console.log( map.get('key0') );  // -> undefined

// 削除
map.delete('key1');
console.log( map.get('key1') );  // -> undefined

キーは型まで見て区別される

const map = new Map([
	[0, '!!!'],
	['0', '???']
]);

console.log( map.get(0) );    // -> "!!!"
console.log( map.get('0') );  // -> "???"

nullとかundefinedもキーにできちゃう

const map = new Map([
	[null, '!!!'],
	[undefined, '???'],
	[NaN, '...']
]);

console.log( map.get(null) );       // -> "!!!"
console.log( map.get(undefined) );  // -> "???"
console.log( map.get(NaN) );        // -> "..."

要素数を取得

size プロパティに持ってる。

const map = new Map([
	['key1', 'value1'],
	['key2', 'value2']
]);

console.log( map.size );  // -> 2

キーの存在チェック

has() でやる。

const map = new Map([
	['key1', 'value1'],
	[2, 'value2']
]);

console.log( map.has('key1') );  // -> true
console.log( map.has('2') );     // -> false
console.log( map.has(2) );       // -> true

for-of でループ処理

値だけ

const map = new Map([
	['key1', 'value1'],
	['key2', 'value2'],
	['key3', 'value3']
]);

for (let value of map.values()) {
	console.log(value);
}
// -> "value1" -> "value2" -> "value3"

キーだけ

const map = new Map([
	['key1', 'value1'],
	['key2', 'value2'],
	['key3', 'value3']
]);

for (let key of map.keys()) {
	console.log(key);
}
// -> "key1" -> "key2" -> "key3"

キーと値をセットで

const map = new Map([
	['key1', 'value1'],
	['key2', 'value2'],
	['key3', 'value3']
]);

for (let elem of map) {
	console.log(elem);
}
// -> ["key1", "value1"] -> ["key2", "value2"] -> ["key3", "value3"]


// ★entriesを回しても同じ
for (let elem of map.entries()) {
	console.log(elem);
}
// -> ["key1", "value1"] -> ["key2", "value2"] -> ["key3", "value3"]


// ★分割代入でキーと値をバラせる
for (let [key, value] of map) {
	console.log(key, value);
}
// -> "key1" "value1" -> "key2" "value2" -> "key3" "value3"

forEachでループ処理

Map にも forEach() がある。コールバック関数には、第1引数に値、第2引数にキー、第3引数に元の Map が渡ってくる。

const map = new Map([
	['key1', 'value1'],
	['key2', 'value2'],
	['key3', 'value3']
]);

map.forEach((value, key) => {
	console.log(value, key);
});
// -> "key1" "value1" -> "key2" "value2" -> "key3" "value3"