JavaScriptのMapを使ってみる

JavaScriptのMapオブジェクトを使ってみます。

Mapオブジェクト

Mapオブジェクトはキーと値のペアを持つオブジェクトで、Objectとの違いの例は以下の通りです。

• キーに数値や真偽値など、あらゆる型を使用できる
• キーの順序が追加した順番で保持される
• キーの数をsizeプロパティで簡単に取得できる
• for…ofなどで反復可能

Mapオブジェクトはnew Map()で作成できます。
キーと値をセットにした2次元配列を引数に与えることで、初期値に設定できます。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
  [123, 456],
  [true, false],
  [[1,2], [3,4]],
  ['name', 'nozomi'],
  ['user', 'sophia'],
]);
console.log(mapObj); // Map(6) {'name' => 'nozomi', 'id' => 214, 123 => 456, [1,2] => [3,4], true => false, 'user' => 'sophia'}

上記で試している通り、真偽値や配列をキーとしても設定でき、並び順も設定した順番で保持されています。
new Map()のデモページ

set()を使って要素を追加できます。

const mapObj = new Map();

// 要素の追加
mapObj.set('name', 'sophia');
mapObj.set('id', 214);
console.log(mapObj); // Map(2) {'name' => 'sophia', 'id' => 214}

set()のデモページ

注意点として、Mapオブジェクトとして作成したものをObjectのように操作すると一見動作していそうに見えますが、Mapオブジェクトとして使用できません。

const mapObj = new Map();

// Objectのように追加
mapObj['name'] = 'sophia';
mapObj['id'] = 214;
console.log(mapObj); // Map(0) {name: 'sophia', id: 214, size: 0}

// Mapオブジェクトとして操作できない
console.log(mapObj.size); // 0
console.log(mapObj.has('name')); // false

要素を追加する場合は前述のset()を使用するようにしてください。
Objectのように追加した場合のデモページ

値の取得はget()でキーを指定します。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);
console.log(mapObj.get('name')); // sophia

get()のデモページ

前述の通り、sizeで要素の数を取得できます。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);
console.log(mapObj.size); // 2

sizeのデモページ

特定のキーがあるかどうかはhas()を使用します。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);
console.log(mapObj.has('name')); // true
console.log(mapObj.has('username')); // false

has()のデモページ

要素の削除にはdelete()を使用します。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);

// 要素の削除
mapObj.delete('id');
console.log(mapObj); // Map(1) {'name' => 'sophia'}

delete()のデモページ

ループ処理にはfor…ofなどが使えます。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);

// Mapのループ
for (const [key, val] of mapObj) {
  console.log(key, ':', val); // name : sophia id : 214
}

Mapのループのデモページ

すべての要素を取り除く場合はclear()を使用します。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);

mapObj.clear();
console.log(mapObj); // Map(0) {size: 0}

clear()のデモページ

Mapオブジェクトのコピーはnew Map()でできます。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
]);

// Mapの複製
const clone = new Map(mapObj);
console.log(clone); // Map(2) {'name' => 'sophia', 'id' => 214}

mapObj.set('name', 'nozomi');
clone.set('id', 519);
console.log(mapObj); // Map(2) {'name' => 'nozomi', 'id' => 214}
console.log(clone); // Map(2) {'name' => 'sophia', 'id' => 519}

コピー元やコピー先のMapオブジェクトを変更しても、もう一方のMapオブジェクトは変更されません。
Mapオブジェクトの複製のデモページ

複数のMapや配列の混合もnew Map()で行えます。

const mapObj = new Map([
  ['name', 'sophia'],
  ['id', 214],
  ['user', 'SophiaV214']
]);
const mapObj2 = new Map([
  ['name', 'meruto'],
  ['id', 519],
]);

// Mapの混合
const merged = new Map([...mapObj, ...mapObj2, ['name', 'nozomi']]);
console.log(merged); // Map(3) {'name' => 'nozomi', 'id' => 519, 'user' => 'SophiaV214'}

スプレッド演算子を使って2次元配列に変換して、new Map()に設定しています。
Mapオブジェクトの混合のデモページ