假设我想对arr中的每个元素求和。

arr = [ { x: 1 }, { x: 2 }, { x: 4 } ];
arr.reduce(function(a, b){ return a.x + b.x; }); // => NaN

我有理由相信a。x在某些时候是没有定义的。

以下工作正常

arr = [ 1, 2, 4 ];
arr.reduce(function(a, b){ return a + b; }); // => 7

第一个例子中我做错了什么?


当前回答

Reduce函数在集合上迭代

arr = [{x:1},{x:2},{x:4}] // is a collection

arr.reduce(function(a,b){return a.x + b.x})

翻译:

arr.reduce(
    //for each index in the collection, this callback function is called
  function (
    a, //a = accumulator ,during each callback , value of accumulator is 
         passed inside the variable "a"
    b, //currentValue , for ex currentValue is {x:1} in 1st callback
    currentIndex,
    array
  ) {
    return a.x + b.x; 
  },
  accumulator // this is returned at the end of arr.reduce call 
    //accumulator = returned value i.e return a.x + b.x  in each callback. 
);

在每次索引回调期间,变量accumulator的值为 在回调函数中传入"a"参数。如果不初始化"accumulator",它的值将是undefined。调用定义。X会给出误差。 要解决这个问题,初始化“accumulator”,值为0,如Casey的答案所示。

为了理解“reduce”函数的输入输出,我建议您查看该函数的源代码。 Lodash库有reduce函数,它的工作原理与ES6中的“reduce”函数完全相同。

以下是链接: 减少源代码

其他回答

我们可以使用数组减少方法来创建新的对象,我们可以使用这个选项来求和或过滤

const FRUITS = ["apple", "orange"] const fruitBasket ={香蕉:{数量:10,kg:3},苹果:{数量:30,kg:10},橙子:{数量:1,kg:3}} const newFruitBasket =水果。Reduce ((acc, fruit) =>({…acc, [fruit]: fruitBasket[fruit]}), {}) console.log (newFruitBasket)

在第一次迭代之后,你返回一个数字,然后试图获得它的属性x,以添加到下一个对象,这是未定义的,数学涉及未定义的结果在NaN。

尝试返回一个包含x属性和参数x属性的对象:

var arr = [{x:1},{x:2},{x:4}];

arr.reduce(function (a, b) {
  return {x: a.x + b.x}; // returns object with property x
})

// ES6
arr.reduce((a, b) => ({x: a.x + b.x}));

// -> {x: 7}

评论中增加的解释:

[]的每次迭代的返回值。Reduce作为下一次迭代的a变量。

迭代1:a = {x:1}, b = {x:2}, {x: 3}分配给迭代2中的a

迭代2:a = {x:3}, b = {x:4}。

你的例子的问题是你返回的是一个数字文字。

function (a, b) {
  return a.x + b.x; // returns number literal
}

迭代1:a = {x:1}, b = {x:2}, //在下一次迭代中返回3作为a

迭代2:a = 3, b = {x:2}返回NaN

数字文字3(通常)没有名为x的属性,因此它是未定义的,未定义+ b.x返回NaN, NaN + <任何>总是NaN

澄清:我更喜欢我的方法,而不是这个帖子中的其他答案,因为我不同意通过一个可选参数来减少一个神奇的数字来获得一个数字原语的想法。这可能会导致写的行数更少,但在我看来,可读性更差。

Reduce函数在集合上迭代

arr = [{x:1},{x:2},{x:4}] // is a collection

arr.reduce(function(a,b){return a.x + b.x})

翻译:

arr.reduce(
    //for each index in the collection, this callback function is called
  function (
    a, //a = accumulator ,during each callback , value of accumulator is 
         passed inside the variable "a"
    b, //currentValue , for ex currentValue is {x:1} in 1st callback
    currentIndex,
    array
  ) {
    return a.x + b.x; 
  },
  accumulator // this is returned at the end of arr.reduce call 
    //accumulator = returned value i.e return a.x + b.x  in each callback. 
);

在每次索引回调期间,变量accumulator的值为 在回调函数中传入"a"参数。如果不初始化"accumulator",它的值将是undefined。调用定义。X会给出误差。 要解决这个问题,初始化“accumulator”,值为0,如Casey的答案所示。

为了理解“reduce”函数的输入输出,我建议您查看该函数的源代码。 Lodash库有reduce函数,它的工作原理与ES6中的“reduce”函数完全相同。

以下是链接: 减少源代码

我曾经遇到过这种情况,我所做的是将我的解决方案包装在一个函数中,使其在我的环境中可重用,就像这样:

const sumArrayOfObject =(array, prop)=>array.reduce((sum, n)=>{return sum + n[prop]}, 0)

只是我对用object literal设置默认值的看法。

让arr = [{ 持续时间:1 },{ 持续时间:3 },{ 持续时间:5 },{ 持续时间:6 }); Const out = arr。Reduce ((a, b) => { 返回{ 持续时间:a.duration + b.duration }; },{ 持续时间:0 }); console.log(出);