这是我参与更文挑战的第10天,活动详情查看: 更文挑战
匿名函数
函数表达式
在讲匿名函数之前我们首先要知道什么是函数表达式。所谓函数表达式就是将声明的函数赋值给一个变量,通过变量完成函数的调用和参数的传递。它是JS中另一种自定义函数的一种方式。
具体示例如下:
<script>
//定义函数表达式
var f = function add(a,b){
return a+b;
}
//通过变量名调用函数
f();
</script>
函数表达式与普通函数定义的方式几乎相同,需要注意的是,函数表达式的定义要在调用前,且通过变量名来调用。
匿名函数
匿名函数指的是没有函数名称的函数,可以有效地避免全局变量的污染以及函数名的冲突问题。
它既是函数表达式的另一种形式,又可以通过函数声明来调用。
具体示例如下:
<script>
//方式1:函数表达式省略函数名
var f1 = function (a,b){
return a+b;
}
f1(1,3);
//方式2:自调用方式
(function (a,b){
return a+b;
})(1,3);
//方式3:处理事件
document.body.onclick = function (){
alert("Hi,Bob");
};
</script>
ES6中引入了一种新的编写匿名函数的语法,叫做箭头函数(和java中的lambda表达式类似,有兴趣的话大家可以去看看我的另一篇博客来写Lambda表达式的。)
箭头函数常见的语法格式如下:
<script>
//用法1:标准语法
(p1,p2,...,Pn) =>{函数体}
//用法2:返回值
(p1,p2,...,pn) =>{return 返回值;}
或
(p1,p2,...,pn) =>return 返回值
//用法3:含有一个参数
(参数) =>{函数体}
或
参数 =>{函数体;}
//用法4:无参数箭头函数
() => {函数体;}
或
_ => {函数体;}
</script>
当函数体中只有一条语句时可以省略大括号,且当这条语句为return语句时可以省略return关键字. 当参数列表只有一个参数时可以省略小括号。 当没有参数时,必须含有小括号或下划线(_)。
来看一个例子:
<script>
//1个参数且省略了return关键字
var f = x =>{
x+2;
}
console.log(f(6));//结果为8
//两个参数,且省略了return关键字
var f2 = (a,b) => {
x+y;
}
console.log(f2(1,3));//输出结果为4
</script>
使用箭头函数可以简化匿名函数的代码,使代码更简洁明了。
看了这么多,亲自动手试一下吧!