Map.groupBy()

items

一个将进行元素分组的可迭代对象（例如 Array）。

callbackFn

对可迭代对象中的每个元素执行的函数。它应该返回一个值（对象或原始类型）来表示当前元素的分组。该函数被调用时将传入以下参数：

element

数组中当前正在处理的元素。

index

正在处理的元素在数组中的索引。

一个包含了每一个组的键的 Map 对象，每个键都分配了一个包含关联组元素的数组。

Map.groupBy() 为可迭代对象中的每个元素调用一次提供的 callbackFn 函数。该回调函数应返回一个值，用以表示相关元素的分组。callbackFn 返回的值会被用作 Map.groupBy() 返回的 Map 的键。每个键都有一个相关联的数组，其中包含回调函数返回相同值的所有元素。

返回的 Map 中的元素和原始可迭代对象中的元素相同（不是深拷贝）。更改元素的内部结构将反映在原始可迭代对象和返回的 Map 中。

当你需要分组与特定对象相关的信息时，此方法非常有用。因为即使对象被修改，它仍将作为返回的 Map 的键继续工作。如果你改为为对象创建字符串表示形式，并在 Object.groupBy() 中将其用作分组键，则必须在对象改变时维护原始对象和其表示之间的映射。

Map.groupBy 不会读取 this 值。它可以在任何对象上调用，并返回一个新的 Map 实例。

首先，我们定义一个包含代表各种食品库存的对象的数组。每种食品都有一个 type 和一个 quantity 属性。

const inventory = [
  { name: "芦笋", type: "蔬菜", quantity: 9 },
  { name: "香蕉", type: "水果", quantity: 5 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "樱桃", type: "水果", quantity: 12 },
  { name: "鱼", type: "肉", quantity: 22 },
];

下面的代码使用箭头函数（函数返回名为 restock 或 sufficient 的对象键，具体取决于元素是否满足 quantity < 6）来调用 Map.groupBy()。返回的 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: "香蕉", type: "水果", quantity: 5 }]

请注意，函数参数 { quantity } 是函数参数的对象解构语法的一个基本示例。这会解构作为参数传递的对象的 quantity 属性，并将其赋值给函数体中名为 quantity 的变量。这是一种非常简洁的访问函数中相关元素的值的方式。

Map 的键在修改后仍可以使用。但是，你不能重新创建键并仍然使用它。因此，任何需要使用映射的内容都保留对其键的引用是非常重要的。

// 键被修改后仍可以使用
restock["fast"] = true;
console.log(result.get(restock));
// [{ name: "香蕉", type: "水果", quantity: 5 }]

// 不能使用新的键，即使它具有相同的结构！
const restock2 = { restock: true };
console.log(result.get(restock2)); // undefined

• core-js 中 Map.groupBy 的 polyfill
• 索引集合类
• Array.prototype.reduce()
• Map()
• Object.groupBy()