箭头函数

JavaScript 箭头函数免费看

箭头函数的定义、箭头函数的简写形式

2020-06-18侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 17     0     520

在 JavaScript 语言中,ES6 标准新增了一种新的函数,叫做箭头函数(Arrow Function)。为什么叫做箭头函数呢,这是因为它的定义使用的就是一个箭头。

箭头函数表达式的语法比函数表达式的更加简洁,而且箭头函数没有自己的 thisargumentssuper 等。监听函数表达式更适用于哪些本来需要匿名函数的地方。

箭头函数的定义

箭头函数具有单一的总体结构,然后在特殊情况下可以通过多种方式简化它们。

语法格式:

(argument1, argument2, ... argumentN) => {
  // 函数体
}

写箭头函数时,可以分为三个部分,首先是小括号 () 中的参数列表、其后跟一个箭头=>,最后是函数体。

示例:

例如有一个普通函数的内容如下所示:

function num(a){
    console.log(a);
}

num(10);  // 输出:10

如果我们使用箭头函数来写这个函数,可以像下面这样写:

var num = (a) => {
    console.log(a);
}

num(10);  // 输出:10

分别执行这两个函数,你会发现执行结果一样。

箭头函数的简写形式

箭头函数在什么情况下,可以简写呢,我们一起来看一下。

  • 省略花括号

如果一个函数中的函数体像下面代码一样,只有一句代码的时候:

function num(a){
    console.log(a);
}

我们可以省略箭头函数中的花括号 {},直接用一句代码就搞定,如下:

var add = a => console.log(a);

只有当箭头函数只有一个参数时,才能省略小括号哟。

  • 省略花括号{} 和 return

当函数体内只有一条返回语句时,例如下面这样:

var num = (a) => {
    return a;
}

我们可以省略函数中的花括号 {}return 语句:

var num = (a) => a;   

这种情况下,如果要省略就都省略,如果只省略 {}、或者只省略 return ,则会导致代码出错。我们可以看一下下面这三种写法,只有第一种写法是正确的:

// 都省略
var num = (a) =>  a ;   
console.log(num(3));  // 输出:3

// 只省略return
var num = (a) => { a };   
console.log(num(3));  // 输出:undefined

// 只省略{}
var num = (a) => return a;   
console.log(num(3));  // 输出:SyntaxError: Unexpected token 'return'
  • 如果返回的是一个对象,简写时要使用小括号()包住要返回的对象

如果某个箭头函数中返回了一个对象,而我们想要简写这个箭头函数的话,要使用 () 包住这个对象。

例如正常的箭头函数:

var num = () =>{ 
    return {a:1};
}  
console.log(num());  // 输出:{ a: 1 }

省略 return 和 花括号{} 后,要使用小括号 () 包住要返回的对象:

var num = () =>({a:1});
console.log(num());  // 输出:{ a: 1 }

如果简写时不使用小括号包住对象,则会输出 undefined:

var num = () => {a:1};
console.log(num());  // 输出:undefined

需要注意一下,当箭头函数中的参数只有一个的时候,才可以省略小括号 (),没有参数或者多个参数都必须写 ()。箭头函数函数体中只有一句代码时,可以省略{},否则必须写。当你不确定可以不可以省略时,那就写上,反正写了不会错。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

17

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?