.reduce 返回 concat 而不是总和

Question

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

这里是原代码。

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);

以上 returns total [object Object]200105500100025 <- 这个 [object Object] 是什么以及为什么结果是 200105500100025 而不是 1840？

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

这段代码 returns total 1840 这是我一直在寻找的，但为什么有 ,0);最后改变这个结果？它是否将价格值更改为 'numbers' 而不是像上面那样的 'object' 或 'string'？

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

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

但这 returns 我是 total undefined 的结果有return和没有有什么区别？

Answer 1

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

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

{ name: "Bike", price: 100 }

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

I noticed that some tutorails on YouTube say that because it's an arrow function I don't need to type 'return'

使用箭头函数时，您不必包含函数体（即：{}）。当您不包含正文时，return 是隐式的（即：不需要），它会自动 return => 右侧的表达式。然而，当你有一个主体时，你需要包含一个明确的 return，因为主体可以在其中包含许多语句。当你不从函数体 return 时，你的函数将 return 什么都没有，这就是你得到 undefined 的原因。它在没有主体的情况下工作的一个例子是使用：

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

Answer 2

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

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

在您的情况下，这意味着第一个调用将 { 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 时，您没有 returning 任何东西。

(args) => xyz 是 (args) => { return xyz } 的 shorthand。添加 { } 后，您将不再使用 shorthand，因此您必须手动处理 returning。只写 { xyz } 会计算 xyz 但不会计算 return 任何东西，正如您在这里看到的那样。如果您认为主要用例是一个在大括号内有多个语句的块，可能跨越多行，那么 return 语句可以位于该块内您想要的任何位置，这就更有意义了。

.reduce 返回 concat 而不是总和

.reduce returning concat instead of total sum

javascript

string

reduce

numbers

concatenation