现在在js的开发中,箭头函数使用的越来越多,但是很多人对它的用法却不是很清楚,下面我们来详细的看看箭头函数使用方法

工具/原料

  • 电脑
  • 浏览器

箭头函数的用法

  1. 1

    基本示例

    语法:【函数的参数=>函数体】

     

    如下:

    可以看到,使用箭头函数不需要写函数名与function关键字,只需要写【函数的参数列表 => 函数体】

  2. 2

    组成部分

     

    js箭头函数中的箭头函数主要分为三部分

     

    ① =>前的部分  【参数部分】

    ② =>

    ③ =>后的部分  【函数体部分】

  3. 3

    =>前的部分

     

    =>前的部分是函数的参数部分,主要有以下几种情况:

    1. 参数为空(写一个空括号即可)

    ()=>

    2. 只有一个参数a(只写a或者在a外加一个括号)

    (a)=> 或者 a=>

    3. 有多个参数a,b,c,d(必须写在括号里)

    (a,b,c,d)=>

    4. 含有默认值的参数(直接给参数赋值就可以了,同以前一样)

    (a=1,b=2,c=3,d=4)=>

    5. 含有不定参数(直接写就行,同以前一样)

    (a,b,…c)=>

    6. 另外,箭头函数参数也支持解构赋值。

  4. 4

    =>后的部分

     

    =>后的部分也就是函数体主,要有以下几种情况:

    1. 函数体只有一条语句

    写法: =>语句;

       A. 当函数体只有一条语句时,可以不加花括号,直接将这条语句写在箭头后面即可.

      B. 然后如果这条语句是一个return value这种的话,请去掉return,直接写那个值value即可。在箭头函数执行时,会自动将其作为返回值返回。

      C. 当然,如果这个值是一个对象,请在他的外面加上一个括号如({value})因为如果不加的话,{会被认为是函数体的开始,而不会被认为是一个对象的开始。

     

    2. 有多条语句(要加上花括号,写法和以前一样)

    =>{

    语句1;

    语句2;

    语句3;

    }

  5. 5

    箭头函数中的this

    箭头函数会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值。

  6. 6

    对于一个函数而言,

       如果通过new fn的形式得到的实例对象,可以让this进行指向。

       如果是直接进行调用执行的haul,this一般执行window,因为此时没有所谓的实例对象

    END

注意事项

  • 如果您觉得我的经验稍微有点作用的话,请给我点下赞或投下票,如果有疑惑可以给我留言,看到后我会回答的^_^
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。