作用
函数目的指向性更强,可读性更好,简化代码,提升开发效率
特点
- 不用写function关键字;
- 只能作为函数使用不能new,没有原型;
- 参数不能重复命名;
- 返回值可以不写return,但有时需要配合{};
- 内部arguments this由定义时外围最接近一层的非箭头函数的arguments和this决定其值;
使用
- 常规使用
var sum = (a, b) => {
return a + b;
}
console.log(sum(10, 20)) // 输出 30
- 不写return
var sum = (a, b) => {
a + b;
}
console.log(sum(10, 20)) // 输出 undefind
- 不写return且返回正常值
var sum = (a, b) => a + b;
console.log(sum(10, 20)) // 输出 30
箭头函数和对象
当想用箭头函数将参数返回一个对象时
let sum = (a, b) => {
a: a,
b: b
}
console.log(sum(10, 20))
会发现报错了,但如果返回数组就不会报错,这是因为对象的{}被识别为function() {}中的大括号。所以若想使用箭头函数返回对象,可以使用圆括号:
let sum = (a, b) => ({
a: a,
b: b
})
console.log(sum(10, 20)); // 输出 {a: 10, b: 20}
扩展小练习
function sum (x) {
return function (y) {
return function(z) {
return x + y + z;
}
}
}
var sum1 = sum(1);
var sum2 = sum1(2);
console.log(sum2(3)); // 输出6
函数sum可读性差,繁琐易错,使用箭头函数怎么写呢?
- 第一步,将所有
function
换成=>
let sum = (x) => {
return (y) => {
return (z) => {
x + y + z;
}
}
}
- 第二步,去掉return
let sum = (x) => (y) => (z) => x + y + z;
- 第三部,当箭头函数只有一个参数的时候,参数的括号可以去掉
let sum = x => y => z => x + y + z;
console.log(sum(1)(2)(3)); // 输出6
注意事项
- 箭头函数的参数不可以是相同的变量
var sum1 = function (a, a) {
console.log(a)
}
不报错。
let sum = (x, x) => {
console.log(x)
}
报错:
### 未完待续