zoukankan      html  css  js  c++  java
  • 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';

  • 相关阅读:
    hdu 4534 郑厂长系列故事——新闻净化 夜
    poj 1185 炮兵阵地 夜
    hdu 2586 How far away ? 夜
    C. Shaass and Lights 夜
    hdu 4536 XCOM Enemy Unknown 夜
    根据BAPI_PO_CREATE1创建采购订单
    301、404、200、304、500HTTP状态
    js检查Page.IsValid
    查看linq的生成语句
    uploadfile和Image实现图片预览
  • 原文地址:https://www.cnblogs.com/mumu-web/p/7463251.html
Copyright © 2011-2022 走看看