JavaScript基本语法:函数function---JavaScript入门笔记
函数的定义
1. 怎么定义一个函数?
语法:
function 函数名(参数)
{
执行代码
}
说明:
1). function是定义函数的关键字,必不可少。
2). 函数名是函数的名字。自定义的。函数命名遵循命名规则,具体见下一小节。
3). 在调用函数时,您可以向其传递值,这些值被称为参数,参数是可以为空的。
4). 在函数定义处的参数我们称为形参,在我们调用函数时传递给函数的实际参数我们称为实参。形参与实参必须以一致的顺序出现。第一个变量值就是第一个被传递的参数的给定的值,以此类推
执行代码是在调用该函数的时候,所做的操作,也称为函数体。
相信有了刚刚的说明,同学们已经大概知道怎么定义一个函数了吧?下面我们来看例子吧。
例子1:
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
</head>
<body>
<button ="add(1,4)">Try B</button>
</body>
< >
function add(a,b) {
alert(a+b);
}
</ >
</html>
结果为:
总结:按语法定义函数,直接通过函数名调用对应函数。
2. 函数名
函数名就是函数的名字。
例子2:定义一个函数名为function_name的函数,没有参数。
function function_name()
{
alert("Hello World!");
}
函数命名规则:
1). 区分大小写。
2). 允许包含字母、数字、下划线、美元符号($),但是第一个字符不能是数字。
3). 不允许使用其他字符以及关键字和保留字命名。
3. 参数(形参)
函数参数就是在调用函数时,你向其传递的值,参数是可以为空的。
例子3:定义一个函数,参数为a,b
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< > </ >
</head>
<body>
<button ="alert(add(1,4))">Try B</button>
</body>
< >
function add(a,b) {
return a+b;
}
</ >
</html>
说明:
1). 在函数定义处的参数我们称为形参,在我们调用函数时传递给函数的实际参数我们称为实参。x形参与实参必须以一致的顺序出现。第一个变量值就是第一个被传递的参数的给定的值,以此类推
执行代码是在调用该函数的时候。
2). 参数既可以是变量也可以是常量。常量就是值不会变的量。但是参数为常量就不能发挥函数的灵活性,没有太大的实际意义。
函数的调用
函数的调用就是在我们定义一个函数之后,我们应该如何使用这个函数。
语法:
函数名(实参)
例子1:调用函数名为myfunction的函数,实际参数为name,sex.
myfunction(name,sex);
例子2:不同的参数实现同样的效果。
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
</head>
<body>
<button =" myFunction('小明','男')">实参</button>
<button ="myFunction(Name,Sex)">已赋值变量</button>
<button ="myFunction(NAME,SEX)">已赋值常量</button>
</body>
< >
var Name = "小明";
var Sex ="男";
const NAME ="小明";
const SEX = "男";
function myFunction(name,sex){
alert("name is "+name+" , "+"sex is "+sex);
}
</ >
</html>
说明:
1). 在我们定义函数时函数的参数称为形参,在我们调用函数时传递给函数的实际参数我们称为实参,值是唯一确定的,不可更改的量叫常量。
2). 在函数调用时,形参与实参必须一一对应。
3). 实参可以是已经赋值的变量,也可以是赋值一个常量,就像上面的例子。
函数的返回值
当我们希望函数返回一个值到调用它的地方的时候,我们怎么办呢?
我们可以通过return来实现哦。
例子1:返回变量name的值。
function myFunction()
{
var name="小明";
return name;
}
说明:
1). 例子1返回的值是小明。
在使用 return 语句时,函数不会再执行return后面的语句,什么意思呢?我们看看后面的例子2就知道啦。
例子2:返回变量name的值
function myFunction()
{
var name="小明";
return name;
name="小花";
}
说明:
1). 例子2返回的值还是小明。
2). 例子1与例子2的返回值是一样的,因为函数不会再执行return之后的语句。
函数的拆分
函数的拆分:是逻辑意义上的拆分。不是说非要将函数拆成多少个,而是为了方便使用而根据实际情况来做具体处理的。
什么情况下会用到函数拆分呢?
比如:
1). 函数体里面的代码很长的时候,可以按照不同的模块或者功能将代码拆分为多个功能较小的函数。
2). 函数里面某一段代码使用的次数特别多,而其他的并不是很多的时候,就可以将他们拆分掉。这样可以提高效率。
例子1:edit函数有添加、删除、保存功能。
function edit(){
实现删除功能的代码
实现保存功能的代码
实现添加功能的代码
}
说明:
1). 由于我们现在正在学习基础知识,我们这里就不写出具体实现代码,而是用文字代表。主要理解函数拆分的意义就好。
2). 函数edit是由3个功能组成的一个大的函数,代码量会很大。所以我们可以直接将他拆分为删除函数,保存函数,添加函数。这样就实现了函数的拆分。
例子2:
function count(){
var m=3;
var n=6;
var a =4;
var b=5;
var result_ab=a+b;
var result_mn=m+n;
var result=result_ab+result_mn;
return result;
}
说明:
可以看到上例中有很多加法计算,如果我们能将该函数进行拆分,将最常用的加法计算作为一个单独的函数,就会大大提高效率。
代码为:
function add(A,B) {
return A+B;
}
function count(){
var m=3;
var n=6;
var a =4;
var b=5;
var result_ab=add(a,b);
var result_mn=add(m,n);
var result=add(result_ab,result_mn);
return result;
}
说明:
由于举的例子很简单,所以不能明显看出拆分的好处,但是当重复操作变的复杂的时候,代码的缩减量就会大大增加,而且效率也会变高。
总结:
1). 函数拆分常用在函数体代码太多,函数中某一代码多次使用的情况下。
2). 函数拆分是视具体情况而定的,根据具体情况、要求不同,拆分的方式也会不同。