JavaScript基础---JavaScript函数---10.6

函数的概念

在JS里，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数的使用

函数使用分为两步：声明函数和调用函数
1.声明函数：function是声明函数的关键字，函数名一般是动词。
2.调用函数：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

1.声明函数
function 函数名() {
   函数体
}
2.调用函数
  函数名();

<script>
    function sayHi() {
        console.log("hi~~~");
    }
    sayHi();//调用函数
</script>

利用函数求1-100累加和

<script>
    function getSum() {
       var sum=0;
       for(var i=1; i<=100; i++) {
           sum += i;
       }
       console.log(sum);
    }
    getSum();
</script>

函数的参数

我们可以利用函数的参数实现函数重复不同的代码。

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

形参和实参

function 函数名（形参1，形参2, ...）{//声明函数的小括号里面是形参（形式上的参数）
    ...
}
函数名（实参1，实参2, ...）;//函数调用的小括号里面是实参（实际的参数)

形参和实参的执行过程

<script>
    // 函数的参数可以有，也可以没有，个数不限
    function cook(aru) {//形参是接收实参的  aru='酸辣土豆丝'
        console.log(aru);
    }
    cook('酸辣土豆丝');
    cook('大肘子');
</script>

函数求和案例

<script>
    // 1.利用函数求任意两个数的和
    function getSum(num1, num2) {
        console.log(num1 + num2);
    }
    getSum(1, 3);
    // 2.利用函数求任意两个数之间的和
    function getSums(start, end) {
        var sum=0;
        for(var i=start; i<=end; i++) {
            sum += i;
        }
            console.log(sum);
    }
    getSums(1, 100);
    getSums(1, 10);
</script>

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

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

参数个数	说明
实参个数=形参个数	输出正确结果
实参个数>形参个数	只取到形参的个数
实参个数<形参个数	多的形参定义为undefined，结果为NaN

函数的返回值

return语句

有的时候，我们会希望函数将值返回给调用者，此时通过使用return语句就可以实现。return是终止函数，return后面的代码不会被执行。如果函数没有return，则返回undefined。

函数的返回值格式：
     function函数名()  {
          return需要返回的结果；

     }
     函数名()；
(1)函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名()
(2)只要函数遇到return就把后面的结果返回给函数的调用者
函数名()=return后面的结果

<script>
    function getResult(){
        return 666;
    }
    getResult();
    console.log(getResult());


    function getSum(num1, num2) {
        return num1 + num2;
    }
    console.log(getSum(1, 2));
</script>

案例：

案例1：利用函数比较数值大小

<script>
    function getMax(num1, num2) {
        if(num1 > num2) {
            return num1;
        }else {
            return num2;
        }
    }
    console.log(getMax(3, 9));
</script>

案例2：利用函数求任意一个数组中的最大值

<script>
    function getArrMax(arr) {
        var max = arr[0];
        for(var i=1; i<=arr.length; i++) {
            if(arr[i] > max) {
                max = arr[i];
            }
        }
        return max;
    }
    var result = getArrMax([5,2,99,101,67,77]);
    console.log(result);
</script>

案例3：求任意两个数的加减乘除结果

<script>
    function getResult(num1, num2) {
        return [num1+num2, num1-num2, num1*num2, num1/num2];
    }
    var result = getResult(1, 2);
    console.log(result);//[3, -1, 2, 0.5]
</script>

break，continue，return 的区别

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

arguments的使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。 

<script>
    function fn() {
        console.log(arguments);//里面存储了所有传递过来的实参
        console.log(arguments[2]);//3
    }
    fn(1,2,3,4);
</script>

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

• 具有数组的 length属性
• 按索引方式储存数据
• 不具有数组的push()，pop()等方法

//遍历数组
function aa() {
    for(var i=0; i<arguments.length; i++) {
         console.log(arguments[i]);
    }
}
aa(1,2);

函数的两种声明方式

// 1.利用函数关键字自定义函数（命名函数）
function fn() {

}
fn();
        
// 2.函数表达式（匿名函数）
//var 变量名 = function(){};
var fun = function() {
    console.log('我是函数表达式');
}
fun();