JavaScript函數之高階函數

時間 2019-11-12

原文原文鏈接

高階函數（higher-order function）—若是一個函數接收的參數爲或返回的值爲函數，那麼咱們能夠將這個函數稱爲高階函數。衆所周知，JavaScript是一種弱類型的語言:JavaScript的函數既不對輸入的參數，也不對輸出值做強定義和類型檢查,那麼函數能夠成爲參數，也能夠成爲輸出值,這就體現了JavaScript對高階函數的原生支持。 javascript

1、參數爲函數的高階函數: html

function funcTest(f){
    //簡易判斷一下實參是否爲函數
    if((typeof f)=="function"){
        f();
    }
}
funcTest(function(){ });

這是一個簡易的將參數做爲函數的高階函數。在調用funcTest時，輸入一個函數做爲參數，在funcTest內部執行這個輸入的匿名函數,固然這樣的代碼片斷沒有什麼實際意義。 java

2、返回值爲函數的高階函數: 算法

function funcTest(){
   return function(){
   };
}
var f=funcTest();

調用funcTest返回一個函數。編程

3、一個複雜一點的例子: 數組

//Number類型相加
   function addInt(a,b){
       return parseInt(a)+parseInt(b);
   }
   //String類型相加
   function addString(a,b){
       return a.toString()+ b.toString();
   }
   function add(type){
       if(type==="string"){
           return addString;
       }else{
           return addInt;
       }
   }
   var data1=add("string")("1","2");     //12
   var data2=add("int")("1","2");        //3

以上示例實現了一個String類型相加與Number類型相加的分離。調用add函數若是輸入參數爲"string"時,輸出一個字符串拼接函數;若是輸入參數爲"int"則輸出數字相加函數。函數

4、高階函數的實際做用: 測試

上面的代碼示例基本說明什麼是高階函數，下面來看看高階函數與咱們實際編程有什麼關係: code

1,回調函數 htm

function callback(value){
    alert(value);       
}

function funcTest(value,f)
  //f實參檢測，檢查f是否爲函數
  if(typeof callback==='function'){
      f(value);
  }
}
funcTest('1',callback);        //1

示例在當調用funcTest時,funcTest內部會調用callback函數,即實現回調。

2,數據篩選與排序算法

var arr=[0,2,11,9,7,5];
    //排序算法
    function funcComp(a,b){
        if(a<b){
            return -1;
        }else if(a>b){
           return 1;
        }else{
            return 0;
        }
    }
    //過濾算法
    function funcFilter(item,index,array){
        return item>=5;
    }
    //數組順序排列
    arr.sort(funcComp);
    alert(arr.join(','));     	  //0,2,5,7,9,11
    
    //篩選數組
    var arrFilter=arr.filter(funcFilter);
        alert(arr.join(','))           //5,7,9,11

3,DOM元素事件定義

<html>
<head>
    <title>
    </title>
</head>
    <body>
        <input type="button" value="ClickMe" id="myBtn" >
        <script type="text/javascript">
             var btnClick=document.getElementById("myBtn");
             //測試環境爲FireFox
             btnClick. addEventListener("click",function(e){
                 alert("I’m a button!");                          //I’m a button
             },false);
        </script>
    </body>
</html>

在以上示例中，文檔中定義了一個id爲myBtn的按鈕，js腳本爲其添加了一個點擊事件,其中addEventListener的第二個參數是一個函數。

結束語:高階函數並非JavaScript的專利,但絕對是JavaScript編程的利器。高階函數實際上就是對基本算法的再度抽象,咱們能夠利用這一點，提升代碼的抽象度，實現最大限度的代碼重用，編寫出更簡潔、更利於重構的代碼。