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). 函数拆分是视具体情况而定的，根据具体情况、要求不同，拆分的方式也会不同。
标签：
我做前端这 12 年来的感悟
前端重磅：Vue.js 3.0...
一个前端开发学习神器...
