【JS】775- 這些高階的函數(shù)技術(shù)，你掌握了么
在 JavaScript 中，函數(shù)為一等公民（First Class），所謂的 “一等公民”，指的是函數(shù)與其他數(shù)據(jù)類型一樣，處于平等地位，可以賦值給其他變量，也可以作為參數(shù)，傳入另一個函數(shù)，或作為其它函數(shù)的返回值。
一、高階函數(shù)
在數(shù)學(xué)和計算機(jī)科學(xué)中，高階函數(shù)是至少滿足下列一個條件的函數(shù)：
接受一個或多個函數(shù)作為輸入； 輸出一個函數(shù)。
接收一個或多個函數(shù)作為輸入，即函數(shù)作為參數(shù)傳遞。這種應(yīng)用場景，相信很多人都不會陌生。比如常用的 Array.prototype.map() 和 Array.prototype.filter() 高階函數(shù)：
//?Array.prototype.map?高階函數(shù)
const?array?=?[1,?2,?3,?4];
const?map?=?array.map(x?=>?x?*?2);?//?[2,?4,?6,?8]
//?Array.prototype.filter?高階函數(shù)
const?words?=?['semlinker',?'kakuqo',?'lolo',?'abao'];
const?result?=?words.filter(word?=>?word.length?>?5);?//?["semlinker",?"kakuqo"]
而輸出一個函數(shù)，即調(diào)用高階函數(shù)之后，會返回一個新的函數(shù)。我們?nèi)粘９ぷ髦校Ｒ姷?debounce 和 throttle 函數(shù)就滿足這個條件，因此它們也可以被稱為高階函數(shù)。
二、函數(shù)組合
函數(shù)組合就是將兩個或兩個以上的函數(shù)組合生成一個新函數(shù)的過程：
const?compose?=?function?(f,?g)?{
??return?function?(x)?{
????return?f(g(x));
??};
};
在以上代碼中，f 和 g 都是函數(shù)，而 x 是組合生成新函數(shù)的參數(shù)。
2.1 函數(shù)組合的作用
在項(xiàng)目開發(fā)過程中，為了實(shí)現(xiàn)函數(shù)的復(fù)用，我們通常會盡量保證函數(shù)的職責(zé)單一，比如我們定義了以下功能函數(shù)：
在擁有以上功能函數(shù)的基礎(chǔ)上，我們就可以自由地對函數(shù)進(jìn)行組合，來實(shí)現(xiàn)特定的功能：
function?lowerCase(input)?{
??return?input?&&?typeof?input?===?"string"???input.toLowerCase()?:?input;
}
function?upperCase(input)?{
??return?input?&&?typeof?input?===?"string"???input.toUpperCase()?:?input;
}
function?trim(input)?{
??return?typeof?input?===?"string"???input.trim()?:?input;
}
function?split(input,?delimiter?=?",")?{
??return?typeof?input?===?"string"???input.split(delimiter)?:?input;
}
const?trimLowerCaseAndSplit?=?compose(trim,?lowerCase,?split);
trimLowerCaseAndSplit("?a,B,C?");?//?["a",?"b",?"c"]
在以上的代碼中，我們通過 compose 函數(shù)實(shí)現(xiàn)了一個 trimLowerCaseAndSplit 函數(shù)，該函數(shù)會對輸入的字符串，先執(zhí)行去空格處理，然后在把字符串中包含的字母統(tǒng)一轉(zhuǎn)換為小寫，最后在使用 , 分號對字符串進(jìn)行拆分。利用函數(shù)組合的技術(shù)，我們就可以很方便的實(shí)現(xiàn)一個 trimUpperCaseAndSplit 函數(shù)。
2.2 組合函數(shù)的實(shí)現(xiàn)
function?compose(...funcs)?{
??return?function?(x)?{
????return?funcs.reduce(function?(arg,?fn)?{
??????return?fn(arg);
????},?x);
??};
}
在以上的代碼中，我們通過 Array.prototype.reduce 方法來實(shí)現(xiàn)組合函數(shù)的調(diào)度，對應(yīng)的執(zhí)行順序是從左到右。這個執(zhí)行順序與 Linux 管道或過濾器的執(zhí)行順序是一致的。
不過如果你想從右往左開始執(zhí)行的話，這時你就可以使用 Array.prototype.reduceRight 方法來實(shí)現(xiàn)。
其實(shí)每當(dāng)看到 compose 函數(shù)，阿寶哥就情不自禁想到 “如何更好地理解中間件和洋蔥模型” 這篇文章中介紹的 compose 函數(shù)：
function?compose(middleware)?{
??//?省略部分代碼
??return?function?(context,?next)?{
????let?index?=?-1;
????return?dispatch(0);
????function?dispatch(i)?{
??????if?(i?<=?index)
????????return?Promise.reject(new?Error("next()?called?multiple?times"));
??????index?=?i;
??????let?fn?=?middleware[i];
??????if?(i?===?middleware.length)?fn?=?next;
??????if?(!fn)?return?Promise.resolve();
??????try?{
????????return?Promise.resolve(fn(context,?dispatch.bind(null,?i?+?1)));
??????}?catch?(err)?{
????????return?Promise.reject(err);
??????}
????}
??};
}
利用上述的 compose 函數(shù)，我們就可以實(shí)現(xiàn)以下通用的任務(wù)處理流程：
三、柯里化
柯里化（Currying）是一種處理函數(shù)中含有多個參數(shù)的方法，并在只允許單一參數(shù)的框架中使用這些函數(shù)。這種轉(zhuǎn)變是現(xiàn)在被稱為 “柯里化” 的過程，在這個過程中我們能把一個帶有多個參數(shù)的函數(shù)轉(zhuǎn)換成一系列的嵌套函數(shù)。它返回一個新函數(shù)，這個新函數(shù)期望傳入下一個參數(shù)。當(dāng)接收足夠的參數(shù)后，會自動執(zhí)行原函數(shù)。
在理論計算機(jī)科學(xué)中，柯里化提供了簡單的理論模型，比如：在只接受一個單一參數(shù)的 lambda 演算中，研究帶有多個參數(shù)的函數(shù)的方式。與柯里化相反的是 Uncurrying，一種使用匿名單參數(shù)函數(shù)來實(shí)現(xiàn)多參數(shù)函數(shù)的方法。比如：
const?func?=?function(a)?{
??return?function(b)?{
????return?a?*?a?+?b?*?b;
??}
}
func(3)(4);?//?25
Uncurrying 不是本文的重點(diǎn)，接下來我們使用 Lodash 提供的 curry 函數(shù)來直觀感受一下，對函數(shù)進(jìn)行 “柯里化” 處理之后產(chǎn)生的變化：
const?abc?=?function(a,?b,?c)?{
??return?[a,?b,?c];
};
?
const?curried?=?_.curry(abc);
?
curried(1)(2)(3);?//?=>?[1,?2,?3]
curried(1,?2)(3);?//?=>?[1,?2,?3]
curried(1,?2,?3);?//?=>?[1,?2,?3]
_.curry(func, [arity=func.length])
創(chuàng)建一個函數(shù)，該函數(shù)接收
func的參數(shù)，要么調(diào)用func返回的結(jié)果，如果func所需參數(shù)已經(jīng)提供，則直接返回func所執(zhí)行的結(jié)果?；蚍祷匾粋€函數(shù)，接受余下的func參數(shù)的函數(shù)，可以使用func.length設(shè)置需要累積的參數(shù)個數(shù)。
來源：https://www.lodashjs.com/docs/lodash.curry
這里需要特別注意的是，在數(shù)學(xué)和理論計算機(jī)科學(xué)中的柯里化函數(shù)，一次只能傳遞一個參數(shù)。而對于 JavaScript 語言來說，在實(shí)際應(yīng)用中的柯里化函數(shù)，可以傳遞一個或多個參數(shù)。好的，介紹完柯里化的相關(guān)知識，接下來我們來介紹柯里化的作用。
3.1 柯里化的作用
3.1.1 參數(shù)復(fù)用
function?buildUri(scheme,?domain,?path)?{
??return?`${scheme}://${domain}/${path}`;
}
const?profilePath?=?buildUri("https",?"github.com",?"semlinker/semlinker");
const?awesomeTsPath?=?buildUri("https",?"github.com",?"semlinker/awesome-typescript");
在以上代碼中，首先我們定義了一個 buildUri 函數(shù)，該函數(shù)可用于構(gòu)建 uri 地址。接著我們使用 buildUri 函數(shù)構(gòu)建了阿寶哥 Github 個人主頁 和 awesome-typescript 項(xiàng)目的地址。對于上述的 uri 地址，我們發(fā)現(xiàn) https 和 github.com 這兩個參數(shù)值是一樣的。
假如我們需要繼續(xù)構(gòu)建阿寶哥其他項(xiàng)目的地址，我們就需要重復(fù)設(shè)置相同的參數(shù)值。那么有沒有辦法簡化這個流程呢？答案是有的，就是對 buildUri 函數(shù)執(zhí)行柯里化處理，具體處理方式如下：
const?_?=?require("lodash");
const?buildUriCurry?=?_.curry(buildUri);
const?myGithubPath?=?buildUriCurry("https",?"github.com");
const?profilePath?=?myGithubPath("semlinker/semlinker");
const?awesomeTsPath?=?myGithubPath("semlinker/awesome-typescript");
3.1.2 延遲計算/運(yùn)行
const?add?=?function?(a,?b)?{
??return?a?+?b;
};
const?curried?=?_.curry(add);
const?plusOne?=?curried(1);
在以上代碼中，通過對 add 函數(shù)執(zhí)行 “柯里化” 處理，我們可以實(shí)現(xiàn)延遲計算。好的，簡單介紹完柯里化的作用，我們來動手實(shí)現(xiàn)一個柯里化函數(shù)。
3.2 柯里化的實(shí)現(xiàn)
現(xiàn)在我們已經(jīng)知道了，當(dāng)柯里化后的函數(shù)接收到足夠的參數(shù)后，就會開始執(zhí)行原函數(shù)。而如果接收到的參數(shù)不足的話，就會返回一個新的函數(shù)，用來接收余下的參數(shù)?；谏鲜龅奶攸c(diǎn)，我們就可以自己實(shí)現(xiàn)一個 curry 函數(shù)：
function?curry(func)?{
??return?function?curried(...args)?{
????if?(args.length?>=?func.length)?{?//?通過函數(shù)的length屬性，來獲取函數(shù)的形參個數(shù)
??????return?func.apply(this,?args);
????}?else?{
??????return?function?(...args2)?{
????????return?curried.apply(this,?args.concat(args2));
??????};
????}
??}
}
四、偏函數(shù)應(yīng)用
在計算機(jī)科學(xué)中，偏函數(shù)應(yīng)用（Partial Application）是指固定一個函數(shù)的某些參數(shù)，然后產(chǎn)生另一個更小元的函數(shù)。而所謂的元是指函數(shù)參數(shù)的個數(shù)，比如含有一個參數(shù)的函數(shù)被稱為一元函數(shù)。
偏函數(shù)應(yīng)用（Partial Application）很容易與函數(shù)柯里化混淆，它們之間的區(qū)別是：
偏函數(shù)應(yīng)用是固定一個函數(shù)的一個或多個參數(shù)，并返回一個可以接收剩余參數(shù)的函數(shù)； 柯里化是將函數(shù)轉(zhuǎn)化為多個嵌套的一元函數(shù)，也就是每個函數(shù)只接收一個參數(shù)。
了解完偏函數(shù)與柯里化的區(qū)別之后，我們來使用 Lodash 提供的 partial 函數(shù)來了解一下它如何使用。
4.1 偏函數(shù)的使用
function?buildUri(scheme,?domain,?path)?{
??return?`${scheme}://${domain}/${path}`;
}
const?myGithubPath?=?_.partial(buildUri,?"https",?"github.com");
const?profilePath?=?myGithubPath("semlinker/semlinker");
const?awesomeTsPath?=?myGithubPath("semlinker/awesome-typescript");
_.partial(func, [partials])
創(chuàng)建一個函數(shù)。該函數(shù)調(diào)用
func，并傳入預(yù)設(shè)的partials參數(shù)。
來源：https://www.lodashjs.com/docs/lodash.partial
4.2 偏函數(shù)的實(shí)現(xiàn)
偏函數(shù)用于固定一個函數(shù)的一個或多個參數(shù)，并返回一個可以接收剩余參數(shù)的函數(shù)。基于上述的特點(diǎn)，我們就可以自己實(shí)現(xiàn)一個 partial 函數(shù)：
function?partial(fn)?{
??let?args?=?[].slice.call(arguments,?1);
??return?function?()?{
????const?newArgs?=?args.concat([].slice.call(arguments));
????return?fn.apply(this,?newArgs);
??};
}
4.3 偏函數(shù)實(shí)現(xiàn) vs 柯里化實(shí)現(xiàn)
五、惰性函數(shù)
由于不同瀏覽器之間存在一些兼容性問題，這導(dǎo)致了我們在使用一些 Web API 時，需要進(jìn)行判斷，比如：
function?addHandler(element,?type,?handler)?{
??if?(element.addEventListener)?{
????element.addEventListener(type,?handler,?false);
??}?else?if?(element.attachEvent)?{
????element.attachEvent("on"?+?type,?handler);
??}?else?{
????element["on"?+?type]?=?handler;
??}
}
在以上代碼中，我們實(shí)現(xiàn)了不同瀏覽器 添加事件監(jiān)聽?的處理。代碼實(shí)現(xiàn)起來也很簡單，但存在一個問題，即每次調(diào)用的時候都需要進(jìn)行判斷，很明顯這是不合理的。對于上述這個問題，我們可以通過惰性載入函數(shù)來解決。
5.1 惰性載入函數(shù)
所謂的惰性載入就是當(dāng)?shù)?1 次根據(jù)條件執(zhí)行函數(shù)后，在第 2 次調(diào)用函數(shù)時，就不再檢測條件，直接執(zhí)行函數(shù)。要實(shí)現(xiàn)這個功能，我們可以在第 1 次條件判斷的時候，在滿足判斷條件的分支中覆蓋掉所調(diào)用的函數(shù)，具體的實(shí)現(xiàn)方式如下所示：
function?addHandler(element,?type,?handler)?{
??if?(element.addEventListener)?{
????addHandler?=?function?(element,?type,?handler)?{
??????element.addEventListener(type,?handler,?false);
????};
??}?else?if?(element.attachEvent)?{
????addHandler?=?function?(element,?type,?handler)?{
??????element.attachEvent("on"?+?type,?handler);
????};
??}?else?{
????addHandler?=?function?(element,?type,?handler)?{
??????element["on"?+?type]?=?handler;
????};
??}
??//?保證首次調(diào)用能正常執(zhí)行監(jiān)聽
??return?addHandler(element,?type,?handler);
}
除了使用以上的方式，我們也可以利用自執(zhí)行函數(shù)來實(shí)現(xiàn)惰性載入：
const?addHandler?=?(function?()?{
??if?(document.addEventListener)?{
????return?function?(element,?type,?handler)?{
??????element.addEventListener(type,?handler,?false);
????};
??}?else?if?(document.attachEvent)?{
????return?function?(element,?type,?handler)?{
??????element.attachEvent("on"?+?type,?handler);
????};
??}?else?{
????return?function?(element,?type,?handler)?{
??????element["on"?+?type]?=?handler;
????};
??}
})();
通過自執(zhí)行函數(shù)，在代碼加載階段就會執(zhí)行一次條件判斷，然后在對應(yīng)的條件分支中返回一個新的函數(shù)，用來實(shí)現(xiàn)對應(yīng)的處理邏輯。
六、緩存函數(shù)
緩存函數(shù)是將函數(shù)的計算結(jié)果緩存起來，當(dāng)下次以同樣的參數(shù)調(diào)用該函數(shù)時，直接返回已緩存的結(jié)果，而無需再次執(zhí)行函數(shù)。這是一種常見的以空間換時間的性能優(yōu)化手段。
要實(shí)現(xiàn)緩存函數(shù)的功能，我們可以把經(jīng)過序列化的參數(shù)作為 key，在把第 1 次調(diào)用后的結(jié)果作為 ?value 存儲到對象中。在每次執(zhí)行函數(shù)調(diào)用前，都先判斷緩存中是否含有對應(yīng)的 key，如果有的話，直接返回該 key 對應(yīng)的值。分析完緩存函數(shù)的實(shí)現(xiàn)思路之后，接下來我們來看一下具體如何實(shí)現(xiàn)：
function?memorize(fn)?{
??const?cache?=?Object.create(null);?//?存儲緩存數(shù)據(jù)的對象
??return?function?(...args)?{
????const?_args?=?JSON.stringify(args);
????return?cache[_args]?||?(cache[_args]?=?fn.apply(fn,?args));
??};
};
定義完 memorize 緩存函數(shù)之后，我們就可以這樣來使用它：
let?complexCalc?=?(a,?b)?=>?{
??//?執(zhí)行復(fù)雜的計算
};
let?memoCalc?=?memorize(complexCalc);
memoCalc(666,?888);
memoCalc(666,?888);?//?從緩存中獲取
七、參考資源
維基百科 - 高階函數(shù) 維基百科 - 柯里化 javascript-functional-programming-explained-partial-application-and-currying