JavaScript基础--函数

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然循环语句能实现一些简单的重复操作，但是比较具有局限性，所以我们需要使用 JS 中的函数。所谓函数：就是封装了一段可被重复调用执行的代码块。

1. 函数的使用

函数使用分为两步：声明函数和调用函数。

1.1 声明函数

// 声明函数
function 函数名() {
 //函数体代码
}

注意：

① function 是声明函数的关键字，必须小写
② 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum 

1.2 调用函数

// 调用函数
函数名(); // 通过调用函数名来执行函数体代码

注意： 

① 调用的时候千万不要忘记添加小括号
② 声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。口诀：函数不调用，自己不执行。

2. 函数的参数

JS中的函数和我们数学中学的函数类似，都具有参数，比如一次函数：y=kx+b，其中k和b就是参数，函数的一些性质和值等会随着这两个参数的变化而变化，但是本质不会变，就是得到的总是一条直线。这就像代码中的函数，每个函数实现的基本功能是一样的，只是会随着传入的参数不一样，结果会进行相应的变化。

2.1 形参和实参

类比数学中函数参数，可以得到JS中参数的作用 ：即我们可以通过参数在调用函数时传递不同的值进去，从而实现动态变化。

我们JS中的把参数分成形参和实参。声明函数时，在函数名称后面的小括号中添加的参数称为形参，形参就是类似数学中的未知数，可能取各种值。而在调用函数时，则需要传递相应的参数，这些参数被称为实参，而实参就类似于数学中给某个未知数取具体的值。

比如函数y=kx+b中，k、b是形参。而当k=2,b=-1时，这个2,-1就是实参了。

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
 // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

注意点：

① 调用的时候实参值是传递给形参的
② 形参简单理解为：不用声明的变量
③ 实参和形参的多个参数之间用逗号（,）分隔

// 声明函数
function getSum(num1, num2) {  
 console.log(num1 + num2);   
}
// 调用函数
getSum(1, 5); // 6    
getSum(6, 9); // 15

这个函数的功能是求两个值的和，而在声明函数的时候，添加了两个形参，并在函数体中使用这两个形参进行计算，所以在调用的时候输入具体的值（实参）就可以求得这两个数的和了。这样的一个函数就是动态函数，可以求任意两个数的和。只要想求某两个数的和，只需要调用，并输入实参即可获得结果，非常的方便实用。

 2.2 函数形参和实参个数不匹配问题

理论上，函数形参和实参个数应该保持一致，但是有时可能也会出现不匹配的情况，所以在此介绍下如果不匹配会有怎样的结果：

function getSum(num1, num2) {
 console.log(num1 + num2);
}
getSum(1, 5); // 形参和实参个数相等，输出正确结果6
getSum(1, 3, 8, 10); // 实参个数多于形参，只取到形参的个数，结果为4
getSum(2); // 实参个数少于形参，多的形参定义为undefined，结果为NaN

 注意：在JavaScript中，形参的默认值是undefined。

3. 函数的返回值

3.1 return 语句

如果我们需要函数将值返回给调用者，此时通过使用 return 语句实现。 

// 声明函数
function getMax(num1, num2) {
 return num1 > num2 ? num1 : num2; 
 // 使用三元表达式判断出两个数中的最大值，return语句的作用就是把这个最大值返回给调用者
}
// 调用函数
console.log(getMax(1, 6));  此时打印出的值就是6，由return语句返回给调用者

由于本案例采用了参数，所以可以求任意两个数的最大值。

3.2 return 终止函数

return 语句之后的代码不被执行 。

function add(num1，num2){
 return num1 + num2; // 注意：return 后的代码不执行
 alert('我不会被执行，因为前面有 return');
}
var sum= add(21,6); // 调用函数，传入两个实参，并通过 sum 接收函数返回值(两数的和)
alert(sum); // 27

3.3 return 的返回值 

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

function add(num1，num2){
 //函数体
 return num1，num2;  // 如果用逗号隔开多个值，以最后一个为准，即返回值为num2
}
var num = add(21,6); // 调用函数，传入两个实参，并通过 num 接收函数返回值
alert(num);  // 6

注意：函数都是有返回值的
①  如果有return 则返回 return 后面的值
②  如果没有return 则返回 undefined  

3.4 break ,continue ,return 的区别

① break ：结束当前的循环体（如 for、while）
② continue ：跳出本次循环，继续执行下次循环（如 for、while）
③ return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

4. 函数可以调用另外一个函数

因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况。

function fn1() {
 console.log(111);
 fn2();
 console.log('fn1');
}
function fn2() {
 console.log(222);
 console.log('fn2');
}
fn1();  

之所以输出的是如上结果，是因为函数只有调用，才会执行。所以以上代码的执行顺序是遇到fn1(); 后往回找到函数，然后输出111，紧接着遇到fn2(); 则此时会跳到fn2函数中，输出222和fn2，该函数体执行完后继续执行fn1中的后续内容，输出fn1。

5. 小结

所谓函数其实简单理解就是一个具有功能的工具，这个工具可以带参数也可以不带参数，如果没有参数，那么就不可以动态实现功能，而带了参数，那么它就可以根据用户的需求，灵活的改变某些内容。也可以将函数比喻成一个榨汁机，如果不带参数，那么它的功能就是可以榨汁，但是具体榨啥汁不知道。而带了参数，如果传入实参是苹果，那么这个榨汁机就可以实现榨苹果汁的功能。函数具有返回值，你传入不同的参数，返回不同的结果，就像你放入不同的苹果，就会榨出不同的果汁一样。