问题描述
我试图了解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,否则我不会得到总数。我不明白为什么在第一种情况下它起作用,但在第二种情况下却不起作用。 谢谢您的帮助!
解决方法
.reduce函数似乎在开始知道要执行的操作(可能是数学或字符串操作)之前,先将正在循环的第一个元素的类型分配给“ acc”。您正在尝试数学。
在第一种情况下,类型是数字,所以一切都很好,但是在第二种情况下,它是一个对象。因此,在第二种情况下,您正在向对象({名称:“自行车”,价格:100})添加数字(el.price),从而将其转换为字符串。从这里开始,您将只是连接字符串,而不是做数学。
通过将acc设置为0,您可以为其重新分配数字类型,因此它可以正常工作。
因此,我认为最好始终在reduce函数中分配acc以避免此类错误。
,将reducer函数的返回值(在本例中为const reducer = ...)分配给累加器,并且在每次迭代中都会“记住”它,因此,如果您尝试这种方式:
const reducer = (accumulator,currentValue) => ({
price: accumulator.price + currentValue.price
});
items.reduce(reducer);
// console.log outputs { price: 1815 }
因为要处理对象,所以需要返回一个对象,因为如果仅返回(acc,cur) => acc.price + cur.price
,则会收到NaN错误,因为数字与对象不兼容(并将reducer函数的返回赋给了累加器)。
检查这些控制台日志,我相信它们将帮助您了解reducer的状况:
请注意,reducer第一次运行累加器是数组的索引0。
如果您在下面的评论中还有其他问题,请告诉我。