js reduce()

2019-11-1    seo達(dá)人

是什么

ES5提供的數(shù)組的方法。

reduce() 方法接收一個(gè)函數(shù)作為回調(diào)函數(shù)（accumulator），數(shù)組中的每個(gè)值（從左到右）開始縮減（其實(shí)就是從左往右開始對(duì)每個(gè)數(shù)執(zhí)行回調(diào)函數(shù)），最終為一個(gè)值。



PS: 回調(diào)函數(shù)的返回結(jié)果類型和傳入的初始值相同



語法以及參數(shù)

arr.reduce(  callback(accumulator, currentValue,index ,array ) ,initialValue )

1

initialValue 可選

如果有的話則作為，第一次調(diào)用 callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。

如果沒有提供初始值，callback則使用數(shù)組的第一個(gè)元素，作為第一次調(diào)用的初始值。

在沒有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。



accumulator

默認(rèn)傳入上一次調(diào)用回調(diào)函數(shù)的的返回值。

初始值： initialValue存在的話，則是initialValue 若沒有則是數(shù)組的第一個(gè)元素



currentValue

數(shù)組中正在處理的元素。



index 可選

數(shù)組中正在處理的當(dāng)前元素的索引。 如果提供了initialValue，則起始索引號(hào)為0，否則從索引1起始。



array可選

調(diào)用reduce()的數(shù)組



一個(gè)小小的例子

例1 無initialValue

var  arr = [1, 2, 3, 4, 5];

sum = arr.reduce(function(result, cur, index, arr) {

    console.log(result, cur, index,arr);

    return result+ cur;

})

console.log(sum) // 最后的結(jié)果是15



result cur index arr

第1次 1 2 1 [1, 2, 3, 4, 5]

第2次 3 3 2 [1, 2, 3, 4, 5]

第3次 6 4 3 [1, 2, 3, 4, 5]

第4次 10 5 4 [1, 2, 3, 4, 5]

例2 有initialValue 傳入10

var  arr = [1, 2, 3, 4, 5];

sum = arr.reduce(function(result, cur, index, arr) {

    console.log(result, cur, index,arr);

    return result+ cur;

},10)

console.log(sum) // 最后的結(jié)果是25



result cur index arr

第1次 10 1 0 [1, 2, 3, 4, 5]

第2次 11 2 1 [1, 2, 3, 4, 5]

第3次 13 3 2 [1, 2, 3, 4, 5]

第4次 16 4 3 [1, 2, 3, 4, 5]

第5次 20 5 4 [1, 2, 3, 4, 5]

回調(diào)函數(shù)的返回值

上面的例子返回的都是一個(gè)整型數(shù)字，如果希望返回其他類型的數(shù)據(jù)呢？



這個(gè)就跟accumulator的初始值有關(guān)系了。

下面的例子我們傳入的是一個(gè)object {sum: 0}



var items = [0,1,2,3,4];

var reducer = function add(sumT, item) {

  console.log(sumT)

  sumT.sum = sumT.sum + item;

  return sumT;

};

var total = items.reduce(reducer, {sum: 0});

console.log(total); // {sum:1130}



運(yùn)行結(jié)果



 {sum: 0}

 {sum: 1}

 {sum: 3}

 {sum: 6}

 {sum: 10}



reduce()的應(yīng)用

  1. 數(shù)組扁平化

    遞歸+reduce



    let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 12}, [13, 14]], '[]'];



    function flatten(arr) {

      if(Array.isArray(arr)) {

        return arr.reduce((prev, cur) => {

           // 如果遍歷的當(dāng)前項(xiàng)是數(shù)組，遞歸調(diào)用flatten

          return Array.isArray(cur) ? prev.concat(flatten(cur)) : prev.concat(cur)

        }, [])

      } else {

        throw new Error(' 當(dāng)前參數(shù)不是數(shù)組')

      }

    }

    console.log(flatten(arr));



    PS:這里的throw new Error只是用來判斷一開始的arr，這是因?yàn)樵谶f歸只傳入數(shù)組。


日歷

鏈接

個(gè)人資料

存檔