JS数组常用方法---14、2个归并方法
一、总结
一句话总结：
ES5中的归并方法有reduce()和reduceRight()，reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做，比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。reduceRight()方法基本和reduce()一样，只不过是从右向左执行。
1、reduce方法 常用参数？
reduce方法虽然参数比较多，有回调函数中的prev,cur,index,arr，还有reduce的第二个参数init，但是常用的也就prev和cur
arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中， arr 表示原数组； prev 表示上一次调用回调时的返回值，或者初始值 init; cur 表示当前正在处理的数组元素； index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1； init 表示初始值。 看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个：prev 和 cur。接下来我们跟着实例来看看具体用法吧~
2、reduce() 方法和forEach()、map()、filter()等迭代方法 的区别？
虽然都有遍历，但是reduce()方法可以将前面数组项遍历产生的结果与当前遍历项进行运算
reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其他迭代方法无法企及的
3、reduce() 方法 回调函数中各个参数的意思？
a、prev 表示上一次调用回调时的返回值，或者初始值 init;
b、cur 表示当前正在处理的数组元素；
c、index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
d、arr 表示原数组；
arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中， arr 表示原数组； prev 表示上一次调用回调时的返回值，或者初始值 init; cur 表示当前正在处理的数组元素； index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1； init 表示初始值。
4、reduce() 方法 第二个参数init的意思？
传递给reduce方法的初始值
5、reduce() 方法 的语法？
arr.reduce(function(prev,cur,index,arr){ }, init);
arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中， arr 表示原数组； prev 表示上一次调用回调时的返回值，或者初始值 init; cur 表示当前正在处理的数组元素； index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1； init 表示初始值。
6、reduce() 方法 和 reduceRight()方法的区别？
reduce() 方法遍历的时候是从左向右，reduceRight()方法遍历的时候从右像左
二、2个归并方法
博客对应课程的视频位置：
1、arr.reduce(function(prev,cur,index,arr){ }, init)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2个归并方法</title> 6 </head> 7 <body> 8 <!-- 9 callback （执行数组中每个值的函数，包含四个参数） 10 11 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 12 2、currentValue （数组中当前被处理的元素） 13 3、index （当前元素在数组中的索引） 14 4、array （调用 reduce 的数组） 15 16 initialValue （作为第一次调用 callback 的第一个参数。） 17 18 19 --> 20 <script> 21 //1、回调函数的参数 22 // var arr = [1, 2, 3, 4]; 23 // var sum = arr.reduce(function(prev, cur, index, arr) { 24 // console.log(prev, cur, index); 25 // return prev + cur; 26 // }); 27 // console.log(arr, sum); 28 29 //2、设置初始值 30 // var arr = [1, 2, 3, 4]; 31 // var sum = arr.reduce(function(prev, cur, index, arr) { 32 // console.log(prev, cur, index); 33 // return prev + cur; 34 // },0); //注意这里设置了初始值 35 // console.log(arr, sum); 36 37 //如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法， 38 // 跳过第一个索引。如果提供initialValue，从索引0开始。 39 40 //3、如果这个数组为空，运用reduce是什么情况 41 // var arr = []; 42 // var sum = arr.reduce(function(prev, cur, index, arr) { 43 // console.log(prev, cur, index); 44 // return prev + cur; 45 // }); 46 //报错，"TypeError: Reduce of empty array with no initial value" 47 48 //但是要是我们设置了初始值就不会报错 49 // var arr = []; 50 // var sum = arr.reduce(function(prev, cur, index, arr) { 51 // console.log(prev, cur, index); 52 // return prev + cur; 53 // },0); 54 // console.log(arr, sum); // [] 0 55 56 //4、reduce的简单用法:数组求和，求乘积 57 // var arr = [1, 2, 3, 4]; 58 // var sum = arr.reduce((x,y)=>x+y); 59 // var mul = arr.reduce((x,y)=>x*y); 60 // console.log( sum ); //求和，10 61 // console.log( mul ); //求乘积，24 62 63 //5、计算数组中每个元素出现的次数 64 // let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; 65 // let nameNum = names.reduce((pre,cur)=>{ 66 // if(cur in pre){ 67 // pre[cur]++; 68 // }else{ 69 // pre[cur] = 1; 70 // } 71 // return pre; 72 // },{}); 73 // console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1} 74 75 //6、数组去重 76 // let arr = [1,2,3,4,4,1]; 77 // let newArr = arr.reduce((pre,cur)=>{ 78 // if(!pre.includes(cur)){ 79 // return pre.concat(cur); 80 // }else{ 81 // return pre; 82 // } 83 // },[]); 84 // console.log(newArr);// [1, 2, 3, 4] 85 86 //7、将二维数组转化为一维 87 // let arr = [[0, 1], [2, 3], [4, 5]]; 88 // let newArr = arr.reduce((pre,cur)=>{ 89 // return pre.concat(cur) 90 // },[]); 91 // console.log(newArr); // [0, 1, 2, 3, 4, 5] 92 93 //8、将多维数组转化为一维 94 // let arr = [[0, 1], [2, 3], [4,[5,6,7]]]; 95 // const newArr = function(arr){ 96 // return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) 97 // }; 98 // console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7] 99 100 //9、对象里的属性求和 101 // var result = [ 102 // { 103 // subject: 'math', 104 // score: 10 105 // }, 106 // { 107 // subject: 'chinese', 108 // score: 20 109 // }, 110 // { 111 // subject: 'english', 112 // score: 30 113 // } 114 // ]; 115 // 116 // var sum = result.reduce(function(prev, cur) { 117 // return cur.score + prev; 118 // }, 0); 119 // console.log(sum) //60 120 121 122 </script> 123 </body> 124 </html>
2、arr.reduceRight(function(prev,cur,index,arr){ }, init)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>reduceRight()</title> 6 </head> 7 <body> 8 <!-- 9 10 11 reduce() 方法 和 reduceRight()方法的区别 12 reduce() 方法遍历的时候是从左向右，reduceRight()方法遍历的时候从右像左 13 14 --> 15 <script> 16 var a = ['1', '2', '3', '4', '5']; 17 var left = a.reduce(function(prev, cur) { return prev + cur; }); 18 var right = a.reduceRight(function(prev, cur) { return prev + cur; }); 19 20 console.log(left); // "12345" 21 console.log(right); // "54321" 22 </script> 23 </body> 24 </html>