JavaScript 速習チュートリアル

JavaScript マップのメソッド

1. new Map() メソッド

new Map() コンストラクタに配列(Array)を渡すことで、Map を作成できます。

// Map を作成する
const fruits = new Map([
  ["リンゴ", 500],
  ["バナナ", 300],
  ["オレンジ", 200]
]);

2. Map.get()

get() メソッドを使用すると、Map 内のキーに対応する値を取得できます。

fruits.get("リンゴ"); // 500 を返します

3. Map.set()

set() メソッドを使用して、Map に要素を追加できます。

// 空の Map を作成
const fruits = new Map();

// Map に値をセット
fruits.set("リンゴ", 500);
fruits.set("バナナ", 300);
fruits.set("オレンジ", 200);

また、set() メソッドは既存の Map の値を変更(更新)するためにも使用されます。

fruits.set("リンゴ", 500);

4. Map.size

size プロパティは、Map に含まれる要素の数を返します。

fruits.size; // 要素数を取得

5. Map.delete()

delete() メソッドは、Map の要素を削除します。

fruits.delete("リンゴ"); // "リンゴ" のエントリを削除

6. Map.clear()

clear() メソッドは、Map からすべての要素を削除します。

fruits.clear(); // Map を空にする

7. Map.has()

has() メソッドは、指定したキーが Map 内に存在する場合に true を返します。

fruits.has("リンゴ");

試してみましょう:

fruits.delete("リンゴ");
fruits.has("リンゴ"); // false を返します

8. Map.forEach()

forEach() メソッドは、Map 内の各キー・値ペアに対してコールバック関数を実行します。

// すべてのエントリをリスト化
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

9. Map.entries()

entries() メソッドは、Map 内の [key, value] を含むイテレータ(Iterator)オブジェクトを返します。

// すべてのエントリを列挙
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

10. Map.keys()

keys() メソッドは、Map 内のキーのみを含むイテレータオブジェクトを返します。

// すべてのキーを列挙
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

11. Map.values()

values() メソッドは、Map 内の値のみを含むイテレータオブジェクトを返します。

// すべての値を列挙
let text = "";
for (const x of fruits.values()) {
  text += x;
}

values() メソッドを使用して、Map 内の数値の合計を算出することも可能です。

// すべての値を合計
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

12. オブジェクトをキーにする (Objects as Keys)

オブジェクトをキーとして使用できる点は、Map の非常に重要な機能です。

// オブジェクトを作成
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// Map を作成
const fruits = new Map();

// 新しい要素を Map に追加
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

注意: キーはオブジェクトそのもの(apples)であり、文字列("apples")ではありません。

fruits.get("apples"); // undefined を返します(文字列キーは存在しないため)

13. JavaScript Map.groupBy()

ES2024 では、JavaScript に Map.groupBy() メソッドが追加されました。

Map.groupBy() メソッドは、コールバック関数から返された文字列に基づいて、オブジェクトの要素をグループ化します。このメソッドは元のオブジェクトを変更しません。

// 配列を作成
const fruits = [
  {name: "リンゴ", quantity: 300},
  {name: "バナナ", quantity: 500},
  {name: "オレンジ", quantity: 200},
  {name: "キウイ", quantity: 150}
];

// 要素をグループ化するためのコールバック関数
function myCallback({ quantity }) {
  return quantity > 200 ? "在庫あり(ok)" : "在庫少(low)";
}

// 数量(quantity)でグループ化
const result = Map.groupBy(fruits, myCallback);

14. Object.groupBy() vs Map.groupBy()

Object.groupBy()Map.groupBy() の主な違いは戻り値の型にあります。

  • Object.groupBy() は、要素を標準の JavaScript オブジェクトにグループ化します。
  • Map.groupBy() は、要素を Map オブジェクトにグループ化します。