前端开发之函数式编程实践

常见应用场景

[1,2,3,4,5].map(x => x * 2).filter(x => x > 5).reduce((p,n) => p + n);

const store = applyMiddleware(...middlewares)(createStore)(reducer, initialState)

函数式编程有哪些特性

函数是「一等公民」

• 函数可以当做参数传递给其他函数，也可以作为函数的返回值返回（高阶函数）。

惰性执行

• 惰性执行是指在代码中的某些函数调用，只有在它们的返回值被使用时才会被执行。
• 它利用了延迟计算的技术，使得函数只在被调用时才会执行，而不是在编写代码时就被执行。
• 这样可以提高性能，因为不需要无用的计算。

无副作用（纯函数）

• 函数的执行不会改变程序的外部状态，也就是说函数的执行不会影响程序的其他部分。
• 因为它只是单纯的计算结果，而不会产生其他的副作用。

柯里化-currying

// 函数柯里化function curry(fn, args){    args = args || []  return function(...params){        let _args = [...args, ...params]        if(_args.length < fn.length){            return curry(fn, _args)        }    return fn.apply(this, _args)  }}function sum(a, b, c){  return a+b+c}// 自由组合参数const currySum = curry(sum)console.log(currySum(1)(2)(3)) //6console.log(currySum(1)(2,3)) //6console.log(currySum(1,2)(3)) //6

管道-pipe

export const pipe: any =    (...fns: Promise<Function>[]) =>    (input: any) =>        fns.reduce((chain: Promise<Function>, func: Function | Promise<Function> | any) => chain.then(func), Promise.resolve(input));

组合-compose

export const compose: any =    (...fns: Promise<Function>[]) =>    (input: any) =>        fns.reduceRight((chain: Promise<Function>, func: Function | Promise<Function> | any) => chain.then(func), Promise.resolve(input));

需求背景介绍

1. 获取当前批量设置中，所有的配置项信息
2. 为每个配置项设计一个处理器（高阶函数）：主要处理【批量设置的配置信息】和【当前单元格的配置信息】合并或替换逻辑
3. 通过管道的方式，加工每个单元格所有的配置项信息

核心实现

private pipe = (...args: any) => {    return (result: any, config?: any) => {        return args.reduce((acc: any, fn: any) => fn(acc, config), result);    };};

// 扩展方向替换private handleExpand(expandConf: string) {    return (conf: any) => {        if (expandConf) {            conf.expandDirection = expandConf;        }        return conf;    };}// 父行/父列替换private handleParentCell(columnParentCell: any, rowParentCell: any) {    return (conf: any) => {        if (columnParentCell?.parentSelectType) {            conf.columnParentCell = columnParentCell;        }        if (rowParentCell?.parentSelectType) {            conf.rowParentCell = rowParentCell;        }        return conf;    };}// 条件属性追加private handleCondition(conditionBatchConf: any) {    return (conf: any) => {        conf.conditionConf = this.mergeCondition(conf?.conditionConf || [], conditionBatchConf);        return conf;    };}// 批量修改private mergeCondition(c1: any, c2: any) {    for (let j = 0; j < c1.length; j++) {        // 批量删除        if (            c1[j]?.batchFlag &&            this.batchConf.conditionConf?.find((item: any) => item.uuid === c1[j]?.uuid) &&            !c2.find((item: any) => item.uuid === c1[j]?.uuid)        ) {            c1.splice(j, 1);        }    }    for (let j = 0; j < c1.length; j++) {        for (let i = 0; i < c2.length; i++) {            // 如果字段已存在则替换            if (c2[i]?.uuid === c1[j]?.uuid) {                c1.splice(j, 1);            }        }    }    return [...c1, ...c2];}//...

//...let handles: Array<any> = [];if (cell?.dataConf?.cellType === "文本") {    handles = [        this.handleExpand(conf.expandDirection),        this.handleParentCell(conf.columnParentCell, conf.rowParentCell)    ];} else if (cell?.dataConf?.cellType === "字段" || cell?.dataConf?.cellType === "公式") {    handles = [        this.handleExpand(conf.expandDirection),        this.handleParentCell(conf.columnParentCell, conf.rowParentCell),        this.handleFormat(conf.dataFormatConf),        this.handleFilter(conf.cellFilterConf),        this.handleCondition(conf.conditionConf)    ];}if (handles.length > 0) {    const mergeConf = this.pipe(...handles)(JSON.parse(JSON.stringify(cell.dataConf)));    //...}

1. 函数式编程可以可提高代码的可重用性，减少重复代码的开发时间；
2. 函数式编程可以提高代码的可读性，使得代码更容易理解和调试；
3. 函数式编程可以更容易实现函数组合，以帮助提高可维护性；
4. 组合优于继承；

2023 GOTC 全球开源技术峰会精彩回顾

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦