JavaScript 的新数组分组方法.docx

第

JavaScript的新数组分组方法

对数组中的项目进行分组，你可能已经做过很多次了。每次都会手动编写一个分组函数，或者使用lodash的groupBy函数。

好消息是，JavaScript现在有了分组方法，所以你再也不必这样做了。Object.groupBy和Map.groupBy这两个新方法将使分组变得更简单，并节省我们的时间或依赖性。

以前的做法

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

constpeople=[

{name:Alice,age:28},

{name:Bob,age:30},

{name:Eve,age:28},

constpeopleByAge={};

people.forEach((person)={

constage=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：

constpeopleByAge=people.reduce((acc,person)={

constage=person.age;

if(!acc[age]){

acc[age]=[];

acc[age].push(person);

returnacc;

},{});

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

使用Object.groupBy

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

constpeopleByAge=Object.groupBy(people,(person)=person.age);

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

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

constpeopleByAge=Object.groupBy(people,(person)=person.age);

console.log(peopleByAge.hasOwnProperty(28));

//TypeError:peopleByAge.hasOwnPropertyisnotafunction

传递给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函数。这也意味着你可以从回调函数返回任何类型的值。

constceo={name:Jamie,age:40,reportsTo:null};

constmanager={name:Alice,age:28,reportsTo:ceo};

constpeople=[

ceo,

manager,

{name:Bob,age:30,repor