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>
来源：oschina
链接：https://my.oschina.net/u/4381258/blog/3234146