javascript函数(5)

Js函数的定义

函数：封装了一段可重复执行调用的代码块。

目的：可以让大量代码重复使用

求和

函数的命名是动词，而变量名的命名是名词


        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum = sum + i;
            }
            return sum;

        }
        console.log(getSum(1, 100)); //求~100的和
        console.log(getSum(1, 1000)); //求1~1000的和
    </script>

函数的使用？

1.声明函数

2.调用函数

声明函数

    function 函数名() {
        //函数体
    }

调用函数

  函数名()

注意事项

function是声明函数的关键字，必须是小写
函数是做某件事情，因此函数名为动词
函数本身不执行，必须调用才能使用
调用函数不要忘记加小括号呀

案例


    <script>
        //声明函数
        function sayHi() {
            return '尧子陌'
        }

        //调用函数
        console.log(sayHi())
    </script>

函数的封装

函数的封装：简单而言，就是把一个功能或多个功能以函数的方式进行封装，对外提供一个简单的函数接口。

简单理解：类似于快递打包。

求1~10之间的相乘的结果


    <script>
        function getSum(num1, num2) {
            var sum = 1;
            for (var i = num1; i <= num2; i++) {
                sum = sum *i;
            }
            return sum;

        }
        console.log(getSum(1, 10)); //求~10的相乘的结果

    </script>

带参数的函数

函数的参数：形参与实参
形参：声明函数时，函数名后面的小括号里面的参数是形参，形参是形式上的参数。形参是为了接受实际参数传递的值。
实参：调用函数时，函数名后面的小括号里面的参数是实参，实参是实际上的参数。

参数：函数内部的值不固定，我们可以通过参数调用函数传递不同的值进去

  //声明函数
  function 函数名(形参1，形参2...){
      
  }
  //调用函数
   函数名(实参1，实参2...)


    <script>
        //声明函数
        function cook(arr) {
            return arr

        }
        

        //调用函数
        console.log(cook("酸辣土豆丝"))
        console.log(cook("香辣大白菜"))
    </script>

函数的参数可以有，也可以没有,根据情况而定

函数的案例

求任意两个数的和

    <script>
        // 声明函数
        function getSum(num1, num2) {
            return num1 + num2
        }
        //调用函数
        console.log(getSum(100, 200))
        console.log(getSum(10, 20))
    </script>

求任意两个数之间的和

<script>
    //声明函数
    function getSum(star, end) {
        var sum = 0;
        for (var i = star; i <= end; i++) {
            sum = sum + i;
        }
        return sum
    }
    //调用函数
    console.log(getSum(20, 50))
    console.log(getSum(1, 100))
</script>

函数形参与实参个数的匹配

函数形参与实参个数一致的情况下，则正常输出结果

<script>
    //声明函数
    function getSum(num1, num2) {
        return num1 + num2
    }

    //调用函数
    console.log(getSum(10, 20))
</script>

函数形参的个数小于实参的个数，则取形参的个数

<script>

    //声明函数
    function getSum(num1, num2) {
        return num1 + num2
    }

    //调用函数
    console.log(getSum(1, 200, 500))
</script>

函数形参的个数大于实参的个数，则结果为undefined

分析如下

函数的形参可以看作是未声明的变量，结果为undefined
任何数值加undefind最终结果都为NaN(不是一个数值)

<script>
    //声明函数
    function getSum(num1, num2, num3) {
        return num1 + num2 + num3
    }

    //调用函数
    console.log(getSum(100, 200)) //形参的个数大于实参的个数的情况下 
    console.log(getSum(100, 200, 500)) //形参的个数与实参的个数一致的情况下
</script>

函数参数的总结

函数可以带参数，也可以不带参数
函数的参数有多个时，中间用英文状态下的逗号相隔
声明函数时，函数名小括号里的参数为形参，其默认值为undefined
调用函数时，函数名后面的小括号为实参，用来传递值给形参
函数的形参与实参的个数应当一致，否则结果难以预计。

函数的返回值

函数是做某件事情或实现某种功能，最终都会把结果返回给函数调用者

<script>
    //声明函数
    function getResult() {
        return 520
    }
    //调用函数
    console.log(getResult())
</script>

观察执行过程，在函数执行过程中，遇到retern便会把后面的结果返回给函数的调用者

求两个数之间的最大值

第一种方法：利用if语句

<script>
    function comParison(num1, num2) {
        if (num1 > num2) {
            return num1
        } else {
            return num2
        }
    }
    console.log(comParison(20, 50))
</script>

第二种方法：利用三元表达式

<script>
    function comParison(num1, num2) {
        return num1 > num2 ? num1 : num2
    }
    console.log(comParison(20, 50))
</script>

利用函数求最大值

注意：在实际开发过程中，通常用变量接收函数的返回值

<script>
    function getMax(arr) {
        var max = arr[0];
        for (var i = 0; i <= arr.length; i++) {
            if (max < arr[i]) {
                max = arr[i]
            }
        }
        return max

    }

    // 在实际开发中，我们通常用一个变量来接收函数的返回值。
    var result = getMax([5, 2, 22, 96, 85])
    console.log(result)
</script>

return 终止函数

在函数内部 retur返回的结果后面的语句不执行

<script>
    function getSum(num1,num2) {
        return num1+num2;
        alert("return 终止函数")  //return 结果后面的代码块不会执行
    }
   console.log( getSum(20,50))
</script>

return后面只能返回一个值

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

利用数组可以返回多个值

<script>
    function getSum(num1,num2) {
        return [num1*num2,num1/num2,num1+num2,num1- num2]
    }
    console.log(getSum(20,50))
</script>

break continue nreturn的区别

break:结束当前循环
continue：跳出当前循环，继续下一次循环
return:不仅可以跳出循环而且可以结束函数体内的代码，返回return后面的结果

通过榨汁机来看透函数

arguments的使用

当我们不确定传递多少个实参的时候，可以使用arguments对象，arguments对象是函数内置的对象，存储着所有传递过来的实参

<script>
    function fn() {
        console.log(arguments);
        for(var i =0;i<arguments.length;i++) {
        
            return arguments[i]
        }
    }
    console.log(fn(20,20,50,80))
    console.log(fn(20,20,50,80,100))
</script>

注意事项

arguments是伪数组，并不是真正的数组
具有length属性，按照索引的方式进行存储
不能使用真正的数组方法，如push() pop()等等

利用arguments求任意个数的最大值

思路如下数组中求最大值的思路一样，只不过采用arguments对象来获取数组中的最大值。

<script>
        
    function getMax() {
        // 声明一个最大变量Max
        var Max = 0;
        for(var i=0;i<arguments.length;i++) {
            if(Max<arguments[i]) {
                Max = arguments[i]
            }
        }
        return Max;
    }
    
    console.log(getMax(20,50,60)) //60
    console.log(getMax(20,50,60,100)) //100
    </script>
</script>

函数封装的案例

采用函数封装的方式反转任意数组

<script>
    function reserve(arr) {
        var newArr= [];
        for(var i = arr.length-1 ;i>=0;i--) {
            newArr[newArr.length] = arr[i]

        }
        return newArr

    }
    console.log(reserve([10,20,50]));
     console.log(reserve([10,20,50,500,4522,205]));
</script>

利用函数封装的方式实现冒泡排序

<script>
    function sorce(arr) {
        for(var i = 0;i<arr.length-1;i++){
            for(var j = 0;j<arr.length-i-1;j++) {
                if(arr[j]>arr[j+1]) {
                    var temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp


                }
            }
        }
        return arr
    }

    console.log(sorce([20,50,80,30,15,60]))
    console.log(sorce([200,510,880,30,195,60]))
</script>

利用函数封装的方式实现判断是否是闰年

声明一把锁，如果是闰年，则返回true，如果不是闰年，则返回false

<script>
    function isRunYear(year) {
        
        var flag  = false;
        if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag
    }
    console.log(isRunYear(2000))
     console.log(isRunYear(2001))
</script>

函数之间可以互相调用

每个函数都是一个独立的代码块，为了完成特殊任务，函数之间可以相互调用

<script>
    function fn1() {
        console.log('111') 
        fn2() //调用fn2()
    }
    fn1()

    function fn2() {
        console.log('222');
        
    }
</script>

求下列代码的结果

<script>
    function fn1() {
        console.log(111);
        fn2();
        
        console.log('fn1')

    }

    function fn2() {
        console.log(222);
        console.log('fn2')
    }
    fn1()
</script>

判断当前年份的二月份有多少天？

在feBruary函数中，if判断语句中调用isRunYear函数并传参进去，如果为true，则弹出2月份有29天，如果是false，则弹出二月份有28天

<script>
 function  feBruary() {
     var year = prompt("请输入当前的年份")
    if(isRunYear(year)) {
        alert('当前是闰年 2月份有29天')
        
    }else {
        alert('当前是平年 2月份有28天')
    }
 }


 feBruary() //调用函数


    function isRunYear(year) {
        
        var flag  = false;
        if(year % 4 ==0 && year % 400 != 0 || year % 400 == 0) {
            flag = true;
        }
        return flag
    }
    console.log(isRunYear(2000))
    console.log(isRunYear(2001))
</script>

函数的两种声明方式

函数的第一种声明方式:function关键字声明

function fn() {
    console.log('hello')
}
fn()

函数的第二种声明方式:函数表达式声明函数

<script>
    var fn = function(str) {
        console.log(str)
    }
    fn('hello word')
</script>

注意：

fn是变量名而不是函数名
声明变量和声明函数的方式差不多，只不过变量里面存储的值，函数表达式里面存储的是函数
函数表达式也可以传递参数