ES6 允许使用“箭头”(=>
)定义函数。
//箭头函数
let f = v => v;
// 等同于
let f = function (v) {
return v;
};
箭头函数的注意点
:
1) 如果形参只有一个,则小括号可以省略
2) 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的 执行结果
3) 箭头函数
this
指向声明时所在作用域下
this
的值
4) 箭头函数不能作为构造函数实例化
5) 不能使用
arguments
写法
//1.通用写法
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
//2.省略小括号的情况
let fn2 = num => {
return num * 10;
};
//3.省略花括号的情况
let fn3 = score => score * 20;
//4.this 指向声明时所在作用域中 this 的值
let fn4 = () => {
console.log(this);
}
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
箭头函数使得表达更加简洁。下面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。
const isEven = n => n % 2 === 0;
const square = n => n * n;
箭头函数的一个用处是简化回调函数。
/**
* 例1
*/
// 普通函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
/**
* 例2
*/
// 普通函数写法
var result = values.sort(function (a, b) {
return a - b;
});
// 箭头函数写法
var result = values.sort((a, b) => a - b);
注意:箭头函数不会更改
this
指向,用来指定回调函数会非常合适