Javascript 中的 reduce.method 中的索引参数如何工作

Question

我试图理解 reduce 方法，但我被某些东西卡住了。如果我写：

const myArr = [1, 2, 3, 4, 7, 5];


const sum = myArr.reduce((acc,el)=>{
return acc+el

});


console.log(`The sum is ${sum}`);

我得到了 22 的正确输出，这是我的总和。

但是如果我这样写：

const items = [{
name: "Bike",
price: 100
},
{
name: "TV",
price: 200
},
{
name: "Album",
price: 10
},
{
name: "Book",
price: 5
},
{
name: "Phone",
price: 500
},
{
name: "Computer",
price: 1000
}
]


const total = items.reduce((acc, el) => {
  return acc + el.price
});


console.log(total);

除非我将索引初始化为 0，否则我不会得到总数。我不明白为什么在第一种情况下它有效，但在第二种情况下却无效。感谢您的帮助！！

Answer 1

.reduce 函数似乎最初为“acc”分配正在循环的第一个元素的类型，然后它才知道您将用它做什么（可能是数学或字符串操作）。你正在尝试做数学。

在第一种情况下，类型是一个数字，所以一切都很好，但在第二种情况下，它是一个对象。因此，在第二种情况下，您要将数字 (el.price) 添加到对象 ({name: "Bike", price: 100})，从而将其转换为字符串。从现在开始，您只需连接字符串，而不是进行数学计算。

通过将 acc 设置为 0，您可以重新为其分配一种数字类型，这样它就可以工作了。

所以我认为最好总是在 reduce 函数中分配 acc 以避免这些类型的错误。

Answer 2

reducer 函数（在本例中为 const reducer =...）的 return 被分配给累加器，并且它在每次迭代中都被“记住”，所以如果您尝试这种方式：

const reducer = (accumulator, currentValue) => ({ 
  price: accumulator.price + currentValue.price 
});

items.reduce(reducer);

// console.log outputs { price: 1815 }

因为你正在处理对象，所以你需要 return 一个对象，因为如果你 return 只是 (acc, cur) => acc.price + cur.price 你会得到一个 NaN 错误，因为数字与对象不兼容（而reducer函数的return赋值给了累加器）。

检查这些控制台日志，我相信它们将有助于了解减速器发生了什么：

注意reducer第一次运行累加器是数组的索引0。

如果您有任何其他问题，请在下面的评论中告诉我。

Javascript 中的 reduce.method 中的索引参数如何工作

how does the index argument work in the reduce.method in Javascript

indexing

reduce