マップ（Map）

• マップ(Map)
  • map = new Map([iterable])
  • map.set(key, value)
  • map.get(key)
  • map.size
  • map.keys()
  • map.values()
  • map.entries()
  • map.forEach(function[, this])
  • map.has(key)
  • map.delete(key)
  • map.clear()
  • Map.groupBy(array, function)
• WeakMap

マップ(Map)

map = new Map([iterable])

map.set(key, value)

map.get(key)

ES6(ES2015) でサポートされたオブジェクトで、キーとバリューのリストを保持します。Chrome 38, Firefox 13, Internet Explorer 11, Opera 25, Safari 7.1 以降で使用できます。Map と Object は似ていますが、Map には、文字列や Symbol 以外の値もキーとして利用できる、リストの個数を size で簡単に得ることができる、for (... of ...) で簡単にループ処理できる、などの利点があります。

var map = new Map();
map.set("width", 160);
map.set("height", 120);
map.get("width");       // 160
map.get("height");      // 120

コンストラクタにはキーとバリューの二次元配列を指定できます。Internet Explorer と Safari ではサポートされていません。

var map = new Map([["width", 160], ["height", 120]]);

map.size

リストの個数を返します。

var map = new Map();
map.set("width", 160);
map.set("height", 120);
map.size;                        // => 2

map.keys()

map.values()

map.entries()

for ... of 文でキー・バリューのリストを扱うことができます。Internet Explorer と Opera ではサポートされていません。

for (var [key, value] of map) {
  console.log(key, ":", value);
}
for (var key of map.keys()) {
  console.log(key, ":", map.get(key));
}
for (var value of map.values()) {
  console.log(value);
}
for (var [key, value] of map.entries()) {
  console.log(key, ":", value);
}

map.forEach(function[, this])

forEach 文でキー・バリューのリストを扱うことができます。こちらは、Internet Explorer でもサポートされていますが、Opera でサポートされていません。

map.forEach(function(value) {
  console.log(value);
})
map.forEach(function(value, key) {
  console.log(key, ":", value);
})
map.forEach(function(value, key, map) {
  map.set(key, value * 2);
  console.log(key, ":", map.get(key));  // map自体を変更することが可能
});
map.forEach(function(value, key) {
  this.set(key, value * 2);
  console.log(key, ":", this.get(key));
}, map);   // mapをthisとして引き渡す

map.has(key)

key で指定したマップが存在すれば true を、存在しなければ false を返します。

var map = new Map();
map.set("width", 160);
map.has("width");               // => true

map.delete(key)

key で指定したマップを削除します。

var map = new Map();
map.set("width", 160);
map.delete("width");

map.clear()

clear() はマップの情報を消去します。Opera ではサポートされていません。

map.clear();   // mapの中身をすべて消去

Map.groupBy(array, function)

ES2024 で追加されました。array を、要素とインデックスを引数とする関数 function の結果をキーにグルーピングしたマップを返します。Object.groupBy() でも類似のことができますが、キーが文字列である必要があります。Map.groupBy() ではキーが数値やオブジェクトなど文字列以外の場合にもグルーピングすることができます。

const members = [
  { name: "Yamada", address: "Tokyo" },
  { name: "Suzuki", address: "Osaka" },
  { name: "Tanaka", address: "Nagoya" },
  { name: "Kaneda", address: "Tokyo" }
];
Map.groupBy(members, (member, index) => {
  return member.address;
});
// Map {
//   Tokyo  => [ { name: "Yamada", address: "Tokyo" }, { name: "Kaneda", address: "Tokyo" } ],
//   Osaka  => [ { name: "Suzuki", address: "Osaka" } ],
//   Nagoya => [ { name: "Tanaka", address: "Nagoya" } ]
// }

WeakMap

WeakMap は Map と似た機能ですが、(1) キーとして利用できるのはオブジェクトのみ、(2) キーは弱参照されガベージコレクションの変数保持の対象とならない、(3) 弱参照のため keys() 等によるキーの一覧を取得することはできない、などの特徴を持ちます。使用例は下記を参照してください。

// Personクラスを定義する
class Person {
    constructor(name) { this.name = name }
    getName() { return(this.name); }
}

// 趣味(favorites)強参照マップと、宗教(religions)弱参照マップを定義する
const favorites = new Map();
const religions = new WeakMap();

// 処理の中で趣味マップと、宗教マップを利用する
function doSomething() {
    // 山田さんオブジェクトを生成
    let p1 = new Person("Yamada", 26);
    console.log(p1.getName());

    // 山田さんの趣味は野球
    favorites.set(p1, "Baseball");
    console.log(favorites.get(p1));

    // 山田さんの宗教は仏教
    religions.set(p1, "Buddhism");
    console.log(religions.get(p1));
}
doSomething();

// 趣味マップは強参照のため、後からでも参照できるけど、ガベージコレクションされない
for (var key of favorites.keys()) {
    console.log(key.name + ":" + favorites.get(key));
}

// 宗教マップは弱参照のため、後から参照できないけど、ガベージコレクションされる
for (var key of religions.keys()) {       // TypeError
    console.log(key.name + ":" + religions.get(key));
}

---

---