美文网首页
手写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