.reduce 返回 concat 而不是总和答案

【问题标题】：.reduce returning concat instead of total sum.reduce 返回 concat 而不是总和
【发布时间】：2020-07-19 02:07:04
【问题描述】：

有人可以向我解释一下这些例子之间的区别吗？

这是原始代码。

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 },
    { name: "Keyboard", price: 25 },
];

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

console.log("total", total);

以上返回 total [object Object]200105500100025

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

这段代码返回total 1840，这是我一直在寻找的，但为什么会有 ,0);最后改变这个结果？它是否将价格值更改为“数字”而不是像上面那样的“对象”或“字符串”？

我注意到 YouTube 上的一些教程说因为它是一个箭头函数，所以我不需要输入“return”并使代码看起来像：

const total = items.reduce((total, amount) => {total + amount.price}, 0);

但这会给我返回total undefined的结果有return 和没有有什么区别？

【问题讨论】：

阅读arrow functions 和reduce() 的文档应该可以帮助您解决这两个问题

标签： javascript string numbers concatenation reduce

【解决方案1】：

[object Object] 的问题是，正如您自己注意到的那样，缺少 , 0。

这是因为您可以通过两种方式使用.reduce：使用起始值和不使用起始值。如果没有起始值，对回调的第一次调用将前两个元素作为参数，因此第一个元素用作起始值并跳过第一次调用。这在某些情况下是有意义的，例如当您执行 [1, 2, 3].reduce((a, b) => a + b) 其中 1 + 2 是有效的第一个操作时，但在您实际访问每个元素的 property 的情况下它没有意义.

在您的情况下，这意味着第一个呼叫将有 { name: "Bike", price: 100 } 作为 total 和 { name: "TV", price: 200 } 作为 amount。然后您正在执行{ name: "Bike", price: 100 } + 200，这将被解释为字符串连接并将第一个对象转换为[object Object]，从而产生[object Object]200。从那时起，剩余的价格也被连接起来（因为中间值现在是一个字符串），最后得到[object Object]200105500100025。

使用, 0，您可以指定0 作为起始值。在这种情况下，对回调函数的第一次调用将有 0 作为total 和{ name: "Bike", price: 100 } 作为amount，这更有意义。然后你做0 + 100，正确地得到数字100，等等。
undefined 的问题在于，当您编写 (total, amount) => { total + amount.price } 而不是 (total, amount) => total + amount.price 时，您没有返回任何内容。

(args) => xyz 是(args) => { return xyz } 的简写。添加{ } 后，您将不再使用速记，因此您必须手动处理returning。只写{ xyz } 将评估xyz 但不会返回任何内容，正如您在此处看到的那样。如果您认为主要用例是一个在大括号内包含多个语句的块，可能跨越多行，并且 return 语句可以在该块内您想要的任何位置，这更有意义。

【讨论】：

哇..我通常不理解人们的答案，所以我必须一遍又一遍地阅读才能理解，但是您通过用外行术语解释它变得如此简单。谢谢！

【解决方案2】：

当您不包含初始值作为 .reduce() 的第二个参数时，reduce 回调的累加器（即：number）从数组中的 first 值开始，并且元素（即：amount）从数组中的第二个元素开始。

在您的情况下，这意味着 number 最初是：

{ name: "Bike", price: 100 }

然后使用amount.price 添加。当您添加一个带有数字的对象时，会调用该对象的 .toString() 方法，从而生成 [object Object]。这意味着您的累加器现在是一个 string，因此任何进一步的添加实际上都是与字符串的串联操作。但是，当您包含初始值时，累加器 (number) 以 0 开始，元素 (amount) 以第一个对象开始。这意味着当您执行total + amount.price 时，您将添加一个带有数字的数字，从而得到正确的值。

我注意到 YouTube 上的一些教程这么说是因为它是箭头函数我不需要输入'return'

使用箭头函数时，您不必包含函数体（即：{}）。当不包含正文时，返回是隐式的（即：不需要），它会自动返回=>右侧的表达式。但是，当您有一个主体时，您需要包含显式返回，因为主体可以在其中包含许多语句。当您不从函数体返回时，您的函数将不返回任何内容，这就是您得到undefined 的原因。它在没有身体的情况下工作的一个例子是使用：

const total = items.reduce((total, amount) => total + amount.price, 0);

【讨论】：