ES中reduce()的用法

reduce 方法 

 

对数组中的所有元素调用指定的回调函数。

该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

 

语法

array1.reduce(callbackfn[, initialValue])

 

array1       必需。一个数组对象。

callbackfn 必需。一个接受最多四个参数的函数。

nitialValue 可选。如果指定 initialValue，则它将用作初始值来启动累积。

 

返回值

通过最后一次调用回调函数获得的累积结果。

 

异常

当满足下列任一条件时，将引发 TypeError 异常：

• callbackfn 参数不是函数对象。
• 数组不包含元素，且未提供 initialValue。

备注

如果提供了 initialValue，则 reduce 方法会对数组中的每个元素调用一次 callbackfn 函数（按升序索引顺序）。

如果未提供 initialValue，则 reduce 方法会对从第二个元素开始的每个元素调用 callbackfn 函数。

 

 

回调函数语法

回调函数的语法如下所示：

function callbackfn(previousValue, currentValue, currentIndex, array1)

 

下面来看几个小例子，加深对该方法的理解

 

栗子1：将数组元素变成字符串拼接

//不传initialValue

function lizi1(prev,curr){
      return prev+'::'+curr;
  }
  var arr1=['a','b','c'];
  var result1= arr1.reduce(lizi1);
   console.info('result1',arr1.reduce(lizi1)); //输出

箭头函数写法：

var rs1 = arr1.reduce((prev,cur) =>{
      return prev+'::' +cur
  })
  console.info('rs1',rs1);//是不是更简洁了呢

 栗子2：扁平化二维数组

//传initValue

  //传initialVal,扁平化二维数组
    function lizi2(prev,curr){
        return prev.concat(curr)
  }

  var arr2=[[1,2],[3,4],[5,6],[7]]
  // 传initValue
  var result2 = arr2.reduce(lizi2,[]);
console.info('result2',result2);//输出 [1,2,3,4,5,6,7]
  //不传initValue
  var result3 = arr2.reduce(lizi2);

 console.info('result3',result3);//输出 [1,2,3,4,5,6,7]

箭头函数写法：

var rs2 = arr2.reduce((a, b) => {
      return a.concat(b)
  },[])

栗子3：处理数据并，累加

 function absolute(prev,curr){
        return Math.abs(prev)+Math.abs(curr)
    }
    var arr4 = [-2];
    //不传initVal,观察差别
    var result4 = arr4.reduce(absolute);
    //传initVal,
    var result5 = arr4.reduce(absolute,0);
    console.info('result4',result4) //-2
    console.info('result5',result5) //2

栗子4：取数组中大于1并小于10的元素

 function process(prevArray,curr){
        var arr = null;
        if(curr >1 &&curr < 10){
            arr = prevArray.concat(curr)
        }else{
            arr = prevArray
        }
        return arr;
    }
    var arr5 = [100,20,3,4,-5,10,2,-3,9];
    var result6 = arr5.reduce(process,[]);
    console.info('result6',result6) //[3,4,2,9]

箭头函数写法：

var rs6 = arr5.reduce((prev,cur) => {
       var newArr;
       if(cur>1&&cur<10){
           newArr = prev.concat(cur)
       }else{
           newArr = prev
       }
       return newArr
    },[])

栗子5：将[1,3,1,4]转为数字1314

 function addDigitValue(prev,curr,curIndex,array){
        var exponent = (array.length -1) -curIndex;
        var digitValue = curr*Math.pow(10,exponent);
        return prev + digitValue;
    }
     var arr6 = [1,3,1,4];
     var result7 = arr6.reduce(addDigitValue,0)
    console.info('result7',result7)

 在工作学习的过程中，经常看到关于reduce()的应用，特地地找资料学习了一下，如果对您又帮助，那真是再好不过了！