函數式程式設計簡介
常見應用場景
1、ES6中的map、filter、reduce等函數
[1,2,3,4,5].map(x => x * 2).filter(x => x > 5).reduce((p,n) => p + n); 2、React類元件 -> 函數式元件+hooks、Vue3中的組合式API
3、RxJS、Lodash和Ramda等JS庫
4、中間件/插件，如Redux中的applyMiddleware中間件實作
const store = applyMiddleware(...middlewares)(createStore)(reducer, initialState) 
什麼是函數式程式設計
函數式程式設計是一種程式設計範式，它将程式抽象為函數和資料結構，通過函數調用來實作程式的功能，并且函數可以作為參數傳遞給其他函數。
在 JavaScript 中，函數式程式設計可以實作面向對象程式設計的一些功能，比如抽象、封裝、繼承和多态等。
它還可以使用高階函數、柯裡化、組合和延遲計算來實作函數式程式設計的功能。
函數式程式設計有哪些特性
函數是「一等公民」
•函數可以當做參數傳遞給其他函數，也可以作為函數的傳回值傳回（高階函數）。
惰性執行
•惰性執行是指在代碼中的某些函數調用，隻有在它們的傳回值被使用時才會被執行。
•它利用了延遲計算的技術，使得函數隻在被調用時才會執行，而不是在編寫代碼時就被執行。
•這樣可以提高性能，因為不需要無用的計算。
無副作用（純函數）
•函數的執行不會改變程式的外部狀态，也就是說函數的執行不會影響程式的其他部分。
•因為它隻是單純的計算結果，而不會産生其他的副作用。
常見函數式概念
柯裡化-currying
柯裡化函數是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，并且傳回接受餘下的參數而且傳回結果的新函數的技術。
函數表達：f(a, b, c) => f(a)(b)(c)
簡單實作（有興趣的同學可以研究下Lodash和Ramda庫中的實作）
// 函數柯裡化
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)) //6
console.log(currySum(1)(2,3)) //6
console.log(currySum(1,2)(3)) //6 管道-pipe
管道pipe函數是一個高階函數，它接受一系列函數作為參數，将函數串聯起來，一步步将上一步的輸出作為下一步的輸入，這樣可以更加高效地處理複雜的業務邏輯。
函數表達：pipe(f, g, t) => x => t(g(f(x))，進一步結合curry可以實作pipe(f)(g)(t) => x => t(g(f(x))
借助reduce簡單實作，支援異步和非異步函數
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
組合compose指的是将多個函數組合成一個函數，這樣一個函數的輸出就可以作為另一個函數的輸入，進而實作多個函數的鍊式調用。
組合compose可以提高代碼的可讀性和可維護性，減少重複代碼的出現，更加便捷的實作函數的複用。
函數表達：compose(f, g, t) => x => f(g(t(x))，進一步結合curry可以實作compose(f)(g)(t) => x => f(g(t(x))
借助reduceRight簡單實作，和pipe的差別隻是運算順序不同
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)); 函數式程式設計實踐
需求背景介紹
AgileBI線上報表是一款報表應用工具：易學易用，零代碼，通過簡單拖拽操作，制作中國式複雜報表，輕松實作報表的多樣展示、互動分析、資料導出等需求， 線上體驗
已有功能：線上報表中的每個單元格都可以配置相關的屬性：比如擴充方向、父格、單元格格式、過濾條件、條件屬性等
新增需求：需要支援批量設定單元格，其中【文本類型】單元格支援擴充方向、父格的設定；【字段類型】、【公示類型】單元格支援所有配置；
大緻設計思路
1.擷取目前批量設定中，所有的配置項資訊
2.為每個配置項設計一個處理器（高階函數）：主要處理【批量設定的配置資訊】和【目前單元格的配置資訊】合并或替換邏輯
3.通過管道的方式，加工每個單元格所有的配置項資訊
核心實作
•pipe函數
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.組合優于繼承。
作者：京東科技 牛志偉
内容來源：京東雲開發者社群