ES6 箭头函数四种用法

箭头函数 属于匿名函数的一类，有四种语法

一、单一参数的单行箭头函数

 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}]

二、多参数的单行箭头函数

   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"]

三、多行箭头函数

   1、单一参数情况下  （与单行箭头函数的区别就是给函数体增加一个{}）

         const fn = foo =>{

           if(typeof foo == 'number'){

                return foo += 12;

           }else{ 

             return   foo = foo + '测试单一参数的多行箭头函数';

          }

       }

       fn(7);//19



  2、多个参数的情况下



       const fn = (foo,bar) =>{

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

                return foo += bar;

           }else{ 

             return   foo = bar + '测试单一参数的多行箭头函数';

          }

       }

       fn(7,8); //15

四、无参数箭头函数

     如果一个箭头函数无参数传入，则需要一对空的括号来表示空的参数列表

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

转载：点击链接即可看见原文