您的位置:首页 > Web前端 > JavaScript

JavaScript函数-带参数的函数、带返回值的参数

2015-12-12 14:15 579 查看
  之前说完函数的定义以及调用,接下来看看带参数的函数以及带返回值的的函数~\(≧▽≦)/~

  带参数的函数

  之前讲了函数的基本用法,接下来看看带参数的函数。

  在函数中,参数可以无限多,函数之间用 "," 隔开就好~

  

<script>
function demo(m,n){           //参数m、n
var sum =m+n;
alert(sum);
}
demo(2,3);         //传递参数m=2,n=3
demo(20,30);       //传递参数m=20,n=30
demo(200,300);     //传递参数m=200,n=300
</script>
  注意传递时顺序要一致

  输出如下:






  除了传递数据,我们还可以通过带参数的函数传递各种信息。例如:

<script>
function demo(age,color){
alert("我今年"+age+","+"我喜欢的颜色是"+color);
}
</script>
<button onclick="demo(18,'蓝色')">按钮</button>      //创建一个按钮,在此处调用函数,并进行参数age和color的传递
  输出如下:


  带返回值的函数

  什么是带返回值的函数呢?

  就是将值返回到调用它的地方,用return实现返回

  要注意的是:一旦使用return,则函数停止执行,同时把值返回到调用它的地方

<script>
function demo(){
return("你看,直接返回了");
}
var a=demo()+",返回第一次";
var b=demo()+",返回第两次";
alert(a);
alert(b);
</script>
  输出如下:




  此时,如果在return后面加上一个alert(),那么这个alert()是不会弹出的,因为return之后函数就停止执行了。如果要弹出,只能用在return之前

  来看看在HTML中怎么用带返回值的函数

<p id="yuansu">在这个P标签中,稍后可以显示m,n大小的比较结果</p>
<script>
function demo(m,n){
if(m>n){
return("m大于n");
}else if(m<n){
return("m小于n");
}else if(m=n){
return("m等于n");
}
}
var i=demo(8,10);
document.getElementById("yuansu").innerHTML=i;
</script>
  输出如下:未执行前的<p>标签  


                    执行后的<p>标签  


  在之前的演示中,可以看到我们通常会定义一些变量,然而不同位置定义的变量,使用范围也不同。例如

<script>
var m=1; n=2;//全局变量,任何地方都可以用
function demo(){
var i= 5;//局部变量,只有在此函数中可以用
x=3;//全局变量,在先调用了此函数的条件下可以用
}
demo();
alert(m);//m,n都可以输出;i不能输出;x必须在调用了函数demo的情况下才能输出
</script>


  如上所示,m,n,x,都为全局变量;i为局部变量。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息