es6---reduce使用

reduce()方法可以搞定的东西for循环或者forEach方法有时候也可以搞定那为啥要用reduce()这个问题之前我也想过要说原因还真找不到唯一能找到的是通往成功的道路有很多但是总有一条路是最捷径的亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数不包括数组中被删除或从未被赋值的元素接受四个参数初始值或者上一次回调函数的返回值当前元素值当前索引调用 reduce 的数组。callback 执行数组中每个值的函数包含四个参数 1、previousValue 上一次调用回调返回的值或者是提供的初始值initialValue 2、currentValue 数组中当前被处理的元素 3、index 当前元素在数组中的索引 4、array 调用 reduce 的数组 initialValue 作为第一次调用 callback 的第一个参数。2、实例解析 initialValue 参数先看第一个例子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);打印结果1 2 13 3 26 4 3[1, 2, 3, 4] 10这里可以看出上面的例子index是从1开始的第一次的prev的值是数组的第一个值。数组长度是4但是reduce函数循环3次。再看第二个例子var arr [1, 2, 3, 4]; var sum arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev cur; }0) //注意这里设置了初始值 console.log(arr, sum);打印结果0 1 01 2 13 3 26 4 3[1, 2, 3, 4] 10这个例子index是从0开始的第一次的prev的值是我们设置的初始值0数组长度是4reduce函数循环4次。结论如果没有提供initialValuereduce 会从索引1的地方开始执行 callback 方法跳过第一个索引。如果提供initialValue从索引0开始。注意如果这个数组为空运用reduce是什么情况var arr []; var sum arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev cur; }) //报错TypeError: Reduce of empty array with no initial value但是要是我们设置了初始值就不会报错如下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的简单用法当然最简单的就是我们常用的数组求和求乘积了。var arr [1, 2, 3, 4]; var sum arr.reduce((x,y)xy) var mul arr.reduce((x,y)x*y) console.log( sum ); //求和10 console.log( mul ); //求乘积244、reduce的高级用法1计算数组中每个元素出现的次数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数组去重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将二维数组转化为一维let arr [[0, 1], [2, 3], [4, 5]] let newArr arr.reduce((pre,cur)pre.concat(cur),[]) console.log(newArr); // [0, 1, 2, 3, 4, 5]3将多维数组转化为一维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、对象里的属性求和var result [ { subject: math, score: 10 }, { subject: chinese, score: 20 }, { subject: english, score: 30 } ]; // reduce(累加器, 当前项, 索引, 原数组, 初始值0) const total result.reduce((sum, item) { return sum item.score; }, 0); console.log(total); // 输出 60