這些高階的函數(shù)技術(shù)，你掌握了么
本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。
在 JavaScript 中，函數(shù)為一等公民(First Class)，所謂的 “一等公民”，指的是函數(shù)與其他數(shù)據(jù)類型一樣，處于平等地位，可以賦值給其他變量，也可以作為參數(shù)，傳入另一個(gè)函數(shù)，或作為其它函數(shù)的返回值。
接下來(lái)阿寶哥將介紹與函數(shù)相關(guān)的一些技術(shù)，閱讀完本文，你將了解高階函數(shù)、函數(shù)組合、柯里化、偏函數(shù)、惰性函數(shù)和緩存函數(shù)的相關(guān)知識(shí)。
一、高階函數(shù)
在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中，高階函數(shù)是至少滿足下列一個(gè)條件的函數(shù)：
- 接受一個(gè)或多個(gè)函數(shù)作為輸入;
- 輸出一個(gè)函數(shù)。
接收一個(gè)或多個(gè)函數(shù)作為輸入，即函數(shù)作為參數(shù)傳遞。這種應(yīng)用場(chǎng)景，相信很多人都不會(huì)陌生。比如常用的 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"]
而輸出一個(gè)函數(shù)，即調(diào)用高階函數(shù)之后，會(huì)返回一個(gè)新的函數(shù)。我們?nèi)粘９ぷ髦?，常?jiàn)的 debounce 和 throttle 函數(shù)就滿足這個(gè)條件，因此它們也可以被稱為高階函數(shù)。
二、函數(shù)組合
函數(shù)組合就是將兩個(gè)或兩個(gè)以上的函數(shù)組合生成一個(gè)新函數(shù)的過(guò)程：
- const compose = function (f, g) {
- return function (x) {
- return f(g(x));
- };
- };
在以上代碼中，f 和 g 都是函數(shù)，而 x 是組合生成新函數(shù)的參數(shù)。
2.1 函數(shù)組合的作用
在項(xiàng)目開(kāi)發(fā)過(guò)程中，為了實(shí)現(xiàn)函數(shù)的復(fù)用，我們通常會(huì)盡量保證函數(shù)的職責(zé)單一，比如我們定義了以下功能函數(shù)：
在擁有以上功能函數(shù)的基礎(chǔ)上，我們就可以自由地對(duì)函數(shù)進(jìn)行組合，來(lái)實(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"]
在以上的代碼中，我們通過(guò) compose 函數(shù)實(shí)現(xiàn)了一個(gè) trimLowerCaseAndSplit 函數(shù)，該函數(shù)會(huì)對(duì)輸入的字符串，先執(zhí)行去空格處理，然后在把字符串中包含的字母統(tǒng)一轉(zhuǎn)換為小寫，最后在使用 , 分號(hào)對(duì)字符串進(jìn)行拆分。利用函數(shù)組合的技術(shù)，我們就可以很方便的實(shí)現(xiàn)一個(gè) trimUpperCaseAndSplit 函數(shù)。
2.2 組合函數(shù)的實(shí)現(xiàn)
- function compose(...funcs) {
- return function (x) {
- return funcs.reduce(function (arg, fn) {
- return fn(arg);
- }, x);
- };
- }
在以上的代碼中，我們通過(guò) Array.prototype.reduce 方法來(lái)實(shí)現(xiàn)組合函數(shù)的調(diào)度，對(duì)應(yīng)的執(zhí)行順序是從左到右。這個(gè)執(zhí)行順序與 Linux 管道或過(guò)濾器的執(zhí)行順序是一致的。
不過(guò)如果你想從右往左開(kāi)始執(zhí)行的話，這時(shí)你就可以使用 Array.prototype.reduceRight 方法來(lái)實(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ù)中含有多個(gè)參數(shù)的方法，并在只允許單一參數(shù)的框架中使用這些函數(shù)。這種轉(zhuǎn)變是現(xiàn)在被稱為 “柯里化” 的過(guò)程，在這個(gè)過(guò)程中我們能把一個(gè)帶有多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換成一系列的嵌套函數(shù)。它返回一個(gè)新函數(shù)，這個(gè)新函數(shù)期望傳入下一個(gè)參數(shù)。當(dāng)接收足夠的參數(shù)后，會(huì)自動(dòng)執(zhí)行原函數(shù)。
在理論計(jì)算機(jī)科學(xué)中，柯里化提供了簡(jiǎn)單的理論模型，比如：在只接受一個(gè)單一參數(shù)的 lambda 演算中，研究帶有多個(gè)參數(shù)的函數(shù)的方式。與柯里化相反的是 Uncurrying，一種使用匿名單參數(shù)函數(shù)來(lái)實(shí)現(xiàn)多參數(shù)函數(shù)的方法。比如：
- const func = function(a) {
- return function(b) {
- return a * a + b * b;
- }
- }
- func(3)(4); // 25
Uncurrying 不是本文的重點(diǎn)，接下來(lái)我們使用 Lodash 提供的 curry 函數(shù)來(lái)直觀感受一下，對(duì)函數(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)建一個(gè)函數(shù)，該函數(shù)接收 func 的參數(shù)，要么調(diào)用func返回的結(jié)果，如果 func 所需參數(shù)已經(jīng)提供，則直接返回 func 所執(zhí)行的結(jié)果。或返回一個(gè)函數(shù)，接受余下的func 參數(shù)的函數(shù)，可以使用 func.length 設(shè)置需要累積的參數(shù)個(gè)數(shù)。
來(lái)源：https://www.lodashjs.com/docs/lodash.curry
這里需要特別注意的是，在數(shù)學(xué)和理論計(jì)算機(jī)科學(xué)中的柯里化函數(shù)，一次只能傳遞一個(gè)參數(shù)。而對(duì)于 JavaScript 語(yǔ)言來(lái)說(shuō)，在實(shí)際應(yīng)用中的柯里化函數(shù)，可以傳遞一個(gè)或多個(gè)參數(shù)。好的，介紹完柯里化的相關(guān)知識(shí)，接下來(lái)我們來(lái)介紹柯里化的作用。
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");
在以上代碼中，首先我們定義了一個(gè) buildUri 函數(shù)，該函數(shù)可用于構(gòu)建 uri 地址。接著我們使用 buildUri 函數(shù)構(gòu)建了阿寶哥 Github 個(gè)人主頁(yè) 和 awesome-typescript 項(xiàng)目的地址。對(duì)于上述的 uri 地址，我們發(fā)現(xiàn) https 和 github.com 這兩個(gè)參數(shù)值是一樣的。
假如我們需要繼續(xù)構(gòu)建阿寶哥其他項(xiàng)目的地址，我們就需要重復(fù)設(shè)置相同的參數(shù)值。那么有沒(méi)有辦法簡(jiǎn)化這個(gè)流程呢?答案是有的，就是對(duì) 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 延遲計(jì)算/運(yùn)行
- const add = function (a, b) {
- return a + b;
- };
- const curried = _.curry(add);
- const plusOne = curried(1);
在以上代碼中，通過(guò)對(duì) add 函數(shù)執(zhí)行 “柯里化” 處理，我們可以實(shí)現(xiàn)延遲計(jì)算。好的，簡(jiǎn)單介紹完柯里化的作用，我們來(lái)動(dòng)手實(shí)現(xiàn)一個(gè)柯里化函數(shù)。
3.2 柯里化的實(shí)現(xiàn)
現(xiàn)在我們已經(jīng)知道了，當(dāng)柯里化后的函數(shù)接收到足夠的參數(shù)后，就會(huì)開(kāi)始執(zhí)行原函數(shù)。而如果接收到的參數(shù)不足的話，就會(huì)返回一個(gè)新的函數(shù)，用來(lái)接收余下的參數(shù)?；谏鲜龅奶攸c(diǎn)，我們就可以自己實(shí)現(xiàn)一個(gè) curry 函數(shù)：
- function curry(func) {
- return function curried(...args) {
- if (args.length >= func.length) { // 通過(guò)函數(shù)的length屬性，來(lái)獲取函數(shù)的形參個(gè)數(shù)
- return func.apply(this, args);
- } else {
- return function (...args2) {
- return curried.apply(this, args.concat(args2));
- };
- }
- }
- }
四、偏函數(shù)應(yīng)用
在計(jì)算機(jī)科學(xué)中，偏函數(shù)應(yīng)用(Partial Application)是指固定一個(gè)函數(shù)的某些參數(shù)，然后產(chǎn)生另一個(gè)更小元的函數(shù)。而所謂的元是指函數(shù)參數(shù)的個(gè)數(shù)，比如含有一個(gè)參數(shù)的函數(shù)被稱為一元函數(shù)。
偏函數(shù)應(yīng)用(Partial Application)很容易與函數(shù)柯里化混淆，它們之間的區(qū)別是：
偏函數(shù)應(yīng)用是固定一個(gè)函數(shù)的一個(gè)或多個(gè)參數(shù)，并返回一個(gè)可以接收剩余參數(shù)的函數(shù);
柯里化是將函數(shù)轉(zhuǎn)化為多個(gè)嵌套的一元函數(shù)，也就是每個(gè)函數(shù)只接收一個(gè)參數(shù)。
了解完偏函數(shù)與柯里化的區(qū)別之后，我們來(lái)使用 Lodash 提供的 partial 函數(shù)來(lái)了解一下它如何使用。
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)建一個(gè)函數(shù)。該函數(shù)調(diào)用 func，并傳入預(yù)設(shè)的 partials 參數(shù)。
來(lái)源：https://www.lodashjs.com/docs/lodash.partial
4.2 偏函數(shù)的實(shí)現(xiàn)
偏函數(shù)用于固定一個(gè)函數(shù)的一個(gè)或多個(gè)參數(shù)，并返回一個(gè)可以接收剩余參數(shù)的函數(shù)?；谏鲜龅奶攸c(diǎn)，我們就可以自己實(shí)現(xiàn)一個(gè) 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ù)
由于不同瀏覽器之間存在一些兼容性問(wèn)題，這導(dǎo)致了我們?cè)谑褂靡恍?Web API 時(shí)，需要進(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)聽(tīng) 的處理。代碼實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單，但存在一個(gè)問(wèn)題，即每次調(diào)用的時(shí)候都需要進(jìn)行判斷，很明顯這是不合理的。對(duì)于上述這個(gè)問(wèn)題，我們可以通過(guò)惰性載入函數(shù)來(lái)解決。
5.1 惰性載入函數(shù)
所謂的惰性載入就是當(dāng)?shù)?1 次根據(jù)條件執(zhí)行函數(shù)后，在第 2 次調(diào)用函數(shù)時(shí)，就不再檢測(cè)條件，直接執(zhí)行函數(shù)。要實(shí)現(xiàn)這個(gè)功能，我們可以在第 1 次條件判斷的時(shí)候，在滿足判斷條件的分支中覆蓋掉所調(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)聽(tīng)
- return addHandler(element, type, handler);
- }
除了使用以上的方式，我們也可以利用自執(zhí)行函數(shù)來(lái)實(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;
- };
- }
- })();
通過(guò)自執(zhí)行函數(shù)，在代碼加載階段就會(huì)執(zhí)行一次條件判斷，然后在對(duì)應(yīng)的條件分支中返回一個(gè)新的函數(shù)，用來(lái)實(shí)現(xiàn)對(duì)應(yīng)的處理邏輯。
六、緩存函數(shù)
緩存函數(shù)是將函數(shù)的計(jì)算結(jié)果緩存起來(lái)，當(dāng)下次以同樣的參數(shù)調(diào)用該函數(shù)時(shí)，直接返回已緩存的結(jié)果，而無(wú)需再次執(zhí)行函數(shù)。這是一種常見(jiàn)的以空間換時(shí)間的性能優(yōu)化手段。
要實(shí)現(xiàn)緩存函數(shù)的功能，我們可以把經(jīng)過(guò)序列化的參數(shù)作為 key，在把第 1 次調(diào)用后的結(jié)果作為 value 存儲(chǔ)到對(duì)象中。在每次執(zhí)行函數(shù)調(diào)用前，都先判斷緩存中是否含有對(duì)應(yīng)的 key，如果有的話，直接返回該 key 對(duì)應(yīng)的值。分析完緩存函數(shù)的實(shí)現(xiàn)思路之后，接下來(lái)我們來(lái)看一下具體如何實(shí)現(xiàn)：
- function memorize(fn) {
- const cache = Object.create(null); // 存儲(chǔ)緩存數(shù)據(jù)的對(duì)象
- return function (...args) {
- const _args = JSON.stringify(args);
- return cache[_args] || (cache[_args] = fn.apply(fn, args));
- };
- };
定義完 memorize 緩存函數(shù)之后，我們就可以這樣來(lái)使用它：
- let complexCalc = (a, b) => {
- // 執(zhí)行復(fù)雜的計(jì)算
- };
- let memoCalc = memorize(complexCalc);
- memoCalc(666, 888);
- memoCalc(666, 888); // 從緩存中獲取
七、參考資源
維基百科 - 高階函數(shù)
維基百科 - 柯里化
javascript-functional-programming-explained-partial-application-and-currying
