JavaScript數(shù)組reduce()方法的語法與實(shí)例解析
前言
reduce() 方法接收一個(gè)函數(shù)作為累加器（accumulator），數(shù)組中的每個(gè)值（從左到右）開始縮減，最終為一個(gè)值。
reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個(gè)參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用 reduce 的數(shù)組。
Javascript數(shù)組方法中，相比map、filter、forEach等常用的迭代方法，reduce常常被我們所忽略，今天一起來探究一下reduce在我們實(shí)戰(zhàn)開發(fā)當(dāng)中，能有哪些妙用之處，下面從reduce語法開始介紹。
1、語法
array.reduce(function(prev, cur, index, arr), initialValue) //簡(jiǎn)寫方便解釋 arr.reduce(callback,[initialValue])
參數(shù)含義：
callback （執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)）
1、previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
2、currentValue （數(shù)組中當(dāng)前被處理的元素）
3、index （當(dāng)前元素在數(shù)組中的索引）
4、array （調(diào)用 reduce 的數(shù)組）
initialValue （作為第一次調(diào)用 callback 的第一個(gè)參數(shù)。）類似相當(dāng)于設(shè)置初始值
2、實(shí)例解析 initialValue 參數(shù)
先看第一個(gè)例子：
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
//打印結(jié)果：
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10
這里可以看出，上面的例子index是從1開始的，第一次的prev的值是數(shù)組的第一個(gè)值。數(shù)組長(zhǎng)度是4，但是reduce函數(shù)循環(huán)3次。
再看第二個(gè)例子：
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
},0) //注意這里設(shè)置了初始值
console.log(arr, sum);
//打印結(jié)果：
//0 1 0
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10
這個(gè)例子index是從0開始的，第一次的prev的值是我們?cè)O(shè)置的初始值0，數(shù)組長(zhǎng)度是4，reduce函數(shù)循環(huán)4次。
結(jié)論：如果沒有提供initialValue，reduce 會(huì)從索引1的地方開始執(zhí)行 callback 方法，跳過第一個(gè)索引。如果提供initialValue，從索引0開始。
注意：如果這個(gè)數(shù)組為空，運(yùn)用reduce是什么情況？
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
//報(bào)錯(cuò)，"TypeError: Reduce of empty array with no initial value"
但是要是我們?cè)O(shè)置了初始值就不會(huì)報(bào)錯(cuò)，如下：
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
}，0)
console.log(arr, sum); // [] 0
所以一般來說我們提供初始值通常更安全
3、reduce的簡(jiǎn)單用法
當(dāng)然最簡(jiǎn)單的就是我們常用的數(shù)組求和，求乘積了。
var arr = [1, 2, 3, 4]; var sum = arr.reduce((x,y)=>x+y) var mul = arr.reduce((x,y)=>x*y) console.log( sum ); //求和，10 console.log( mul ); //求乘積，24
4、reduce的高級(jí)用法
（1）計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
（2）數(shù)組去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]
（3）將二維數(shù)組轉(zhuǎn)化為一維
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
（3）將多維數(shù)組轉(zhuǎn)化為一維
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
（4）對(duì)象里的屬性求和
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum) //60
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組reduce()方法的文章就介紹到這了,更多相關(guān)JS數(shù)組reduce()方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在IE下的JS編程中，以下的編程方式都會(huì)造成即使關(guān)閉IE也無法釋放內(nèi)存的問題，下面分類給出2009-06-06
在js中自一些字符串刪除空格的功能，本文章來介紹了字符串刪除功能加利用正則快速替換字符串中所有空格實(shí)現(xiàn)代碼2012-10-10
javascript實(shí)現(xiàn)拖動(dòng)層效果代碼(符合標(biāo)準(zhǔn)且兼容IE,chrome,firefox)
Auntion-TableSort國(guó)人寫的一個(gè)javascript表格排序的東西
js中int和string數(shù)據(jù)類型互相轉(zhuǎn)化實(shí)例
深入淺析JavaScript系列（13）：This? Yes,this!