繁体   English   中英

groupBy和sortBy本机ES6中的对象数组

groupBy and sortBy an array of object in native ES6

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我们有一个对象数组,我们需要按组ID对这些对象进行分组。

然后我们需要通过时间戳获取一个带有已排序组的数组。

这是最初的集合:

const arr = [
  {id: 'id1', group: '123', timestamp: 222},
  {id: 'id2', group: '123', timestamp: 999 },
  {id: 'id3', group: '456', timestamp: 333 },
  {id: 'id4', group: '789', timestamp: 111 },
  {id: 'id5', group: '554', timestamp: 555 },
];

我们试图获得的结果是:

result = [
  [
    {id: 'id4', group: '789', timestamp: 111 }, 
  ],
  [
    {id: 'id1', group: '123', timestamp: 222},
    {id: 'id2', group: '123', timestamp: 999 },
  ],
  [
    {id: 'id3', group: '456', timestamp: 333 },
  ],
  [
    {id: 'id5', group: '554', timestamp: 555 },
  ]
]

我们使用Underscore.js实现了这一点,但我们正在寻找使用原生javascript的解决方案,并且我们努力从简化对象传递到数组数组。

var groups = _(arr).chain()
    .groupBy("group")
    .sortBy((data) => _.first(data).timestamp)
    .value();

https://jsfiddle.net/tdsow1ph/

我们尝试首先使用这样的方法对项目进行分组:

const groupBy = (arr, propertyToGroupBy) => {
    return arr.reduce((groups, item) => {
      const val = item[propertyToGroupBy];

      groups[val] = groups[val] || [];
      groups[val].push(item);

      return groups;
    }, {});
  }

但是我们获得了一个难以理解的对象。 因此我们需要将其转换为数组数组,但我们很难做到这一点,然后对时间戳值应用排序。

2 个回复

您可以使用reduce()将组作为键将数组分组到对象中。 使用Object.values()将对象转换为数组。

 const arr = [{"id":"id1","group":"123","timestamp":222},{"id":"id2","group":"123","timestamp":999},{"id":"id3","group":"456","timestamp":333},{"id":"id4","group":"789","timestamp":111},{"id":"id5","group":"554","timestamp":555}]; var result = Object.values(arr.reduce((c, v) => { c[v.group] = c[v.group] || []; c[v.group].push(v); return c; }, {})); console.log(result); 

使用sort()

 const arr = [{"id":"id4","group":"789","timestamp":111},{"id":"id1","group":"123","timestamp":222},{"id":"id3","group":"456","timestamp":333},{"id":"id5","group":"554","timestamp":555},{"id":"id2","group":"123","timestamp":999}] var result = Object.values( arr .sort((a, b) => a.timestamp - b.timestamp) .reduce((c, v) => { c[v.group] = c[v.group] || []; c[v.group].push(v); return c; }, {}) ); console.log(result); 

这是ES6中使用Map对象reduce的另一个单行实现:

 const arr = [ {id: 'id1', group: '123', timestamp: 222}, {id: 'id2', group: '123', timestamp: 999 }, {id: 'id3', group: '456', timestamp: 333 }, {id: 'id4', group: '789', timestamp: 111 }, {id: 'id5', group: '554', timestamp: 555 }, ]; const result = [...arr.reduce((r,c) => (r.set(c.group, r.has(c.group) ? [...r.get(c.group), c] : [c]), r), new Map()).values()] console.log(result) 

对于排序只是通过初始sort减少的前缀:

 const arr = [ {id: 'id1', group: '123', timestamp: 222}, {id: 'id2', group: '123', timestamp: 999 }, {id: 'id3', group: '456', timestamp: 333 }, {id: 'id4', group: '789', timestamp: 111 }, {id: 'id5', group: '554', timestamp: 555 }, ]; const result = [...arr.sort((a,b) => a.timestamp - b.timestamp) .reduce((r,c) => (r.set(c.group, r.has(c.group) ? [...r.get(c.group), c] : [c]), r), new Map()).values()] console.log(result) 

2 ES6中对象数组的设置器

我有一个包含一个数组的类,该数组用于包含某种类型的对象。 我不需要对数组中的值进行任何特殊处理,因此我没有编写set方法。 但是现在我收到一条错误消息,说我无法写入仅具有getter方法的属性。 所以我试图像这样重建默认的setter方法: 但以上工作均无效。 我只是希望能 ...

3 在es6中访问对象数组的键

我是es6的新手,并且我有一个对象数组,如下所示: 使用for循环,我想创建一个字符串,例如:myurl = localhost:3000 / symbol = rwerwe&side = Buy&status = Hey 为此,我必须访问每个对象的键并将concat用于字符串组成 ...

5 ES6数组中按对象属性求和

我试图按日期求和单位值,并创建一个没有重复日期的新数组。 例如,我要计算2015-12-04 00:01:00的总数。 在以下数据中,该日期发生了2次,其值为5和6 ,它将是: 我试过了arr = results.map(x => x.unit).reduce((a,c) =& ...

6 减少 ES6 函数中的对象数组

我对我正在处理的 reduce 函数有点困惑。 我打算减少一个对象数组,如果我声明一个变量并将其设置为等于一个减少迭代,它就可以正常工作: movies = [ { title: 'The Shawshank Redemption', rate: '9.3' }, { title: ...

8 通过es6在数组中查找不同的对象

我有一个像下面这样的数组 我想按es6按group和age查找不同的数据 预期结果 我尝试使用[... new Set(data.map(x => {x.group, g.age}))]但没有机会 我知道如何遍历数据并找到唯一值,但我想使用es6函数 ...

9 在ES6中平展对象数组

给定这样的对象的javascript数组: 如何使用ES6创建这样的对象? 我已经看到了很多带有reduce , map , filter , set , [...arr]的示例,但是我一直在努力地将它们简洁地结合在一起。 ...

10 ES6中的简单解构数组/对象

我试图返回具有选定键-reqProps的新对象。 我设法通过修复props prop1, prop3做到了,现在我希望能够传递reqProps数组值来替换prop1,prop3。 我尝试了函数,字符串文字和一些“ hacks”。 他们都没有工作 目前, obj的结果是 我不 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM