介绍
箭头函数,Arrow Function,是 ES6标准 新增的函数,相当于 匿名函数 的简写形式
匿名函数 VS 箭头函数
箭头函数 与 匿名函数 写法 几乎相同,只是 少了
function,多了=>
根据 形参的数量,函数中 语句的数量,箭头函数提供了多种 简写形式箭头函数中的
this指向与 匿名函数不同
应用场景
- 作为回调函数,如:事件、定时器、数组方法中使用箭头函数,避免
this指向问题 - 异步操作
- 简单的单行逻辑(函数中只有一行代码),适合用箭头函数简化代码
箭头函数通过简洁的语法和稳定的 this 绑定,成为 JavaScript 开发中处理回调场景的理想选择。
基本语法
注意:要将箭头函数 赋值 给 变量 或 常量,否则无法调用
形式一
(参数) => 表达式
形式二
(参数) => {
代码块
}
箭头函数的写法
- 只有一个参数,
()可以 省略(没有参数 或 多个参数,不能省略) {}中只有一行代码,{}可省略{}中只有一行代码,而是是return,{}和return可以省略
例子:没有形参,{}中只有一条语句
- 没有形参,
()不可省略 {}中只有一条语句,{}可以省略
普通函数:
var test = function () {
return 10
}
var res=test()
console.log("res="+res)
箭头函数:
// 没有形参,不可省略 ()
// 同时省略{} 和 return,自动将该行代码的结果返回
var test2 = () => 10
var res=test2()
console.log("res="+res)
例子:只有一个形参,{}中有一条语句
- 只有一个形参,
()可省略 {}中只有一条语句,{}可以省略
普通函数:
var test = function (a) {
return a*2
}
var res=test(3)
console.log("res="+res)
箭头函数:
// 只有一个形参,可省略()
// 同时省略{} 和 return,自动将该行代码的结果返回
var test2 = a => a*2
var res=test2(3)
console.log("res="+res)
例子:多个参数,{}中有多条语句
- 多个形参,
()不可省略 {}中有多条语句,{}不可省略
普通函数:
var add = function (a,b) {
console.log("a="+a)
console.log("b="+b)
return a+b
}
var res=add(1,2)
console.log("res="+res)
箭头函数:
// 多个形参,不可省略()
// {}中有多行代码,不可省略{}
var add2 = (a,b) => {
console.log("a="+a)
console.log("b="+b)
return a+b
}
var res=add2(1,2)
console.log("res="+res)
