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 オブジェクトにグループ化します。