- 箭头函数相当与匿名函数
- 用变量接收箭头函数
- 带一个参数的箭头函数
- 带多个参数的箭头函数
- 有返回值的箭头函数
- 有返回值并且带参的箭头函数
- 有返回值并且带多个参的箭头函数
- 返回对象的箭头函数
- 返回对象并且带參的箭头函数
- 包含多条语句并且有返回值的箭头函数
- 箭头函数和匿名函数的区别
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
为什么叫Arrow Function?因为它的定义用的就是一个箭头:
x => x * x
上面的箭头函数相当于:
function (x) { return x * x; }
箭头函数相当与匿名函数
() => {
console.log('箭头函数被调用了');
}
相当于
function (){
console.log('匿名函数被调用了');
})
用变量接收箭头函数
var a = () => {
console.log('箭头函数被调用了');
}
相当于
function a(){
console.log('匿名函数被调用了');
})
带一个参数的箭头函数
x => {
console.log('带一个参数的箭头函数被调用了,参数是:'+x)
}
相当于
function (x){
console.log('带一个参数的匿名函数被调用了,参数是:'+x);
}
带多个参数的箭头函数
(x,y) => {
console.log('带多个参数的箭头函数被调用了,参数是:'+x,y)
}
相当于
function (x, y) {
console.log('带多个参数的匿名函数被调用了,参数是:' + x, y);
}
有返回值的箭头函数
() => {
return 1
};
相当于
() => (1);
相当于
function () {
return 1;
}
有返回值并且带参的箭头函数
x => {
return "参数是:"+x
};
相当于
x => ("参数是:"+x);
相当于
function (x) {
return "参数是:" + x;
}
有返回值并且带多个参的箭头函数
(x,y) => ("返回值是:"+x+y);
相当于
function (x, y) {
return "返回值是:" + x + y;
}
返回对象的箭头函数
() => ({
username: 'Tom'
});
相当于
function () {
return {
username: 'Tom'
};
}
返回对象并且带參的箭头函数
(x,y) => ({
username: x,
age: y
});
相当与
function (x, y) {
return {
username: x,
age: y
};
}
包含多条语句并且有返回值的箭头函数
这时不能用这种写法了:
() => (1);
只能用这种写法:
() => {
if (1 > 2) {
return 1
}else{
return 2
}
}
相当于
function () {
if (1 > 2) {
return 1;
} else {
return 2;
}
}
箭头函数和匿名函数的区别
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。