javascript - 使用高阶函数代替两个循环

Question

我想使用高阶函数，例如 Map、Filter、Reduce。
我的问题是我有一个未组织的数组，因此我必须执行循环操作才能获得我想要的结果。数组有两个字段，一个是 _id 和 totalCount，它是一个数组，长度最小为 0 到 3。
每次迭代的 totalCount 由两个字段组成，一个是 orderstatus，另一个是 Total 我想执行正常的 if else 条件，如果 orderstatus 是“Merchant”或“driver”或“user”我想采取迭代总计并将其存储在我的数组中，例如 MerchantCount。

这是我的代码:

var arr = [{
   _id: "2017-12-08",
   totalcount: [{
     orderstatus: "MERCHANT",
     total: 1
   }]
 },
 {
   _id: "2017-12-02",
   totalcount: [{
     orderstatus: "USER",
     total: 2
   }]
 },
 {
   _id: "2017-12-06",
   totalcount: [{
     orderstatus: "DRIVER",
     total: 1
   }]
 },
 {
   _id: "2017-12-07",
   totalcount: [{
     orderstatus: "MERCHANT",
     total: 3
   }]
 },
 {
   _id: "2017-12-04",
   totalcount: [{
       orderstatus: "DRIVER",
       total: 1
     },
     {
       orderstatus: "MERCHANT",
       total: 2
     },
     {
       orderstatus: "USER",
       total: 1
     }
   ]
 }
]

循环正在执行:

for (let i = 0; i < recentUserCount.length; i++) {
  for (let j = 0; j < recentUserCount[i].totalcount.length; j++) {
    if (recentUserCount[i].totalcount[j].usertype == "DRIVER") {
      recentUserCount[i].DRIVERCount = recentUserCount[i].totalcount[j].total;
    } else if (recentUserCount[i].totalcount[j].usertype == "USER") {
      recentUserCount[i].USERCount = recentUserCount[i].totalcount[j].total;
    } else if (recentUserCount[i].totalcount[j].usertype == "MERCHANT") {
      recentUserCount[i].MERCHANTCount = recentUserCount[i].totalcount[j].total;
    }
  }
}

结果大致如下:

    0 : {_id: "2017-12-08", totalcount: Array(1), MERCHANTCount: 3, $$hashKey: "object:316"}
    1 : {_id: "2017-12-07", totalcount: Array(1), MERCHANTCount: 3, $$hashKey: "object:317"}
    2 : {_id: "2017-12-06", totalcount: Array(1), DRIVERCount: 1, $$hashKey: "object:318"}
    3 : {_id: "2017-12-04", totalcount: Array(3), DRIVERCount: 1, MERCHANTCount: 2, USERCount: 1, …}

我希望使用Map/Filter或Reduce方法执行相同的操作。

Answer 1

使用 ES6 语法和 map/reduce 非常简单， 完整功能片段:

var arr = [{_id:"2017-12-08",totalcount:[{orderstatus:"MERCHANT",total:1}]},{_id:"2017-12-02",totalcount:[{orderstatus:"USER",total:2}]},{_id:"2017-12-06",totalcount:[{orderstatus:"DRIVER",total:1}]},{_id:"2017-12-07",totalcount:[{orderstatus:"MERCHANT",total:3}]},{_id:"2017-12-04",totalcount:[{orderstatus:"DRIVER",total:1},{orderstatus:"MERCHANT",total:2},{orderstatus:"USER",total:1}]}];

  const result = arr
      .map(({_id, totalcount}) => ({
        totalcount,
        _id,
        ...totalcount.reduce((acc, {orderstatus, total}) => 
          ({...acc, [`${orderstatus}count`]: total}), {})
        }))

console.log(result)

https://jsbin.com/kiwalozuxa/edit?html,js,console,output

编辑:The spread operator (...) 用于传播对象的键/值(或数组的值)。 totcalcount.reduce 这里返回一个对象:

{
  x: "x",
  y: "y"
}

由于在 javascript 中拥有这种形式的对象在技术上是无效的:

{
  a: "a",
  b: "b",
  {
    x: "x",
    y: "y"
  }
}

我使用展开运算符将“子”对象合并到父对象中并生成:

{
  a: "a",
  b: "b",
  x: "x",
  y: "y"
}

我在 reducer 中使用了相同的技术。