首页 > web前端 > js教程 > #LearnedToday:Object.groupBy()

#LearnedToday:Object.groupBy()

PHPz
发布: 2024-08-26 21:39:08
原创
921 人浏览过

#LearnedToday: Object.groupBy()

?终于出来了!不再需要编写丑陋的代码来按字段的特定值对对象数组进行分组!

自 2023 年底以来,对象有一个名为 groupBy() 的官方静态方法,可以为我们做到这一点!
它接受一个 Iterable(例如数组)和一个函数,该函数针对每个元素执行,并且必须返回该特定元素的“类别”。
该方法返回一个新对象,其中每个键都是一个不同的类别,其中包含属于该特定类别的对象数组。

注意:返回的对象和原始可迭代对象中的元素是相同的(不是深拷贝!)。更改元素的内部结构将反映在原始可迭代对象和返回的对象中。

例子

让我们举一个实际的例子来看看按年龄对所有忍者神龟角色进行分组是多么容易

初始数组

const ninjaTurtlesCharacters = [
  { age: 16, name: 'Michelangelo' },
  { age: 16, name: 'Raffaello' },
  { age: 16, name: 'Donatello' },
  { age: 16, name: 'Leonardo' },
  { age: 91, name: 'Splinter' },
  { age: 25, name: 'Casey Jones' },
  { age: 25, name: 'April O\'Neil' }
];
登录后复制

好的老方法(使用reduce)

const ninjaTurtlesCharactersByAge = ninjaTurtlesCharacters.reduce(
  (groupedPeople, item) => ({
    ...groupedPeople,
    [item.age]: groupedPeople[item.age]
      ? [...groupedPeople[item.age], item]
      : [item],
  }),
  {}
);
登录后复制

现代方式

const ninjaTurtlesCharactersByAgeNew = Object.groupBy(
  ninjaTurtlesCharacters,
  ({ age }) => age
);
登录后复制

提示:如果您想返回 Map 而不是 Object,请使用 Map.groupBy()

结果

{
  "16": [
    { age: 16, name: 'Michelangelo' },
    { age: 16, name: 'Raffaello' },
    { age: 16, name: 'Donatello' },
    { age: 16, name: 'Leonardo' }
  ],
  "25": [
    { age: 25, name: 'Casey Jones' },
    { age: 25, name: 'April O\'Neil' }
  ],
  "91": [
    { age: 91, name: 'Splinter' }
  ]
}
登录后复制

演示

??‍?像往常一样,我创建了一个简单的 Stackblitz 项目来使用代码。

?文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy

ℹ 浏览器支持:https://caniuse.com/mdn-javascript_builtins_object_groupby

以上是#LearnedToday:Object.groupBy()的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板