在JavaScript
中,我们经常使用到函数,函数是用来做什么的呢?其实,函数是你定义的一种方法,把你想要实现的代码块放到{ }里面,定义一个函数名称就可以了,这个就是函数。让我们一起来看看怎么定义函数和函数的调用方法吧。
文章图片
一、函数的定义和调用在JavaScript 函数中,有两种定义函数的方式。
【1】方式一
定义函数用function关键字开头,后跟函数名,函数名后面的()里面加的是参数,参数是可选的,如果带有参数则这个函数为“带参函数”,这个参数其实充当着函数的变量。{ }里面是该函数需要执行的函数体,可以有多条语句,也可以一条也没有。
例如:
function myfun(x){
var num = Math.random();
if(x>num){
console.log(x);
}
else{
console.log(num);
}
}
【2】方式二
第二种方式是匿名函数的方式,就是函数没有函数名,和以上的书写方式一样,就是没有函数名,因此可以通过赋值的方式把这个函数复制给一个变量。
例如:
var myfun = function(x){
var num = Math.random();
if(x>num){
console.log(x);
}
else{
console.log(num);
}
};
【3】调用函数
函数的调用比较简单,就是在需要执行该函数的地方调用调用其函数名,需要添加参数的时候加入参数。要注意的是,在传入参数的时候,我们可以任意传参,即使定义的时候并没有定义那么多参数。或者没有传入参数,只要调用,函数也会照样执行,只是会跳过包含参数的部分。
例如:
var myfun = function(x){//定义一个参数
var num = Math.random();
if(x>num){
return console.log(x);
}
else{
return console.log(num);
}
};
myfun(0.5, 1.2,5);
//传入多个参数,后面的参数不会影响前面的参数myfun();
//跳过if()条件,输出任意多随机数
二、函数中的returnreturn 语句会终止函数的执行并返回函数的值。所以当我们在函数中使用return的时候,要注意return语句的换行问题。如果把需要返回的值放在return的下一行,那这个返回值不会被执行,因为遇到return就已经终止执行函数了。这是为什么我之前提到说虽然JavaScript 引擎会帮助我们自动添加结尾的分号“; ”,但是我们还是最好就自添加。
如上面例子:
var myfun = function(x){
var num = Math.random();
if(x>num){
// return console.log(x);
return
console.log(x);
//错误,return没分号,js引擎会自动添加分号‘;’,所以终止了函数
}
else{
return console.log(num+'.....');
}
};
myfun(0.5);
三、argumentsarguments只在函数内部起作用,是JavaScript 的一个关键字。arguments始终指向调用函数的时候传入的参数,类似于一个Array数组,可是并不是数组。利用这一关键字,我们可以知道调用函数传入的参数是什么,甚至操作参数。
例如:
function myfun(){
for(var i = 0;
i<
arguments.length;
i++){
console.log(arguments[i])//输出:10,20,30
}
if(arguments[1]>arguments[0]){
arguments[0]=arguments[1];
console.log(arguments[0])//输出:20
}
}
myfun(10,20,30);
四、函数中的rest参数我们知道,在调用函数的时候,我们可以传入任意多个参数,即使定义函数的时候并没有定义那么多个。arguments关键字是收集全部参数,那么怎么把除了函数定义的参数之外,多余的参数收集起来?
SE6标准新定义了rest参数解决这一问题,函数中的rest参数其实是一个数组,这个rest参数放在函数参数里,用于收集了调用函数时传入的其余的所有参数。
书写方式是rest参数总放在参数最后面,前面有三个点“… ”用于标识这个参数的特殊用法。
例如:
function myfun(x,y,...rest){
if(x>y){
console.log(x+'>'+y);
}
else{
console.log(x+'<
'+y);
}
console.log(rest);
}
myfun(10,20,25,45);
//输出:10<
20 [25, 45]
试了以下,如果没有传入多余的参数,会不会输出数组,答案是会的,会输出一个空数组,所以rest参数就是在函数定义的时候定义了一个空数组。
【JavaScript中创建函数调用函数及函数中的参数详解】要注意的是,rest参数是ES6标准新增加的,在学习的过程中,要测试一下你的浏览器是否支持ES6。方法是定义一个包含rest参数的函数,像上述的例子,如果有输出,没报错,那就可以正常使用,否则建议换一个浏览器。
推荐阅读
- PHP | asin()函数用法指南
- ES6中的iterable数组遍历用法及详解
- C语言简明教程(十三)(字符串和字符串处理函数实例详解)
- JavaScript中如何通过键值快速查元素(Map和Set数据类型)
- 使用vue+uni-app开发天猫商城案例
- C语言简明教程(十二)(数组和指针完整实例详解)
- 微信web开发者工具启动不了打不开——已解决
- layui.flow流加载图标和样式的修改案例
- uni-app vue框架组件添加使用及注意事项