groupBy和sortBy本機ES6中的對象數組

Question

我們有一個對象數組，我們需要按組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;
    }, {});
  }

但是我們獲得了一個難以理解的對象。 因此我們需要將其轉換為數組數組，但我們很難做到這一點，然后對時間戳值應用排序。

Answer 1

您可以使用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); 

Answer 2

這是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)