微信扫一扫打赏支持

JS数组常用方法---14、2个归并方法

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>

 

 

 
posted @ 2020-04-13 20:15  范仁义  阅读(296)  评论(0)  编辑  收藏  举报