使用reduce将设备和SIM卡商品数组分组为指定结构对象出现undefined错误如何解决

错误原因 #

reduce的回调函数需要每次返回累加的结果对象才能进入下一轮迭代，你的代码中Array.push()的返回值是新的数组长度，并不是result对象：第一次迭代执行push后回调返回数字，第二次迭代时result参数就变成了数字，访问result.devices自然会抛出undefined错误。

修正代码 #

const sourceArray = [{id: 1, name: 'Name', type: 'device'}, {id: 2, name: 'Name2', type: 'simcard'}, {id: 3, name: 'Name3', type: 'device'}, {id: 4, name: 'Name4', type: 'device'}]

const resultObj = sourceArray.reduce((result, orderItem) => {
  orderItem.type === 'device' ?
    result.devices.push(orderItem) :
    result.simCards.push(orderItem)
  // 每次迭代返回累加对象，供下一轮迭代使用
  return result
}, {
  devices: [],
  simCards: []
})

如果要保持箭头函数简写形式，也可以用逗号运算符实现逻辑执行后返回result：

const resultObj = sourceArray.reduce((result, orderItem) => (
  orderItem.type === 'device' ? result.devices.push(orderItem) : result.simCards.push(orderItem),
  result
), {devices: [], simCards: []})

以上代码运行后得到的resultObj完全符合你预期的输出结构。

内容的提问来源于stack exchange，提问作者ylsv