前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS compose 函数实现

JS compose 函数实现

作者头像
蓓蕾心晴
发布2022-08-23 15:38:49
4340
发布2022-08-23 15:38:49
举报
文章被收录于专栏:前端小叙前端小叙
代码语言:javascript
复制
两种实现方案
实现原理:
1. 如果传入的 function 为空,则直接返回 参数数组
2. 如果传入的 function 只有一个,则直接调用第一个
3. 否则从右向左依次执行
4. 原理为:compose中传入多个函数,会依次从右向左执行,将右面函数的执行结果作为参数传入左边一个函数中
代码语言:javascript
复制
// 方式一
function compose(...funcs) {
    let length = funcs.length;
    if (length === 0) {
        return (...args) => args;
    }
    if (length === 1) {
        return funcs[0];
    }
    return funcs.reduce((a, b) => {
        return (...args) => {
            return a(b(...args));
        };
    });
}
// 方式二
function compose(...funcs) {
    //=>funcs:传递的函数集合
    return function proxy(...args) {
        //=>args:第一次调用函数传递的参数集合
        let len = funcs.length;
        if (len === 0) {
            //=>一个函数都不需要执行,直接返回ARGS
            return args;
        }
        if (len === 1) {
            //=>只需要执行一个函数,把函数执行,把其结果返回即可
            return funcs[0](...args);
        }
        return funcs.reduceRight((x, y) => {
            return typeof x === "function" ? y(x(...args)) : y(x);
        });
        // return funcs.reverse().reduce((x, y) => {
        //     return typeof x === "function" ? y(x(...args)) : y(x);
        // });
    };
}

// 方式三:
// 递归
function compose(...funcs) {
    if (funcs.length === 0) {
        return (...args) => args;
    }
    if (funcs.length === 1) {
        return funcs[0];
    }
    let count = funcs.length - 1;
    let result = undefined;
    return function fn(...args) {
        if (count < 0) {
            return result;
        }
        result = funcs[count--](...args);
        return fn(result);
    };
}

const fn1 = (x) => x + 10;
const fn2 = (x) => x * 10;
const fn3 = (x) => x - 10;
console.log(compose(fn3, fn2, fn1)(1)); // 100
console.log(compose()(1)); // [1]
console.log(compose(fn1)(1)); // 11

参考链接 https://blog.csdn.net/MRlaochen/article/details/120437542

https://www.bilibili.com/video/BV1h5411N7eq?p=2&vd_source=194f8fed26c3607cae375c20d6e308f0

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档