ES6标准新增了一种新的函数:Arrow Function(箭头函数)。
x => x * x
上面的箭头函数相当于:
function (x) {
return x * x;
}
箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }
和return
都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }
和return
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中的箭头函数</title>
</head>
<body>
<script>
// 普通函数
function getSum(x,y){
return x+y;
}
var sum1 = getSum(1,2);
console.log(sum1);
// 结果是3
// 箭头函数
(a,b) => a+b;
var fn = (a,b)=>a+b;
console.log(fn(1,2));
// 结果是3
// 箭头函数相当于匿名函数,简化了函数定义;
// 箭头函数有2种格式,1. x=>x*x 只包含一个表达式 省略了{...}和return 2.包含多条语句,不能省略{...}和return
x => {
if(x>5){
return x-5;
}else{
return x;
}
}
var fn2 = x => {
if(x>5){
return x-5;
}else{
return x;
}
};
// 打印值是25
console.log(fn2(30));
// 若参数不是1个,那么就要用()括起来
(x,y)=>{
if(x>5&&x<10){
return x+y;
}else{
return x-y;
}
}
var fn3 = (x,y)=>{
if(x>5&&x<10){
return x+y;
}else{
return x-y;
}
};
console.log(fn3(1,4));
// ps如果是要返回一个对象,那么下面的做法是错误的
// x=>{
// "value":x
// }
// 会报错 Uncaught SyntaxError: Unexpected token :
//需要修改成如下
x => ({
"value":x
})
</script>
</body>
</html>