JavaScript前端面試組合函數(shù)
經(jīng)歷過一些列的函數(shù)式編程思想的學習總結,一些重要的高階函數(shù)的學習,以及前一段時間關于 RxJS 的學習。
我們再回看一次 —— 組合函數(shù) compose
本瓜越來越覺得,【易讀】的代碼應該是將聲明和調用分開來的。根據(jù)不同的流程,用函數(shù)組合的方式、也可以說它是管道、或者說是鏈式調用,將聲明的函數(shù)組合起來,再等待時機進行調用。
如果沒有組合函數(shù) compose,函數(shù)連續(xù)調用將會是嵌套的:
const multi10 = function(x) { return x * 10; }
const toStr = function(x) { return `${x}`; }
const compute = function(x){
return toStr(multi10(x))
}
compute(8)
fn3(fn2(fn1(fn0(x)))),層層嵌套是很容易看錯的;
所以,必須嘗試將調用層級扁平化!
compose 應運而生,它大概就會是這樣:
const compose = function(f,g) {
return function(x) {
return f(g(x))
}
}
let compute = compose(toStr, multi10) compute(8)
通過使用compose函數(shù)我們可以把兩個函數(shù)組合成一個函數(shù),這讓代碼從右往左執(zhí)行,而不是層層計算某個函數(shù)的結果作為另一個函數(shù)的參數(shù),這樣代碼也更加直觀。
當然,我們不能讓 compose 限制于只能處理連續(xù)調用兩個函數(shù),于是支持任意參數(shù)版本的 compose 將是這樣的:
function compose(...funs){
return (x) =>funs.reduce((acc, fun) => fun(acc), x)
}
通過函數(shù)組合,我們可以可以聲明式地指定函數(shù)間的關系,代碼的可讀性也大大提高,也方便我們后續(xù)對代碼進行擴展跟重構;
而且在React里面,當我們的高階組件變多的時候,一個套著一個就很難看,我們就可以通過類似的方式來讓我們的高階組件層級扁平化;
這就是最最原始的 compose,以及它被提出的原始動機~~
以上就是JavaScript前端面試組合函數(shù)的詳細內容,更多關于JavaScript組合函數(shù)的資料請關注腳本之家其它相關文章!
相關文章
前端框架ECharts?dataset對數(shù)據(jù)可視化的高級管理
這篇文章主要為大家介紹了前端框架ECharts?dataset對數(shù)據(jù)可視化的高級管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
JavaScript?與?TypeScript之間的聯(lián)系
這篇文章主要介紹了?JavaScript?與?TypeScript之間的聯(lián)系,JavaScript,也稱為?JS,是一種符合?ECMAScript?規(guī)范的編程語言。這是一個高級別的、通常是即時編譯的、多范式的。TypeScript?是一種強類型、面向對象的編譯語言,更多消息內容,需要的朋友可以參考一下下面文章內容2021-11-11

