JavaScript reduce 不适用于对象

Question

我想了解reduce是如何工作的

var expense = [
    {
        item: "Bed",
        cost: 1499,
        date: "02-23-2018"
    },
    {
        item: "Phone",
        cost: 2499,
        date: "02-23-2018"
    },
    {
        item: "Book",
        cost: 400,
        date: "02-23-2018"
    },
    {
        item: "Mattress",
        cost: 700,
        date: "02-23-2018"
    },
    {
        item: "Food",
        cost: 300,
        date: "02-23-2018"
    }
];

var totalExpense = expense.reduce(function (a, b) {
    console.log(a.cost, b.cost);
    return a.cost + b.cost;
});

console.log(totalExpense);

这给出的总费用为

NaN

。

输出：

1499 2499
undefined 400
undefined 700
undefined 300
NaN

当我使用简单的费用数组执行相同的操作时，效果很好。

Answer 1

传递给reduce回调的第一个参数是之前的值（

a

） - 或者传递给reduce的第二个参数（初始值）

[].reduce(function(a, b) { ... }, 0);
          ^ callback              ^ initial value

a

将保存之前每次迭代的结果，因此要获得所有成本的总和，只需添加

b.cost

var expense = [{
    item: 'Bed',
    cost: 1499,
    date: '02-23-2018'
  },
  {
    item: 'Phone',
    cost: 2499,
    date: '02-23-2018'
  },
  {
    item: 'Book',
    cost: 400,
    date: '02-23-2018'
  },
  {
    item: 'Mattress',
    cost: 700,
    date: '02-23-2018'
  },
  {
    item: 'Food',
    cost: 300,
    date: '02-23-2018'
  }
];
var totalExpense = expense.reduce(function(a, b) {
  return a + b.cost;
}, 0);

console.log(totalExpense);

使用 es6 语法你可以将其变成单行代码

var totalExpense = expense.reduce((a, {cost}) => a + cost, 0);

Answer 2

您需要提供一个具有

cost

字段的初始值，以便在累加器中引用它。并且您需要返回该对象：

expense.reduce(function(acc, curr){
    console.log(acc.cost, curr.cost);
    acc.cost += curr.cost;
    return acc;
    }, { cost: 0 });

请注意使用比

a

和

b

更有意义的变量名称。这将使您的代码更容易理解。

Array.prototype.reduce

回调应该有一个累加器和当前值。如此命名它们以帮助您自己。初始值提供了一个带有

cost

字段的对象，您可以在其中写下累计值。

请注意，如果您愿意，也可以在此处使用普通变量。如果您实际上不需要对象：

var total = expense.reduce(function(acc, curr){
    acc += curr.cost;
    return acc;
    }, 0);
 console.log(total);
 >> 5398

Answer 3

您需要

return

无论下一个

a

应该是什么。

a.cost + b.cost

是一个数字。它没有

cost

属性，因此第一次迭代后

a.cost

将是

undefined

。

只需提供一个起始值

0

。还要考虑为您的参数提供更合适的名称。

var totalExpense = expense.reduce(function(sum, item){
  return sum + item.cost;
}, 0);

Answer 4

您需要一个初始值。 reduce函数将累加值作为第一个参数，集合的下一个元素作为第二个

var totalExpense = expense.reduce(function(accumulator, current) {
console.log({ accumulator: accumulator, currentCost: current.cost });
return accumulator + current.cost;
}, 0);

console.log({ totalExpense: totalExpense });

Answer 5

//归约法总成本

lettotalExpense=expense.reduce((tem,val)=>tem+=val.cost,0) console.log(总费用)

Answer 6

expense.reduce((sum, cur) => ({ cost: sum.cost + cur.cost })).cost;

---

已更新 正如@Viktor 指出的，我之前没有考虑过特殊情况。

function getTotelExpense(expense) {
    if (expense.length > 0 && expense[0].hasOwnProperty("cost"))
        return expense.reduce((sum, cur) => ({ cost: sum.cost + cur.cost })).cost;
    else return 0;
}

您可以在类型错误：减少没有初始值的空数组 | 中了解更多信息MDN

Answer 7

这是您可以使用通用函数实现此目的的另一种方法

foldMap

– 有关这个漂亮函数的更多指导，我推荐 这个视频。

const totalExpense =
  expense.foldMap (item => item.cost, 0)

console.log (totalExpense)
// 5398

为此，您需要定义

Array.prototype.foldMap

和

Number.prototype.concat

– 但此实现及其定义位置取决于您

Array.prototype.foldMap = function (f, acc)
{
  return this.reduce ((acc, x, i) =>
    acc.concat (f (x, i, this)), acc)
}

Number.prototype.concat = function (m)
{
  return this + m
}

这是一个功能代码粘贴

Array.prototype.foldMap = function (f, acc)
{
  return this.reduce ((acc, x, i) =>
    acc.concat (f (x, i, this)), acc)
}

Number.prototype.concat = function (m)
{
  return this + m
}

const expense =
  [ { item: 'Bed'
    , cost: 1499
    , date: '02-23-2018'
    }
  , { item: 'Phone'
    , cost: 2499
    , date: '02-23-2018'
    }
  , { item: 'Book'
    , cost: 400
    , date: '02-23-2018'
    }
  , { item: 'Mattress'
    , cost: 700
    , date: '02-23-2018'
    }
  , { item: 'Food'
    , cost: 300
    , date: '02-23-2018'
    }
  ]
  
const totalExpense =
  expense.foldMap (item => item.cost, 0)

console.log(totalExpense)
// 5398