1. Summary
One sentence summary:
The merge methods in ES5 are reduce() and reduce Right(), which execute a reducer function (in ascending order) on each element in the array and summarize its results as a single return value.The reduce method can do a lot, that is, loop traversal can do, reduce can do, such as array sum, array product, the number of occurrences of elements in the array, array de-weighting, and so on.The reduceRight() method is basically the same as reduce(), except that it is executed from right to left.
1. Common parameters of reduce method?
The reduce method has many parameters, including prev,cur,index,arr in the callback function, and init, the second parameter of reduce, but it is also prev and cur that are commonly used.
arr.reduce(function(prev,cur,index,arr){
...
}, init);
Where,
arr represents the original array;
prev denotes the return value or initial init of the last call back;
cur denotes an array element that is currently being processed;
Index represents the index of the array element currently being processed. If an init value is provided, the index is 0, otherwise the index is 1;
init represents the initial value.
Does it look complicated?That's OK, it just looks like there are only two commonly used parameters: prev and cur.Let's follow an example to see how to use it.
2. What is the difference between the reduce() method and the forEach(), map(), filter() iteration methods?
Although traversal exists, the reduce() method can operate on the results of traversing the previous array items and the current traversal items.
Reduc() is the merging method of an array, and traverses each item of the array in the same way as forEach(), map(), filter(), and so on. However, reduce() can also compute the result of traversing the previous array item with the current traversal item, which is beyond other iteration methods.
3. What do you mean by the parameters in the reduce() method callback function?
a, prev denotes the return value or initial init of the last call back;
b. cur denotes the array element currently being processed;
c, index denotes the index of the array element currently being processed. If an init value is provided, the index is 0, otherwise the index is 1;
d, arr denotes the original array;
arr.reduce(function(prev,cur,index,arr){
...
}, init);
Where,
arr represents the original array;
prev denotes the return value or initial init of the last call back;
cur denotes an array element that is currently being processed;
Index represents the index of the array element currently being processed. If an init value is provided, the index is 0, otherwise the index is 1;
init represents the initial value.
4. What does the second parameter init of the reduce() method mean?
Initial value passed to reduce method
5. Syntax of reduce() method?
arr.reduce(function(prev,cur,index,arr){ }, init);
arr.reduce(function(prev,cur,index,arr){
...
}, init);
Where,
arr represents the original array;
prev denotes the return value or initial init of the last call back;
cur denotes an array element that is currently being processed;
Index represents the index of the array element currently being processed. If an init value is provided, the index is 0, otherwise the index is 1;
init represents the initial value.
6. What is the difference between the reduce() method and the reduceRight() method?
The reduce() method traverses from left to right, and the reduceRight() method traverses from right to left
2. 2 Merge Methods
Blog video location for course:
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 Merge methods</title> 6 </head> 7 <body> 8 <!-- 9 callback (Performs a function with four parameters for each value in the array) 10 11 1,previousValue (The value returned from the last call back, or the initial value provided ( initialValue)) 12 2,currentValue (The element currently being processed in the array) 13 3,index (Index of current element in array) 14 4,array (call reduce Array) 15 16 initialValue (As the first call callback First parameter.) 17 18 19 --> 20 <script> 21 //1,Parameters of callback function 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,Set Initial Value 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); //Notice that the initial value is set here 35 // console.log(arr, sum); 36 37 //If not provided initialValue，reduce Will start at index 1 callback Method, 38 // Skip the first index.If provided initialValue，Start with index 0. 39 40 //3,If the array is empty, use reduce What is it 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 //Report errors,"TypeError: Reduce of empty array with no initial value" 47 48 //But if we set the initial value, we won't make a mistake 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 Simple usage:Array sum, product 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 ); //Sum, 10 61 // console.log( mul ); //Product, 24 62 63 //5,Calculates the number of occurrences of each element in an array 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,Array Weighting 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,Convert a two-dimensional array to a one-dimensional array 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,Converting a multidimensional array to a one-dimensional 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,Summation of attributes in an object 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() Methods and reduceRight()Differences in methods 12 reduce() The method traverses from left to right. reduceRight()Right to left when method traverses 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>