Map.groupBy()
注意： 在某些浏览器的一些版本中，此方法被实现为 Array.prototype.groupToMap() 方法。由于 Web 兼容性问题，它现在被实现为一个静态方法。有关详细信息，请查看 浏览器兼容性表格。
Map.groupBy() 静态方法使用提供的回调函数返回的值来对给定可迭代对象的元素进行分组。最终返回的 Map 使用测试函数返回的唯一值作为键，这些键可用于获取每个组中的元素数组。
该方法主要用于对与对象关联的元素进行分组，特别是在该对象可能随时间变化的情况下。如果该对象是不可变的，你可能更倾向于使用字符串来表示它，并使用 Object.groupBy() 来对元素进行分组。
试一试
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 9 },
{ name: "bananas", type: "fruit", quantity: 5 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 12 },
{ name: "fish", type: "meat", quantity: 22 },
];
const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy(inventory, ({ quantity }) =>
quantity < 6 ? restock : sufficient,
);
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]
语法
Map.groupBy(items, callbackFn)
参数
返回值
一个 Map 对象，其中包含每个组的键，每个键都分配给一个包含该组相关元素的数组。
描述
Map.groupBy() 对可迭代对象中的每个元素调用一次提供的 callbackFn 函数。回调函数应返回一个值，指示相关元素的组。callbackFn 返回的值用作 Map.groupBy() 返回的 Map 的键。每个键都有一个关联的数组，其中包含回调函数返回相同值的所有元素。
返回的 Map 中的元素与原始可迭代对象中的元素相同（不是深拷贝）。更改元素的内部结构将在原始可迭代对象和返回的 Map 中都得到反映。
当你需要对可能随时间变化而变化的特定对象相关的信息进行分组时，此方法非常有用。这是因为即使对象被修改，它仍将继续作为返回的 Map 的键。如果你改为创建对象的字符串表示形式并在 Object.groupBy() 中将其用作分组键，那么你必须在原始对象及其表示形式之间维护映射关系，以便在对象发生变化时也能正确映射。
注意： 要访问返回的 Map 中的组，你必须使用最初用作 Map 中键的同一个对象（尽管你可以修改其属性）。你不能使用另一个碰巧具有相同名称和属性的对象。
Map.groupBy 不会读取 this 的值。它可以用于任何对象，并返回一个新的 Map 实例。
示例
使用 Map.groupBy()
首先，我们定义一个包含表示不同食品库存的对象的数组。每种食品都有一个 type 和一个 quantity。
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 9 },
{ name: "bananas", type: "fruit", quantity: 5 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 12 },
{ name: "fish", type: "meat", quantity: 22 },
];
下面的代码使用 Map.groupBy()，并提供一个箭头函数，该函数根据元素 quantity < 6 是否成立，返回 restock 或 sufficient 键。返回的 result 对象是一个 Map，因此我们需要使用键调用 get() 来获取数组。
const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy(inventory, ({ quantity }) =>
quantity < 6 ? restock : sufficient,
);
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]
请注意，函数参数 { quantity } 是 对象解构语法用于函数参数 的一个基本示例。它会解构作为参数传递的对象中的 quantity 属性，并将其赋值给函数体中名为 quantity 的变量。这是一种访问函数内元素相关值的非常简洁的方式。
Map 的键可以被修改并仍然使用。但是，你不能重新创建键然后仍能使用它。因此，任何需要使用该映射的东西都必须保留对其键的引用，这一点非常重要。
// The key can be modified and still used
restock["fast"] = true;
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]
// A new key can't be used, even if it has the same structure!
const restock2 = { restock: true };
console.log(result.get(restock2)); // undefined
规范
| 规范 |
|---|
| ECMAScript® 2026 语言规范 # sec-map.groupby |
浏览器兼容性
加载中…