Angular使用reduce方法返回对象而非预期数组的问题排查

问题核心原因 #

• 回调返回值类型和初始值不匹配：你给reduce的初始值是string[]类型的空数组，但是回调函数里返回的是对象结构，第一次执行后累加器acc就被替换成了对象，后续迭代都是在对象上覆盖item属性，最终只能拿到最后一次迭代的id值包裹的对象。
• 累加逻辑错误：你要的是把id收集到数组中，不需要构造带item属性的对象，直接操作数组即可。

修复后的代码 #

如果坚持用reduce可以这么写：

const selectedId = selectedItems.reduce<string[]>(
  (acc, curr) => {
    acc.push(curr.id)
    return acc
  },
  []
)

当前场景只是提取所有元素的id属性，用map方法更简洁合适：

const selectedId = selectedItems.map(item => item.id)

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