手写redux方法以及数组reduce方法
reduce能做什么？
1）求和
2）计算价格
3）合并数据
4）redux的compose方法
这篇文章主要内容是什么？
1）介绍reduce的主要作用
2）手写实现reduce方法
0）了解reduce
在了解reduce的好处之前，我们先知道reduce是什么？ reduce是数组的一个方法，函数接受的参数有四个，函数上一次的结果，当前的结果，索引，当前执行的数组；在尾巴处也可以加一个初始的值。每一个参数都有很大的用处，运用好的话，可以幻化出各种变化。
let r = [1,2,3].reduce(('上一次返回的值','当前的值','当前索引','执行的数组') => {
},'第一次的初始值')
1）求和
这个函数执行俩次，第一次a = 1，b = 2,。a+b的结果赋予下一次的a 。 第二次a = 3，b = 3。 运算结束，放回总结果。
// 求和
let r = [1, 2, 3].reduce((a, b) => {
return a + b;})
console.log(r)
// r = 6
2）计算价格
这个是遍历后台传过来的价格和数量，有时候结构是比较复杂的。这里我们看看第一个，这样是不对的。第一次 1002+1002 . 将结果赋予a 那下一次执行 ， a.price 和 a.number 都找不到了，都为undefined。所以我们需要一个初始值，将所有的结果累加在初始值上。这里我们看看第二个
函数，给a加个初始值0，也就是在reduce的尾巴加个0， 这样每次b的结果累加在a上。那么价格就可以计算出来了。
// 算价格
let k = [{ price: 100, number: 2 }, { price: 100, number: 2 }, { price: 100, number: 2 }, { price: 100, number: 2 }].reduce((a, b) => {
return a.price * a.number + b.price * b.number;})
console.log(k)
// k = NaN
// 算价格
let k = [{ price: 100, number: 2 }, { price: 100, number: 2 }, { price: 100, number: 2 }, { price: 100, number: 2 }].reduce((a, b) => {
return a + b.price * b.number;}, 0)
console.log(k)
// k = 800
3）合并数据
这里的是将key和value和为一个对象，遍历key数组，给一个初始值{}，往初始值{}赋值。这样做到了合并数据
// 合并多个数据
let keys = ['name', 'age'];
let value = ['王少', '20'];
let obj = keys.reduce((a, b, index, curent) => {
a[b] = value[index];
return a;}, {});
console.log(obj);
// obj = {name:'王少',age:'20'}
4）redux的compose方法
首先先创造3个方法，第一个将俩个字符串拼起来，第二给转化大写，第三个前后加*
function sum(a, b) {
return a + b;}
function toUpper(str) {
return str.toUpperCase();}
function add(str) {
return `***${str}***`}
正常执行三个方法是这样的，一层套着一层，我们现在有俩种方法实现优化，一种是用reduceRight,从右向左边执行。 一种是reduce，从左到右执行。
sum(toUpper(add('111','asd')))
我们先来看reduceRight方法，我们先来看看执行的代码 compose(add,toUpper,sum)('wangshao','666') 这里是执行俩个函数 ， 是一个函数套着一个函数 。外层接受函数数组fns，内层接受实参 ‘wangsaho’,‘666’ 。用pop方法取函数数组最后一位赋值给lastFn，lastFn 作为reducRight的初始值
然后开始从右向左遍历。此时的a是初始值，也就是最后一位add函数。b是第二位 ，toUpper函数。所以返回值就是b（a）。下一次a的值即为 toUpper(add()) ,b的值为sum（）。这样就实现完成了。
function compose(...fns) {
return function (...args) {
let lastFn = fns.pop();
return fns.reduceRight((a, b) => {
return b(a)
}, lastFn(...args))
}};
let r = compose(add, toUpper, sum)('wangshao', '666');
然后，我们将上面的函数用箭头函数优化一下，箭头函数可以将return和{}去掉。就简化为下面的代码。效果是一样的。
let compose = (...fns) => (...args) => { let lastFn = fns.pop(); return fns.reduceRight((a, b) => b(a), lastFn(...args)) };
最后我们来看看redcue方法，这个我们往浅的思考，就是第一个函数嵌套第二个函数。将结果再次嵌套第三个函数。首先最外层还是接受函数数组fns，遍历这个数组将结果返回，这里的a,b是和上面一样的。我们返回一个函数，这个函数是内层函数，参数有实参。 第二次a的值即为toUpper(add(..args)) 。
function compose(...fns) {
return fns.reduce((a, b) => {
return (...args) => {
return a(b(...args))
}
})}
将上面的函数用箭头函数优化一下，这个更加简短了
let compose = (...fns) => fns.reduce((a, b) => (...args) => a(b(...args)));
我们看到的这俩个方法，第一个是一年前redux的compose方法，第二个是现在redux的compose方法
然后我们继续手写reduce方法，这里在数组的原型上添加一个方法reduce 。 接受俩个参数，一个是回调，一个是初始值prev。然后开始遍历，次数是数组的长度，这里我们在原型上可以用this指向调用自身的数组。 首先我们做一个判断，判断初始值是否为空，是的话则callback的参数a为第一位，b为第二位，index = i+1,第四个参数则为数组本身。将返回的值赋给prev，并且让i++; 执行第二次函数，第二次走下面，callback的a是上一次放回的结果prev，b是现在的元素，index是i，第四个参数是数组本身不变。总的结果放回prev。可以看到，我这里想用forEach来实现。但是好像是改变不了遍历次数和索引的。所以最原生还是用for循环吧。
Array.prototype.reduce = function (callback, prev) {
for (let i = 0; i < this.length; i++) {
if (prev == undefined) {
prev = callback(this[i],this[i+1], i + 1, this);
i++;
} else {
prev = callback(prev,this[i], i , this);
}
}
// this.forEach((e, i) => {
// if (prev == undefined) {
// console.log(e,e+1)
// prev = callback(e,e+1, i + 1, this);
// } else {
// prev = callback(prev,e+1 , i+1, this);
// }
// })
return prev;};
let r = [1, 2, 3].reduce((a, b, index, current) => {
return a + b})
