JavaScript中新数组分组方法详解

以前的做法

假设你有一个代表人的对象数组，你想按年龄对它们进行分组。你可以这样使用forEach循环：

const people = [
{ name: \”Alice\”, age: 28 },
{ name: \”Bob\”, age: 30 },
{ name: \”Eve\”, age: 28 },
];

const peopleByAge = {};

people.forEach((person) => {
const age = person.age;
if (!peopleByAge[age]) {
peopleByAge[age] = [];
}
peopleByAge[age].push(person);
});
console.log(peopleByAge);
/*
{
\”28\”: [{\”name\”:\”Alice\”,\”age\”:28}, {\”name\”:\”Eve\”,\”age\”:28}],
\”30\”: [{\”name\”:\”Bob\”,\”age\”:30}]
}
*/

或者可以像这样来使用reduce：

const peopleByAge = people.reduce((acc, person) => {
const age = person.age;
if (!acc[age]) {
acc[age] = [];
}
acc[age].push(person);
return acc;
}, {});

无论哪种方法，代码都略显笨拙。你总是要检查对象是否存在分组键，如果不存在，就用一个空数组来创建它。然后再将项目推入数组。

使用Object.groupBy

有了新的Object.groupBy方法，你就可以像这样得出结果：

const peopleByAge = Object.groupBy(people, (person) => person.age);

简单多了！不过也有一些需要注意的地方。

Object.groupBy返回一个空原型对象。这意味着该对象不继承Object.prototype的任何属性。这很好，因为这意味着你不会意外覆盖Object.prototype上的任何属性，但这也意味着该对象没有你可能期望的任何方法，如hasOwnProperty或toString。

const peopleByAge = Object.groupBy(people, (person) => person.age);
console.log(peopleByAge.hasOwnProperty(\”28\”));
// TypeError: peopleByAge.hasOwnProperty is not a function

传递给Object.groupBy的回调函数应返回字符串或Symbol。如果返回其他内容，则将强制转为字符串。

在我们的示例中，我们一直以数字形式返回age，但在结果中却被强制转为字符串。尽管如此，你仍然可以使用数字访问属性，因为使用方括号符号也会将参数强制为字符串。

console.log(peopleByAge[28]);
// => [{\”name\”:\”Alice\”,\”age\”:28}, {\”name\”:\”Eve\”,\”age\”:28}]
console.log(peopleByAge[\”28\”]);
// => [{\”name\”:\”Alice\”,\”age\”:28}, {\”name\”:\”Eve\”,\”age\”:28}]

使用Map.groupBy

除了返回Map之外，Map.groupBy的功能与Object.groupBy几乎相同。这意味着你可以使用所有常用的Map函数。这也意味着你可以从回调函数返回任何类型的值。

const ceo = { name: \”Jamie\”, age: 40, reportsTo: null };
const manager = { name: \”Alice\”, age: 28, reportsTo: ceo };

const people = [
ceo,
manager,
{ name: \”Bob\”, age: 30, reportsTo: manager },
{ name: \”Eve\”, age: 28, reportsTo: ceo },
];

const peopleByManager = Map.groupBy(people, (person) => person.reportsTo);

在本例中，我们是按照向谁汇报工作来对人员进行分组的。请注意，要从该 Map 中按对象检索项目，对象必须具有相同的引用。

peopleByManager.get(ceo);
// => [{ name: \”Alice\”, age: 28, reportsTo: ceo }, { name: \”Eve\”, age: 28, reportsTo: ceo }]
peopleByManager.get({ name: \”Jamie\”, age: 40, reportsTo: null });
// => undefined

在上面的示例中，第二行使用了一个看起来像ceo对象的对象，但它并不是同一个对象，因此它不会从Map中返回任何内容。要想成功地从Map中获取项目，请确保你保留了要用作键的对象的引用。

何时可用

这两个groupBy方法是 TC39 提议的一部分，目前处于第三阶段。这意味着它很有可能成为一项标准，因此也出现了一些实施方案。

Chrome 浏览器 117 版本刚刚推出了对这两种方法的支持，而 Firefox 浏览器 119 版本也发布了对这两种方法的支持。Safari 以不同的名称实现了这些方法，我相信他们很快就会更新。既然 Chrome 浏览器中出现了这些方法，就意味着它们已在 V8 中实现，因此下次 V8 更新时，Node 中也会出现这些方法。

为什么使用静态方法

你可能会问，为什么要以Object.groupBy而不是Array.prototype.groupBy的形式来实现呢？根据该提案，有一个库曾经用一个不兼容的groupBy方法对Array.prototype进行了猴子补丁。在考虑新的应用程序接口时，向后兼容性非常重要。几年前，在尝试实现Array.prototype.flatten时，这一点在一次被称为SmooshGate的事件中得到了强调。

幸运的是，使用静态方法似乎更有利于未来的可扩展性。当 Record 和 Tuples 提议实现时，我们可以添加一个Record.groupBy 方法，用于将数组分组为不可变的记录。