https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- 语法形式:
() => expression
param => expression
(param) => expression
(param1, paramN) => expression
() => {
statements
}
param => {
statements
}
(param1, paramN) => {
statements
}
- 箭头函数可以是 async 的,方法是在表达式前加上 async 关键字。
async param => expression
async (param1, param2, ...paramN) => {
statements
}
- 箭头函数既可以使用表达式体(expression body),也可以使用通常的块体(block body)。
- 在表达式体中,只需指定一个表达式,它将成为隐式返回值。在块体中,必须使用显式的 return 语句。
- 只有当函数直接返回表达式时,才可以省略大括号。如果函数体有额外的处理,则大括号是必需的,return 关键字也是必需的。箭头函数无法猜测函数体返回什么或何时返回。
- 箭头函数总是未命名的。如果箭头函数需要调用自身,请使用具名函数表达式。也可以将箭头函数赋值给一个变量,这样它就有了名字。
- 用表达式体语法
(params) => { object: literal }
返回对象字面量时,不能按预期工作。要解决这个问题,可以用括号将对象字面量包装起来:(params) => ({ object: literal })
。
示例:在参数周围加上小括号
const numbers = [1, 2, 3]
console.log(numbers.map((number) => number + 10))
输出:
示例:如果无参数,需在参数列表周围加上小括号
// 这是一个立即执行函数表达式
const a = (() => 'good')()
console.log(a)
输出:
示例:
// 这是一个立即执行函数表达式,值是undefined
const a = (() => { })()
console.log(a)
输出:
示例:
const func = (a) => (a + 10)
console.log(func(2))
输出:
示例:如果函数只有一个参数,参数列表周围的小括号可以省略
const func = a => (a + 10)
console.log(func(2))
输出:
示例:
const func = a => a + 10
console.log(func(2))
输出:
示例:
// 箭头函数的右边使用大括号,没有return语句,结果是undefined
const func = a => { a + 10 }
console.log(func(2))
输出:
示例:
// 箭头函数的右边使用大括号,有return语句
const func = a => { return a + 10 }
console.log(func(2))
输出:
示例:
// 箭头函数的右边使用大括号,有return语句
const func = (a) => { return a + 10 }
console.log(func(2))
输出:
示例:如果有多个参数,参数列表周围的小括号不能省略
// 箭头函数的右边使用大括号,有return语句
const func = (a, b) => { return a + b }
console.log(func(2, 3))
输出:
示例:只有当函数直接返回表达式时,才可以省略大括号。如果函数体有额外的处理,则大括号是必需的,return 关键字也是必需的
const func = (a) => {
if (a < 10) {
return a
}
return a + 10
}
console.log(func(2))
console.log(func(10))
输出:
示例:用表达式体语法 (params) => { object: literal }
返回对象字面量时,不能按预期工作。要解决这个问题,可以用括号将对象字面量包装起来: (params) => ({ object: literal })
。
// 不能按预期工作
const func1 = () => { name: 'tom' }
console.log(func1())
// 按预期工作
const func2 = () => ({ name: 'li' })
console.log(func2())
输出: