我们知道在ES6中,引入了箭头函数,其本质就是等同于ES5中的函数,但是相比es5中的函数,箭头函数更加简洁,下面我们详细来了解一下箭头函数。
es5中函数表达式写成es6中箭头函数的规律如下:
1.省略function
用 => 来标识;
2.参数个数:
1)一个参数,省略小括号。
2)多个参数,不省略小括号。
3.函数体内有多少句指令:
1)一条指令
①一条指令且为return语句,则省略{ }和return;
②一条指令且为普通语句,则使用void;
2)多条指令:不能省略{ }和return;
以下为具体例子:
//无参 函数体内只有一句代码 无返回值
let fn = function () {
console.log('你好');
}
fn();
//同样的结果在es6中箭头函数为:
let fn = () => {
console.log('你好');
}
fn();
//无参 一条语句 有返回值
let fn = function () {
return '你好'
}
console.log(fn());
//es6
let fn = () => '你好';
console.log(fn());
//一个参数,函数体一句
let fn11 = function (name) {
console.log(name)
}
fn11('jack')
//es6
let fn = name => void console.log(name);
fn('jack');
//多个参数,多条语句
let fn = function (name, age) {
console.log(name);
console.log(age);
return 'oo';
}
console.log(fn('等等', 10))
//es6
let fn = (name, age) => {
console.log(name);
console.log(age);
return 'oo';
}
console.log(fn('等等', 10));
//特殊情况
let fn33 = function (name, age) {
return {
oname: name,
oage: age
}
}
console.log(fn33('妮妮', 40))
//es6
let fn9 = (name, age) => ({
oname: name,
oage: age
});
console.log(fn9('妮妮', 40))
注意:
1.箭头函数的this指定义时的对象,不是es5中的调用者。
2.构造函数不能使用箭头函数。
3.箭头函数中没有arguments,可用rest代替。
4.不可以用yield命令。