手写redux方法以及数组reduce方法

时间:2020-03-19 泽能人气:1

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）计算价格

这个是遍历后台传过来的价格和数量，有时候结构是比较复杂的。这里我们看看第一个，这样是不对的。第一次 100*2+100*2 . 将结果赋予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
})

有什么觉得奇怪的地方，互相讨论，学习。谢谢

加载全部内容