JavaScript Mapメソッド
目次
new Map()メソッド
new Map()コンストラクタに配列を渡すことでMapを作成できます:
// Mapを作成する
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Map.get()
get()メソッドを使用して、Map内の特定のキーの値を取得できます:
fruits.get("apples");
Map.set()
set()メソッドを使用して、Mapに要素を追加できます:
// Mapを作成する
const fruits = new Map();
// Mapの値を設定する
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
set()メソッドは既存のMapの値を変更するのにも使用できます:
fruits.set("apples", 500);
Map.size
sizeプロパティはMap内の要素数を返します:
fruits.size;
Map.delete()
delete()メソッドは指定されたキーの要素を削除します:
fruits.delete("apples");
Map.clear()
clear()メソッドはMapからすべての要素を削除します:
fruits.clear();
Map.has()
has()メソッドは指定されたキーがMap内に存在する場合にtrueを返します:
fruits.has("apples");
Try This:
fruits.delete("apples");
fruits.has("apples");
Map.forEach()
forEach()メソッドはMap内の各キー/値ペアに対してコールバックを呼び出します:
// すべてのエントリをリストアップする
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
Map.entries()
entries()メソッドはMap内の[key, value]ペアを持つイテレータオブジェクトを返します:
// すべてのエントリをリストアップする
let text = "";
for (const x of fruits.entries()) {
text += x;
}
Map.keys()
keys()メソッドはMap内のキーを持つイテレータオブジェクトを返します:
// すべてのキーをリストアップする
let text = "";
for (const x of fruits.keys()) {
text += x;
}
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;
}
キーとしてのオブジェクト
オブジェクトをキーとして使用できることは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を返す
JavaScript Map.groupBy()
ES2024ではJavaScriptにMap.groupBy()メソッドが追加されました。
Map.groupBy()メソッドは、コールバック関数から返される文字列値に従ってオブジェクトの要素をグループ化します。
Map.groupBy()メソッドは、元のオブジェクトを変更しません。
// 配列を作成する
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// 要素をグループ化するためのコールバック関数
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// 数量でグループ化
const result = Map.groupBy(fruits, myCallback);
注意
ES2024の機能は比較的新しいものです。
古いブラウザでは代替コード(Polyfill)が必要な場合があります。
Object.groupBy() vs Map.groupBy()
Object.groupBy()とMap.groupBy()の違い:
- Object.groupBy()はJavaScriptオブジェクトに要素をグループ化します。
- Map.groupBy()はMapオブジェクトに要素をグループ化します。