JavaScriptのMapメソッド

new 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() 方法は Map から一つの要素を削除します：

实例

fruits.delete("apples");

自分で試してみてください

Map.clear()

clear() 方法は Map からすべての要素を削除します：

实例

fruits.clear();

自分で試してみてください

Map.has()

Map にキーが存在する場合：has() 方法は true を返します：

实例

fruits.has("apples");

自分で試してみてください

以下のコードを試してみてください：

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);

自分で試してみてください

ブラウザのサポート

Map.groupBy() これは ES2024 の機能です。

2024 年 3 月から、新しいブラウザはこの機能をサポートしています：

Object.groupBy() と Map.groupBy() の違い

Object.groupBy() と Map.groupBy() の違いは：

Object.groupBy() 要素を JavaScript オブジェクトにグループ化します。

Map.groupBy() 要素を Map オブジェクトにグループ化します。

完全な Map リファレンス マニュアル

完全なリファレンスが必要な場合は、以下を訪れてください：JavaScript Map リファレンス マニュアル。

このマニュアルには、すべての Map プロパティとメソッドの説明とインスタンスが含まれています。