美文网首页
手写lodash中flowRight,curry,memoize

手写lodash中flowRight,curry,memoize

作者: 笨鸟先飞不 | 来源:发表于2020-11-28 17:02 被阅读0次

    手写flowRight

    const _ = require('lodash');
    /**
     * flowRight传入参数是不定的,所以用rest传参代替;
     * reduce方法在这里使用很重要;
    */
    // p普通函数写法
    function flowRight(...args) {
        return function(value) {
            return args.reverse().reduce(function(accunt, fn) {
                return fn(accunt);
            }, value);
        }
    }
    // ES6 的写法
    const flowRight = (...args) => {
        return (value) => {
            args.reverse().reduce((accunt, fn) => fn(accunt), value);
        }
    }
    // 测试
    const trace = _.curry((tag, v) => {
        console.log(tag + v);
        return v;
    })
    
    const arr = ['one', 'two', 'four'];
    const fn = _.flowRight(_.toUpper, trace('first后的值'), _.first, trace('reverse后的值:'), _.reverse);
    console.log(fn(arr));
    

    手写curry函数

    function getSum(n1, n2, n3) {
        return n1 + n2 + n3;
    }
    /**
     * fn 传入需要柯里化函数作为参数
    */
    
    // 普通函数写法
    function curry(fn) {
        return function curried(...args) {
            // 如传参个数小于fn所需参数,则返回一个函数用于等待接受下一个参数
            // ------fn.length用于获取fn函数所需参数总个数------
            if (args.length < fn.length) {
                return function () {
                    return curried(...args.concat(Array.from(arguments))); // 前面的...是将组合后的参数数组转换成参数列表,否则要出错
                }
            }
            // 如果参数满足fn传参个数
            return fn.apply(fn, args); // 或者使用apply调用fn函数,apply可以接收一个参数数组
        }
    }
    
    // // ES6 的写法
    const curry = (fn) => {
        // 这里不能是匿名函数,下面有递归调用,所以这里不适合用箭头函数
        return function curried(...args) {
            if(args.length < fn.length) {
                return function() { // 箭头函数没有自身的this,arguments,super或new.target,这里需要使用arguments所以不能使用箭头函数
                    return curried(...[...args, ...Array.from(arguments)]); // 这里使用es6的数组组合方式
                }
            }
            return fn(...args); // args是一个数组,使用...将其转换成参数列表
        }
    }
    // 测试
    const curriedFn = curry(getSum);
    console.log(curriedFn(1, 2, 3));
    console.log(curriedFn(1)(2, 3));
    console.log(curriedFn(1, 2)(3));
    console.log(curriedFn(1)(2)(3));
    

    手写memoize函数

    function getArea(r) {
        console.log('输出半径', r);
        return Math.PI * r * r;
    }
    
    /**
     * fn: 必定是传入纯函数,相同输入有相同输出才能对其结果进行缓存
     * 好处:可提高js代码执行性能
    */
    
    // 普通写法
    function memoize(fn) {
        // 用于缓存
        const cache = {};
        return function () {
            const key = JSON.stringify(arguments); // 将参数转换成字符串作为缓存键值key;因为纯函数是相同输入必定有相同输出
            // cache[key] = cache[key] || fn.apply(fn, arguments);
            cache[key] = cache[key] || fn(...arguments);
            return cache[key];
        }
    }
    
    // ES6写法
    const memoize = (fn) => {
        const cache = {};
        return function () {
            const key = JSON.stringify(arguments); // 将参数转换成字符串作为缓存键值key;因为纯函数是相同输入必定有相同输出
            cache[key] = cache[key] || fn(...arguments);
            return cache[key];
        }
    }
    
    const getAreaWithMemoize = memoize(getArea);
    console.log(getAreaWithMemoize(5));
    console.log(getAreaWithMemoize(5));
    console.log(getAreaWithMemoize(5));
    console.log(getAreaWithMemoize(5));
    

    相关文章

      网友评论

          本文标题:手写lodash中flowRight,curry,memoize

          本文链接:https://www.haomeiwen.com/subject/oozqwktx.html