reduce()方法对数组中的每个元素执行一个reducer函数(由你提供),从而获得一个单一的输出值。javascript
reduce()
方法将一个数组中的全部元素还原成一个单一的输出值,输出值能够是数字、对象或字符串。 reduce()
方法有两个参数,第一个是回调函数,第二个是初始值。前端
回调函数在数组的每一个元素上执行。回调函数的返回值是累加结果,并做为下一次调用回调函数的参数提供。回调函数带有四个参数。java
Current Index
和 Source Array
是可选的。后端
若是指定了初始值,则将累加器设置为 initialValue
做为初始元素。不然,将累加器设置为数组的第一个元素做为初始元素。数组
arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])
在下面的代码片断中,第一个累加器(accumulator
)被分配了初始值0。currentValue
是正在处理的 numbersArr
数组的元素。在这里,currentValue
被添加到累加器,在下次调用回调函数时,会将返回值做为参数提供。函数
const numbersArr = [67, 90, 100, 37, 60]; const total = numbersArr.reduce(function(accumulator, currentValue){ console.log("accumulator is " + accumulator + " current value is " + currentValue); return accumulator + currentValue; }, 0); console.log("total : "+ total);
输出spa
accumulator is 0 current value is 67 accumulator is 67 current value is 90 accumulator is 157 current value is 100 accumulator is 257 current value is 37 accumulator is 294 current value is 60 total : 354
在下面的代码中,studentResult
数组具备5个数字。使用 reduce()
方法,将数组减小为单个值,该值将 studentResult
数组的全部值和结果分配给 total
。翻译
const studentResult = [67, 90, 100, 37, 60]; const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0); console.log(total); // 354
一般,咱们从后端获取数据做为对象数组,所以,reduce()
方法有助于管理咱们的前端逻辑。在下面的代码中,studentResult
对象数组有三个科目,这里,currentValue.marks
取了 studentResult
对象数组中每一个科目的分数。code
const studentResult = [ { subject: '数学', marks: 78 }, { subject: '物理', marks: 80 }, { subject: '化学', marks: 93 } ]; const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0); console.log(total); // 251
“展平数组”是指将多维数组转换为一维。在下面的代码中,twoDArr
2维数组被转换为 oneDArr
一维数组。此处,第一个 [1,2]
数组分配给累加器 accumulator
,而后 twoDArr
数组的其他每一个元素都链接到累加器。对象
const twoDArr = [ [1,2], [3,4], [5,6], [7,8] , [9,10] ]; const oneDArr = twoDArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue)); console.log(oneDArr); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
根据对象的属性,咱们可使用 reduce()
方法将对象数组分为几组。经过下面的代码片断,你能够清楚地理解这个概念。这里,result
对象数组有五个对象,每一个对象都有 subject
和 marks
属性。若是分数大于或等于50,则该主题经过,不然,主题失败。 reduce()
用于将结果分组为经过和失败。首先,将 initialValue
分配给累加器,而后 push()
方法在检查条件以后将当前对象添加到 pass
和 fail
属性中做为对象数组。
const result = [ {subject: '物理', marks: 41}, {subject: '化学', marks: 59}, {subject: '高等数学', marks: 36}, {subject: '应用数学', marks: 90}, {subject: '英语', marks: 64}, ]; let initialValue = { pass: [], fail: [] } const groupedResult = result.reduce((accumulator, current) => { (current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current); return accumulator; }, initialValue); console.log(groupedResult);
输出
{ pass: [ { subject: ‘化学’, marks: 59 }, { subject: ‘应用数学’, marks: 90 }, { subject: ‘英语’, marks: 64 } ], fail: [ { subject: ‘物理’, marks: 41 }, { subject: ‘高等数学’, marks: 36 } ] }
在下面的代码片断中,删除了 plicatedArr
数组中的重复项。首先,将一个空数组分配给累加器做为初始值。accumulator.includes()
检查 duplicatedArr
数组的每一个元素是否已经在累加器中可用。若是 currentValue
在累加器中不可用,则使用 push()
将其添加。
const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7]; const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => { if(!accumulator.includes(currentValue)){ accumulator.push(currentValue); } return accumulator; }, []); console.log(removeDuplicatedArr); // [ 1, 5, 6, 7, 8, 9 ]
在本文中,咱们讨论了数组 reduce()
方法。首先介绍 reduce()
方法,而后,使用一个简单的示例讨论其行为。最后,经过示例讨论了 reduce()
方法最多见的五个用例。若是你是JavaScript的初学者,那么本文将对你有所帮助。
来源:https://medium.com/javascript-in-plain-english,做者:wathsala danthasinghe,翻译:公众号《前端全栈开发者》