JavaScript基本语法：函数function---JavaScript入门笔记

来源：原创更新时间：2017-07-27 20:45:12 编辑：前端网编辑浏览：3376

函数的定义

1. 怎么定义一个函数？

语法：

function 函数名(参数)

{

执行代码

}

说明：

1). function是定义函数的关键字，必不可少。

2). 函数名是函数的名字。自定义的。函数命名遵循命名规则，具体见下一小节。

3). 在调用函数时，您可以向其传递值，这些值被称为参数，参数是可以为空的。

4). 在函数定义处的参数我们称为形参，在我们调用函数时传递给函数的实际参数我们称为实参。形参与实参必须以一致的顺序出现。第一个变量值就是第一个被传递的参数的给定的值，以此类推

执行代码是在调用该函数的时候，所做的操作，也称为函数体。

相信有了刚刚的说明，同学们已经大概知道怎么定义一个函数了吧？下面我们来看例子吧。

例子1：

<!DOCTYPE html>

<head>

< charset="UTF-8">

</head>

<body>

</body>

< >

function add(a,b) {

alert(a+b);

}

</ >

</html>

结果为：

图片12.png

总结：按语法定义函数，直接通过函数名调用对应函数。

2. 函数名

函数名就是函数的名字。

例子2：定义一个函数名为function_name的函数,没有参数。

function function_name()

{

alert("Hello World!");

}

函数命名规则：

1). 区分大小写。

2). 允许包含字母、数字、下划线、美元符号（$），但是第一个字符不能是数字。

3). 不允许使用其他字符以及关键字和保留字命名。

3. 参数（形参）

函数参数就是在调用函数时，你向其传递的值，参数是可以为空的。

例子3:定义一个函数，参数为a,b

<!DOCTYPE html>

<head>

< charset="UTF-8">

< > </ >

</head>

<body>

</body>

< >

function add(a,b) {

return a+b;

}

</ >

</html>

说明：

1). 在函数定义处的参数我们称为形参，在我们调用函数时传递给函数的实际参数我们称为实参。x形参与实参必须以一致的顺序出现。第一个变量值就是第一个被传递的参数的给定的值，以此类推

执行代码是在调用该函数的时候。

2). 参数既可以是变量也可以是常量。常量就是值不会变的量。但是参数为常量就不能发挥函数的灵活性，没有太大的实际意义。

函数的调用

函数的调用就是在我们定义一个函数之后，我们应该如何使用这个函数。

语法：

函数名（实参）

例子1：调用函数名为myfunction的函数，实际参数为name,sex.

myfunction(name,sex);

例子2：不同的参数实现同样的效果。

<!DOCTYPE html>

<head>

< charset="UTF-8">

</head>

<body>

<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). 函数拆分是视具体情况而定的，根据具体情况、要求不同，拆分的方式也会不同。

JavaScript基本语法：函数function---JavaScript入门笔记

函数的定义

函数的调用

函数的返回值

函数的拆分

评论区

相关内容

点击排行

随机新闻

评论排行榜