ES6 箭頭函數四種用法

箭頭函數 屬於匿名函數的一類，有四種語法

1、單一參數的單行箭頭函數

     const fn = foo => `哈哈，我是${foo}`;
    fn('測試');  //‘哈哈，我是測試’

    其中 fn是函數名， foo是傳的參數  => 以後的內容是函數返回的內容

     該函數至關於

     var fn = function(foo){

        return "哈哈，我是" + foo; 

    } 

     注意：其中 ${foo} 中包圍foo的是大括號，還有這種省去字符串拼接，直接將變量用 ${} 括起來的時候的 最外邊的 ·· 是ESC按鍵下邊的那個斜點，而不是enter鍵左邊的點

     

           let arr22 = ['s','wsa','e','re']; 
          arr22 = arr22.filter(item => item.length >=2)   //["wsa", "re"]

       若要使用單行箭頭函數直接返回一個對象字面量，請使用一個括號包裹改對象字面量，而不是直接使用大括號，不然ES6解析引擎會將其解析爲一個多行箭頭函數

       const ids = [1, 2, 3];
       const users = ids.map((id,index) => ({index:index, content: id})) 

       console.log(users)  //[{index: 0,content:1},{index: 1,content:2},{index: 2,content:3}]

 

2、多參數的單行箭頭函數

       const fn = (foo, bar) => foo + bar

       foo 與 bar 爲所傳的參數

          var as = ['2','3','1','6','4'];
         as.sort((a,b) => a-b>0)  //["1", "2", "3", "4", "6"]

3、多行箭頭函數

       一、單一參數狀況下  （與單行箭頭函數的區別就是給函數體增長一個{}）

             const fn = foo =>{

               if(typeof foo == 'number'){

                    return foo += 12;

               }else{ 

                 return   foo = foo + '測試單一參數的多行箭頭函數';

              }

           }

           fn(7);//19

 

      二、多個參數的狀況下

  

           const fn = (foo,bar) =>{

               if(typeof foo == 'number' && typeof bar == 'number'){

                    return foo += bar;

               }else{ 

                 return   foo = bar + '測試單一參數的多行箭頭函數';

              }

           }

           fn(7,8); //15

 

4、無參數箭頭函數 

         若是一個箭頭函數無參數傳入，則須要一對空的括號來表示空的參數列表

        const greet = () => 'hello ES6';