箭头函数:就可以用更短的语法定义函数,箭头函数可以替代传统的function (){} 函数。
语法
允许写的函数,在2号取为参数a和b,然后返回的总和。
传统写法:
function sum(a, b) {
return a + b
}
1
2
3
现在箭头函数写法:
const sum = (a, b) => a + b
可以清楚地看到语法缩短了很多。
使用箭头函数时,参数位于一对括号中的开头。然后是 a =>,它声明了一个箭头函数。之后将输入{} 可以运行的任何代码。但是在返回值时可以排除花括号。
此外,如果只有一个参数,我们可以排除它周围的括号。
就像这样:
const addOne = num => num + 1
如果函数没有参数,我们只需使用一对空括号,像这样:
const sayHello = () => {
console.log("Hello")
}
箭头函数可用于替代任何函数用例。例如,在 React 中,可以使用箭头函数来定义功能组件而不是常规函数。
另一个用例可能是作为回调函数。比如,我们有一个这样的数组:
const users = [
{
name: "John",
age: 24
},
{
name: "Jane",
age: 32
},
{
name: "Blake",
age: 12
}
]
我们想使用 .filter 方法来选择 18 岁以上的用户:
const adults = users.filter(user => user.age > 18)
这是箭头函数可以显着减少必须编写的代码量的一种用例。这也适用于其他数组方法.map,例如:
更改this关键字
在标准函数中,this关键字代表调用函数的对象,可以是按钮,甚至是文档。但是,在箭头函数中,this关键字表示定义箭头函数的对象,而不是调用该函数的元素或对象。
通常箭头函数可以记这几个点:
1.当没有参数时,使用一个圆括号代表参数部分
2.当只有一个参数时,可以省略圆括号。
3.当有多个参数时,在圆括号内定义多个参数用逗号分隔。
4.当箭头函数体有且只有一行时,并且需要返回值时,可以省略大括号.
5.当箭头函数的代码块部分大于一条语句,就需要使用大括号括起来,并且使用 return 语句。
6.由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
7.不能通过new方法调用
8.没有原型
9.没有固定的this指向