Question

我刚刚学习了javascript。为什么返回值是NaN？

var arr = [
    { name: "A", quantity: 1, price: 20 },
    { name: "B", quantity: 2, price: 40 },
    { name: "C", quantity: 3, price: 60 },
    { name: "D", quantity: 4, price: 80 }
];
var test = arr.reduce(function(item1, item2){
    return (item1.quantity * item1.price) + (item2.quantity * item2.price);
});
console.log(test);

Answer 1

摘自Array.reduce()文档：

reducer函数采用四个参数：


累加器（acc）

当前值（当前）

当前索引（idx）

源数组（src）


您的reducer函数的返回值分配给累加器，该值在整个数组的每次迭代中都被记住，并最终成为最终的单个结果值。

所以，我相信您想这样做：

var arr = [
  { name: "A", quantity: 1, price: 20 },
  { name: "B", quantity: 2, price: 40 },
  { name: "C", quantity: 3, price: 60 },
  { name: "D", quantity: 4, price: 80 }
];

var test = arr.reduce(function(acc, curr)
{
    return acc + (curr.quantity * curr.price);
}, 0);

console.log(test);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

注意，最好明确定义累加器的初始值（在这种情况下为0）。即使它是可选的，在这种情况下也不起作用：

initialValue 可选：用作首次调用回调的第一个参数的值。如果未提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce（）是错误的。

为什么会得到NaN？

由于您没有明确定义累加器的初始值，因此它将是数组上的第一个对象：

{name: "A", quantity: 1, price: 20}

现在，reduce()的第一次迭代将起作用，因为累加器（在您的示例中命名为item1）是一个对象，并且具有属性quantity和price 。更重要的是，该迭代将返回1 * 20 + 2 * 40 = 100，这将是累加器（item1）的新值。现在，reduce()的第二次和以后的迭代将无法按您期望的那样工作，因为累加器的新值（在第一次迭代之后）不是对象，并且将没有属性quantity和{ {1}}。因此，此最新一期将导致获得price作为最终值。

Answer 2

基于您可能需要的预感，该解决方案是否会为您带来正确的结果？它的作用是将输出初始化为0，然后为数组中的每个项目将（数量*价格）的值添加到输出中

var arr = [
{ name: "A", quantity: 1, price: 20 },
{ name: "B", quantity: 2, price: 40 },
{ name: "C", quantity: 3, price: 60 },
{ name: "D", quantity: 4, price: 80 }
];
var test = arr.reduce(function(acc, item){
    return acc + (item.quantity * item.price);
}, 0);
console.log(test); //600

Answer 3

为什么返回值是NaN？ View here visual execution

首先，您需要了解代码的执行方式

Array.reduce（）是一个函数，它返回一个新数组，并将数组的值从一个减少为一个。

方法减少javascript

3 个答案: