javaScript 数组reduce方法及重构

格式

数组.reduce(回调函数(累积值,元素,下标,数组){},初始值)

arr.reduce(function(value,item,index,arr){}，initvalue）

如果reduce没有设置初始值，累计值是数组的第0位元素，遍历从下标1开始 如果reduce设置了初始值，累积值就是从这个初始值开始，遍历从下标0开始

如果在函数内不适用return,那么刚开始value是数组的第0项，后面每次value都是undefined ； 如果在函数中使用return 就会将返回值在下次数组的遍历中赋予value

reduce方法返回一个数值

理解累计值value实例

<code>var arr=[10,3,4,7,3,5,8,9];
//不设置初始值，此时value默认为数组第0位10，遍历从3开始，一共遍历7次
arr.reduce(function(value,item,index,arr){
        //每次遍历打印当前value值，第一次为10
        console.log(value);
        //每次打印后value值+1，下次遍历时value就是前一次+1后的值
        return value+1
})
//结果： 10 11 12 13 14 15 16


//设置初始值，此时value初始值为100，遍历从第0位10开始，一共遍历8次
arr.reduce(function(value,item,index,arr){
        //每次遍历打印当前value值，第一次为100
        console.log(value);
        //每次打印后value值+1，下次遍历时value就是前一次+1后的值 

        return value+1
},100)
//结果： 100 101 102 103 104 105 106 107/<code>

数组元素累加求和实例

<code>var arr=[10,3,4,7,3,5,8,9];
// 将reduce方法返回值赋给sum变量，未设置初始值，value默认为10，共遍历7次
var sum=arr.reduce(function(value,item){
          //每次遍历后，将value与当前元素值的和赋给下次遍历时的value,第一次为10+3
            return value+item;
});
console.log(sum);
//结果：49/<code>

reduce方法重构

<code>//定义新函数reduces，传入参数数组arr、设置每次遍历value返回值的函数fn、初始值
function reduces(arr,fn,initValue){
      //定义变量，用来设置遍历从第0位开始还是第1位开始，默认为0
      var i=0;
      //如果没定义初始值，则value默认值为数组第0位，且遍历从第一位开始
      if(initValue===undefined){
                initValue=arr[0];
                i=1;
            }
      //遍历数组
      while(i<arr.length>                //执行函数确定每次value返回值，赋值给initvalue
                initValue=fn(initValue,arr[i],i,arr);
                i++;
            }
      return initValue;
 }  

//测试
var arr=[3,5,7,9,1,2,4,6];
//实参function对应上述方法中形参fn,设置每次返回值为前一次value值与当前元素值之和，例如第一次遍历后返回3+5，第二次8+7
var sum=reduces(arr,function(value,item,index,arr){
                return value+item;
})
console.log(sum);
//结果：37/<arr.length>/<code>

reduce方法案例

求购物车中商品总价

<code>//定义购物车列表
var goodsList = [
            {selected:true, id: 1001, iconImg: ["a_icon_0.jpg"], img: ["a_0.jpg"], price: 2299, title: "Redmi K30 5G双模 120Hz流速屏 骁龙765G 30W快充 6GB+128GB 深海微光 游戏", config: [], appraisersNum: "3500+", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: false, new: false, gift: false }, outOfStock: [true] },
            {selected:false, id: 1002, iconImg: ["b_icon_0.jpg", "b_icon_1.jpg", "b_icon_2.jpg"], img: ["b_0.jpg", "b_1.jpg", "b_2.jpg"], price: 1049, title: "小米CC9e 索尼4800万旗舰相机 3200万美颜自拍 4030mAh 屏幕指纹 深蓝星球 6GB+64GB 游戏智能拍照手机", config: ["6GB", "4000mAh-4249mAh"], appraisersNum: "29万+", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: true, new: false, gift: false }, outOfStock: [false, true, true] },
            {selected:true, id: 1005, iconImg: ["e_icon_0.jpg", "e_icon_1.jpg", "e_icon_2.jpg"], img: ["e_0.jpg", "e_1.jpg", "e_2.jpg"], price: 1699, title: "Redmi K30 120Hz流速屏 前置挖孔双摄 6GB+128GB 花影惊鸿 游戏智能手机 小米 红米", config: ["6.65-6.74英寸", "6GB"], appraisersNum: "64000", shop: "小米京东自营旗舰店", tag: { self: true, restAssured: true, new: true, gift: true }, outOfStock: [false, true, true] }];

//为reduce方法中value设置了初始值0，遍历从数组第0位开始，每次返回选中商品的价格与value值之和
var sum=goodsList.reduce(function(value,item){
    return item.selected ? value+item.price : value;
},0);

console.log(sum);
//结果：3998/<code>

閱讀更多 栗子紀 的文章

關鍵字: 下标 JavaScript 数组