假设我想对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的第二个参数:

Var arr = [{x:1}, {x:2}, {x:4}]; Var结果= arr。Reduce(函数(acc, obj){返回acc + obj.x;}, 0); console.log(结果);/ / 7

第一次调用匿名函数时,使用(0,{x: 1})调用它,并返回0 + 1 = 1。下一次,它被(1,{x: 2})调用,并返回1 + 2 = 3。然后用(3,{x: 4})调用它,最后返回7。

这也可以处理数组为空的情况,返回0。

其他回答

在第一步中,它会工作得很好,因为a的值将是1,b的值将是2,但由于2+1将返回,在下一步中,b的值将是第一步的返回值,即3,因此b.x将是未定义的…而undefined + anyNumber将是NaN,这就是为什么你会得到这个结果。

相反,你可以尝试给初始值为零,即

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

如果你有一个包含大量数据的复杂对象,比如一个对象数组,你可以采取一步一步的方法来解决这个问题。

如:

const myArray = [{ id: 1, value: 10}, { id: 2, value: 20}];

首先,你应该将你的数组映射到一个你感兴趣的新数组,在这个例子中它可能是一个新的值数组。

const values = myArray.map(obj => obj.value);

这个回调函数将返回一个只包含原始数组中的值的新数组,并将其存储在values const中。现在你的values const是一个这样的数组:

values = [10, 20];

现在你已经准备好执行reduce了:

const sum = values.reduce((accumulator, currentValue) => { return accumulator + currentValue; } , 0);

如您所见,reduce方法多次执行回调函数。对于每一次,它都取数组中该项的当前值,并与累加器相加。为了正确地求和,你需要将累加器的初始值设置为reduce方法的第二个参数。

现在你有了新的const sum值为30。

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

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

一个更简洁的方法是提供一个初始值作为reduce的第二个参数:

Var arr = [{x:1}, {x:2}, {x:4}]; Var结果= arr。Reduce(函数(acc, obj){返回acc + obj.x;}, 0); console.log(结果);/ / 7

第一次调用匿名函数时,使用(0,{x: 1})调用它,并返回0 + 1 = 1。下一次,它被(1,{x: 2})调用,并返回1 + 2 = 3。然后用(3,{x: 4})调用它,最后返回7。

这也可以处理数组为空的情况,返回0。

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

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)