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