JS基礎——高階函數

doodlewind 發布于2019-08-23 15:58 / 1014人閱讀

摘要：定義高階函數是至少滿足下面一個條件的函數接收一個或多個函數作為參數。當然我們也可以通過高階函數來自己實現我們可以通過封裝高階函數來復用和簡化我們的代碼。

定義

高階函數是至少滿足下面一個條件的函數：
1、接收一個或多個函數作為參數。比如filter函數
2、返回一個函數。比如bind函數
舉個例子：比如我們要篩數組[1,2,3,4,5]中大于3的所有元素，我們通常的實現方法為：

let newArr = [];
for(let i = 0,len = arr.length; i < len; i++){
    arr[i] > 3 && newArr.push(arr[i])
}

而使用數組filter方法的話，只需要 let newArr = arr.filter((item) => {return item > 3})。當然我們也可以通過高階函數來自己實現：

Array.prototype.myFilter = function (fn){
    let newArr = [];
    for(let i = 0,len = this.length; i < len; i++){
        fn(this[i]) && newArr.push(this[i])
    }
    return newArr;
}
[1,2,3,4,5].myFilter((item) => { return item > 3})

我們可以通過封裝高階函數來復用和簡化我們的代碼。

柯里化

柯里化是將一個多參數的函數轉換成多個單參數的函數，這個函數會返回一個函數去處理下一個參數。也就是把fn(a,b,c)轉換為newFn(a)(b)(c)這種形象。柯里化常見的應用有：參數復用、延遲計算。比如我們有個拼接接口地址的函數：

function getUrl(service,context,api){
    return service + context + api;
}
let loginUrl = getUrl("http://localhost:8080/","auth","/login")  
let logoutUrl = getUrl("http://localhost:8080/","auth","/logout")

每次前兩個參數的值都是一樣，我們可以柯里化來封裝下來達到參數復用：

function curry(fn){
    let args = Array.prototype.slice.call(arguments,1);    
    return function(){
        let innerArgs = Array.prototype.slice.call(arguments);
        let finalArgs = args.concat(innerArgs);
        if(finalArgs.length < fn.length){         //fn.length為函數的參數個數
            return curry.call(this,fn,...finalArgs)
        }else{
            return fn.apply(null,finalArgs)
        }
    }
}
var getAuthUrl = curry(getUrl,"http://localhost:8080/","auth");
let loginUrl = getAuthUrl("/login")
let logoutUrl = getAuthUrl("/logout")

組合函數

組合函數類似于管道，多個函數的執行時，上一個函數的返回值會自動傳入到第二個參數繼續執行。比如我們替換一個url中的參數：

function replaceToken(str){
    return str.replace(/{token}/g,"123455")
}
function replaceAccount(str){
    return str.replace(/{account}/g,"xuriliang")
}
replaceAccount(replaceToken("http://localhost/api/login?token={token}&account={account}"))

我們可以利用這種嵌套的寫法來實現，但如果嵌套過多，代碼可讀性就不是很好了。當然我們也可以在一個函數里分過程實現，不過這樣函數就不符合單一原則了。利用函數組合我們可以這樣寫：

function compose() {
    var args = arguments;
    var start = args.length - 1;
    return function() {
        var i = start;
        var result = args[start].apply(this, arguments);
        while (i--) result = args[i].call(this, result);
        return result;
    }
}
compose(replaceToken,replaceAccount)("http://localhost/api/login?token={token}&account={account}")

組合函數使得我們可以使用一些通用的函數，組合出各種復雜運算。這也是函數編程中pointfree的概念。

GPU云服務器云服務器高階函數高階函數應用基礎函數高階組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102594.html

【重溫基礎】21.高階函數

摘要：歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷重溫基礎閉包重溫基礎事件本章節復習的是中的高階函數，可以提高我們的開發效率。本文是重溫基礎系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】資料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基礎...

wua_wua2012 2019-08-23 15:05 評論0 收藏0
【重溫基礎】JS中的常用高階函數介紹

摘要：也可以直接調用內置方法常用高階函數方法的作用是接收一個函數作為參數，對數組中每個元素按順序調用一次傳入的函數并返回結果，不改變原數組，返回一個新數組。 Ps. 晚上加班到快十點，回來趕緊整理整理這篇文章，今天老大給我推薦了一篇文章，我從寫技術博客中收獲到了什么？- J_Knight_，感受也是很多，自己也需要慢慢養成記錄博客的習慣，即使起步艱難，難以堅持，但還是要讓自己加油加油。前...

gitmilk 2019-08-23 13:53 評論0 收藏0
JavaScript設計模式

摘要：可能因為先入為主，在編程之中，往往不由自主地以的邏輯編程思路設計模式進行開發。這是原型模式很重要的一條原則。關于閉包與內存泄露的問題，請移步原型模式閉包與高階函數應該可以說是設計模式的基礎要領吧。在下一章，再分享一下的幾種常用設計模式。前在學習使用Javascript之前，我的程序猿生涯里面僅有接觸的編程語言是C#跟Java——忽略當年在大學補考了N次的C與VB。從靜態編程語言，...

keke 2019-08-21 10:38 評論0 收藏0
JS 利用高階函數實現函數緩存(備忘模式)

摘要：所以這里可以利用高階函數的思想來實現一個簡單的緩存，我可以在函數內部用一個對象存儲輸入的參數，如果下次再輸入相同的參數，那就比較一下對象的屬性，把值從這個對象里面取出來。 1. 高階函數高階函數就是那種輸入參數里面有一個或者多個函數，輸出也是函數的函數，這個在js里面主要是利用閉包實現的，最簡單的就是經常看到的在一個函數內部輸出另一個函數，比如 var test = function...

hightopo 2019-08-22 11:22 評論0 收藏0