一、语法规则
- 箭头函数的定义使用 => 符号,左侧是参数列表,右侧是函数体。
- 如果只有一个参数,则可以省略圆括号。但是,如果没有参数或参数超过一个,则需要用圆括号将参数列表括起来。
- 如果函数体只有一条语句,则可以省略大括号和 return 关键字。这个语句将自动成为函数的返回值。
- 如果函数体有多条语句,则需要用大括号将这些语句括起来,并使用 return 关键字指定返回值。
- 箭头函数没有自己的 this,它的 this 值继承自父级作用域中的 this 值。
1、一个参数的箭头函数:
const square = num => num * num;
console.log(square(5)); // 输出结果为 25
2、多个参数的箭头函数:
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出结果为 3
3、函数体只有一条语句的箭头函数:
const isEven = num => num % 2 === 0;
console.log(isEven(4)); // 输出结果为 true
4、函数体有多条语句的箭头函数:
const max = (a, b) => {
if (a > b) {
return a;
} else {
return b;
}
}
console.log(max(5, 3)); // 输出结果为 5
需要注意的是,箭头函数通常用于匿名函数表达式,因此它们经常被用作回调函数、迭代函数和事件处理程序等地方。在这些情况下,我们可以通过升级函数语法来使代码更加简洁和易读。
二、箭头函数有两种形式:一个参数和多个参数
1、一个参数:
const myFunction = (arg) => {
// 函数体代码
}
//如果只有一个参数,甚至不需要括号:
const myFunction = arg => {
// 函数体代码
}
2、多个参数:
const myFunction = (arg1, arg2) => {
// 函数体代码
}
箭头函数还可以返回一个值,如果函数体只有一个表达式,则可以省略大括号与 return 关键字,并将表达式写在箭头后面:
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出结果为 3
箭头函数的另一个重要特点是它的作用域绑定。箭头函数没有自己的 this,它的 this 值是继承自父级作用域的。这就意味着,在箭头函数内部,this 所指向的是定义箭头函数时所处的对象或上一层作用域中的 this 值。