這篇文章主要介紹“如何掌握高階的函數(shù)技術(shù)”，在日常操作中，相信很多人在如何掌握高階的函數(shù)技術(shù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何掌握高階的函數(shù)技術(shù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)是專業(yè)的平昌網(wǎng)站建設(shè)公司，平昌接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行平昌網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

一、高階函數(shù)

在數(shù)學(xué)和計算機科學(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ù)組合的作用

在項目開發(fā)過程中，為了實現(xiàn)函數(shù)的復(fù)用，我們通常會盡量保證函數(shù)的職責單一，比如我們定義了以下功能函數(shù)：

在擁有以上功能函數(shù)的基礎(chǔ)上，我們就可以自由地對函數(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ù)實現(xiàn)了一個 trimLowerCaseAndSplit  函數(shù)，該函數(shù)會對輸入的字符串，先執(zhí)行去空格處理，然后在把字符串中包含的字母統(tǒng)一轉(zhuǎn)換為小寫，最后在使用 ,  分號對字符串進行拆分。利用函數(shù)組合的技術(shù)，我們就可以很方便的實現(xiàn)一個 trimUpperCaseAndSplit 函數(shù)。

2.2 組合函數(shù)的實現(xiàn)

function compose(...funcs) {   return function (x) {     return funcs.reduce(function (arg, fn) {       return fn(arg);     }, x);   }; }

在以上的代碼中，我們通過 Array.prototype.reduce 方法來實現(xiàn)組合函數(shù)的調(diào)度，對應(yīng)的執(zhí)行順序是從左到右。這個執(zhí)行順序與 Linux  管道或過濾器的執(zhí)行順序是一致的。

不過如果你想從右往左開始執(zhí)行的話，這時你就可以使用 Array.prototype.reduceRight 方法來實現(xiàn)。

其實每當看到 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ù)，我們就可以實現(xiàn)以下通用的任務(wù)處理流程：

三、柯里化

柯里化(Currying)是一種處理函數(shù)中含有多個參數(shù)的方法，并在只允許單一參數(shù)的框架中使用這些函數(shù)。這種轉(zhuǎn)變是現(xiàn)在被稱為 “柯里化”  的過程，在這個過程中我們能把一個帶有多個參數(shù)的函數(shù)轉(zhuǎn)換成一系列的嵌套函數(shù)。它返回一個新函數(shù)，這個新函數(shù)期望傳入下一個參數(shù)。當接收足夠的參數(shù)后，會自動執(zhí)行原函數(shù)。

在理論計算機科學(xué)中，柯里化提供了簡單的理論模型，比如：在只接受一個單一參數(shù)的 lambda 演算中，研究帶有多個參數(shù)的函數(shù)的方式。與柯里化相反的是  Uncurrying，一種使用匿名單參數(shù)函數(shù)來實現(xiàn)多參數(shù)函數(shù)的方法。比如：

const func = function(a) {   return function(b) {     return a * a + b * b;   } }  func(3)(4); // 25

Uncurrying 不是本文的重點，接下來我們使用 Lodash 提供的 curry 函數(shù)來直觀感受一下，對函數(shù)進行 “柯里化” 處理之后產(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é)和理論計算機科學(xué)中的柯里化函數(shù)，一次只能傳遞一個參數(shù)。而對于 JavaScript  語言來說，在實際應(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 項目的地址。對于上述的 uri 地址，我們發(fā)現(xiàn) https 和 github.com  這兩個參數(shù)值是一樣的。

假如我們需要繼續(xù)構(gòu)建阿寶哥其他項目的地址，我們就需要重復(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 延遲計算/運行

const add = function (a, b) {   return a + b; };  const curried = _.curry(add); const plusOne = curried(1);

在以上代碼中，通過對 add 函數(shù)執(zhí)行 “柯里化” 處理，我們可以實現(xiàn)延遲計算。好的，簡單介紹完柯里化的作用，我們來動手實現(xiàn)一個柯里化函數(shù)。

3.2 柯里化的實現(xiàn)

現(xiàn)在我們已經(jīng)知道了，當柯里化后的函數(shù)接收到足夠的參數(shù)后，就會開始執(zhí)行原函數(shù)。而如果接收到的參數(shù)不足的話，就會返回一個新的函數(shù)，用來接收余下的參數(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)用

在計算機科學(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ù)。

4.2 偏函數(shù)的實現(xiàn)

偏函數(shù)用于固定一個函數(shù)的一個或多個參數(shù)，并返回一個可以接收剩余參數(shù)的函數(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ù)實現(xiàn) vs 柯里化實現(xiàn)

五、惰性函數(shù)

由于不同瀏覽器之間存在一些兼容性問題，這導(dǎo)致了我們在使用一些 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)起來也很簡單，但存在一個問題，即每次調(diào)用的時候都需要進行判斷，很明顯這是不合理的。對于上述這個問題，我們可以通過惰性載入函數(shù)來解決。

5.1 惰性載入函數(shù)

所謂的惰性載入就是當?shù)?1 次根據(jù)條件執(zhí)行函數(shù)后，在第 2 次調(diào)用函數(shù)時，就不再檢測條件，直接執(zhí)行函數(shù)。要實現(xiàn)這個功能，我們可以在第 1  次條件判斷的時候，在滿足判斷條件的分支中覆蓋掉所調(diào)用的函數(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ù)來實現(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ù)，用來實現(xiàn)對應(yīng)的處理邏輯。

六、緩存函數(shù)

緩存函數(shù)是將函數(shù)的計算結(jié)果緩存起來，當下次以同樣的參數(shù)調(diào)用該函數(shù)時，直接返回已緩存的結(jié)果，而無需再次執(zhí)行函數(shù)。這是一種常見的以空間換時間的性能優(yōu)化手段。

要實現(xiàn)緩存函數(shù)的功能，我們可以把經(jīng)過序列化的參數(shù)作為 key，在把第 1 次調(diào)用后的結(jié)果作為 value  存儲到對象中。在每次執(zhí)行函數(shù)調(diào)用前，都先判斷緩存中是否含有對應(yīng)的 key，如果有的話，直接返回該 key  對應(yīng)的值。分析完緩存函數(shù)的實現(xiàn)思路之后，接下來我們來看一下具體如何實現(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); // 從緩存中獲取

到此，關(guān)于“如何掌握高階的函數(shù)技術(shù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文題目：如何掌握高階的函數(shù)技術(shù)
文章來源：http://www.chinadenli.net/article10/gpccgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、關(guān)鍵詞優(yōu)化、企業(yè)建站、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)