假设我想对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
第一个例子中我做错了什么?
假设我想对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
第一个例子中我做错了什么?
当前回答
数组缩减函数接受三个参数,即initialValue(默认值) 它是0),累加器和当前值。 默认情况下,initialValue的值为“0”。这是由 蓄电池
让我们用代码来看看。
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal ) ;
// (remember Initialvalue is 0 by default )
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks .
// solution = 7
同样的例子还有initial Value:
var initialValue = 10;
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal,initialValue ) ;
/
// (remember Initialvalue is 0 by default but now it's 10 )
//first iteration** : 10 +1 => Now accumulator =11;
//second iteration** : 11 +2 => Now accumulator =13;
//third iteration** : 13 + 4 => Now accumulator = 17;
No more array properties now the loop breaks .
//solution=17
同样适用于对象数组(当前的stackoverflow问题):
var arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(acc,currVal){return acc + currVal.x})
// destructing {x:1} = currVal;
Now currVal is object which have all the object properties .So now
currVal.x=>1
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks
//solution=7
要记住的一件事是InitialValue默认为0,可以给任何我的意思{},[]和数字
其他回答
TL;DR,设置初始值
使用解构
加勒比海盗。Reduce ((sum, {x}) => sum + x, 0)
没有解构
加勒比海盗。Reduce ((sum, cur) => sum + cur.x, 0)
与打印稿
加勒比海盗。Reduce ((sum, {x}: {x: number}) => sum + x, 0)
让我们尝试解构方法:
Const arr = [{x: 1}, {x: 2}, {x: 4}] Const result = arr。Reduce ((sum, {x}) => sum + x, 0) Console.log (result) //
关键在于设置初始值。返回值将成为下一次迭代的第一个参数。
上面回答的技巧不是惯用的
接受的答案建议不传递“可选”值。这是错误的,因为惯用的方法是总是包括第二个参数。为什么?三个原因:
1. 危险的 不传递初始值是危险的,如果回调函数不小心,可能会产生副作用和突变。
看哪
const badCallback = (a,i) => Object.assign(a,i)
const foo = [ { a: 1 }, { b: 2 }, { c: 3 } ]
const bar = foo.reduce( badCallback ) // bad use of Object.assign
// Look, we've tampered with the original array
foo // [ { a: 1, b: 2, c: 3 }, { b: 2 }, { c: 3 } ]
如果我们这样做,用初始值:
const bar = foo.reduce( badCallback, {})
// foo is still OK
foo // { a: 1, b: 2, c: 3 }
为了记录,除非您打算改变原始对象,否则请设置object的第一个参数。赋值给空对象。像这样:对象。赋值({},a, b, c)
2 -更好的类型推断 当你使用Typescript这样的工具或VS Code这样的编辑器时,你可以告诉编译器初始值,如果你做错了,它可以捕捉到错误。如果您不设置初始值,在许多情况下,它可能无法猜测,最终可能会出现令人毛骨悚然的运行时错误。
3 -尊重函子 当JavaScript内部的子函数被释放出来时,它的表现最好。在函数领域,有一个关于如何“折叠”或缩小数组的标准。当对数组折叠或应用变换时,将获取该数组的值来构造一个新类型。您需要传达结果类型——即使最终类型是数组、另一个数组或任何其他类型中的值的类型,您也应该这样做。
我们换个角度考虑。在JavaScript中,函数可以像数据一样传递,这就是回调的工作方式,下面的代码的结果是什么?
(1、2、3).reduce(回调)
它会返回一个数字吗?一个对象?这样更清楚
[1,2,3]。减少(回调,0)
在这里阅读更多函数式编程规范:https://github.com/fantasyland/fantasy-land#foldable
更多背景信息
reduce方法有两个参数,
Array.prototype.reduce( callback, initialItem )
回调函数接受以下参数
(accumulator, itemInArray, indexInArray, entireArray) => { /* do stuff */ }
在第一次迭代中,
如果提供了initialItem,则reduce函数将initialItem作为累加器传递,并将数组的第一项作为itemInArray传递。 如果没有提供initialItem,则reduce函数将数组中的第一项传递为initialItem,将数组中的第二项传递为itemInArray,这可能会造成混淆。
我教授并建议设置reduce的初始值。
您可以在以下地址查看文档:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
在reduce的每一步中,你不会返回一个新的{x:??}对象。所以你要么需要做:
arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return a + b.x})
或者你需要这样做
arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(a,b){return {x: a.x + b.x}; })
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”函数完全相同。
以下是链接: 减少源代码
数组缩减函数接受三个参数,即initialValue(默认值) 它是0),累加器和当前值。 默认情况下,initialValue的值为“0”。这是由 蓄电池
让我们用代码来看看。
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal ) ;
// (remember Initialvalue is 0 by default )
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks .
// solution = 7
同样的例子还有initial Value:
var initialValue = 10;
var arr =[1,2,4] ;
arr.reduce((acc,currVal) => acc + currVal,initialValue ) ;
/
// (remember Initialvalue is 0 by default but now it's 10 )
//first iteration** : 10 +1 => Now accumulator =11;
//second iteration** : 11 +2 => Now accumulator =13;
//third iteration** : 13 + 4 => Now accumulator = 17;
No more array properties now the loop breaks .
//solution=17
同样适用于对象数组(当前的stackoverflow问题):
var arr = [{x:1},{x:2},{x:4}]
arr.reduce(function(acc,currVal){return acc + currVal.x})
// destructing {x:1} = currVal;
Now currVal is object which have all the object properties .So now
currVal.x=>1
//first iteration** : 0 +1 => Now accumulator =1;
//second iteration** : 1 +2 => Now accumulator =3;
//third iteration** : 3 + 4 => Now accumulator = 7;
No more array properties now the loop breaks
//solution=7
要记住的一件事是InitialValue默认为0,可以给任何我的意思{},[]和数字
//fill创建包含n元素的数组 //reduce需要2个参数,第3个参数作为长度 var fibonacci = (n) =>数组(n).fill()。Reduce ((a, b, c) => { 返回a.concat(c < 2 ?C: a[C - 1] + a[C - 2]) },[]) console.log(斐波纳契(8))