20231102函数 133/472

函数的概念

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

虽然for循环语句也能实现一些简答的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数。

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

    <script>
        //函数就是封装了一段可以被重复执行调用的代码块 目的：让大量代码重复使用
        function getSum(num1, num2){
            var sum = 0;
            for (var i =num1; i <= num2; i++){
                sum += i;
            }
            console.log(sum);
        }
        getSum(1,100);
    </script>

函数的使用

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

声明函数本身并不会执行代码，只有调用函数的时候才会执行函数体代码。

    <script>
        //函数使用分成两步： 声明函数 和 调用函数
        //1.声明函数
        // function 函数名(){
        //     //函数体
        // } 
        function sayHi(){
            console.log('hi~~~');
        }       
        // 1）声明函数关键字 function 全部小写
        //2）函数是做某件事，函数名一般是动词，sayHi
        //3）函数不调用自己不执行
        //2.调用函数
        //函数名();
        sayHi();
        //调用函数的时候千万不要忘记加小括号
    </script>

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

函数的参数

形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数	说明
形参	形式上的参数 函数定义的时候 传递的参数 当前并不知道是什么
实参	实际上的参数 函数调用的时候传递的参数 实参是传递给形参

    <script>
        //1. 函数可以重复相同的代码
        // function cook() {
        //     console.log('酸辣土豆丝');
        // }
        // cook();
        //2.我们可以利用函数的参数实现函数重复不同的代码
        // function 函数名(形参1,形参2...){ //在声明函数的小括号里面是形参 （形式上的参数
        // }
        // 函数名(实参1,实参2,...); //在函数调用的小括号里面是实参（实际的参数）
        //3.形参和实参的执行过程
        function cook(aru) { //形参是接受实参的 aru = '酸辣土豆丝' 形参类似于一个变量
            console.log(aru);
        }
        cook('酸辣土豆丝');
        cook('鸡蛋灌饼');
        //4.函数的参数可以有，也可以没有个数不限
    </script>

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

案例1：利用函数求任意两个数的和

        function getSum(num1, num2){
            console.log(num1 + num2);
        }
        getSum(1, 2);
        getSum(3, 4);

案例2：利用函数求任意两个数之间的和

        function getSums(start, end){
            var sum = 0;
            for (var i = start; i <= end; i++){
                sum += i;
            }
            console.log(sum);
        }
        getSums(1, 100);

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

        //实参和形参个数匹配问题
        function getSum(num1, num2){
            console.log(num1 + num2);
        }
        //1.个数匹配
        getSum(1, 2);
        //2.实参多于形参个数 会取到形参个数 
        getSum(1, 2, 3); //3
        //3.实参少于形参
        //形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined
        getSum(1);  //NaN

函数可以带参数也也可以不带参数

声明函数的时候，函数名括号里面包括的是形参，形参默认值是undefined。

调用函数的时候，函数名括号里面是实参

多个参数中间用逗号隔开

形参的个数可以和实参个数不匹配，但是结果不可预计，需要尽量匹配。

函数的返回值

return语句

希望函数将值返回给调用者，此时通过使用return语句就可以实现。

        // function 函数名(){
        //     return 需要返回的结果;
        // }
        // 函数名();

        //1.函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return实现
        //2.只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
        function getResult() {
            return 12345;
        }
        getResult(); //无结果 没有打印出来
        console.log(getResult()); //12345

        function cook(aru){
            return aru;
        }
        console.log(cook('金钱蛋'));

        function getSum(num1, num2){
            return num1  + num2;
        }
        console.log(getSum(23, 2));

案例：利用函数求任意两个数的最大值

    <script>
        function getMax(num1, num2){
            if(num1 >= num2){
                return num1;
            }else{
                return num2;
            }
            // 简易写法
            // return num1 > num2 ? num1 : num2;
        }
        console.log(getMax(2, 5));
        console.log(getMax(7, 5));
    </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;
        }
        // console.log(getArrMax([1, 2, 3, 13, 16, 77]));  太长
        var re = getArrMax([1, 2, 3, 13, 16, 77]);
        console.log(re);
    </script>

实际开发过程中，我们经常用一个变量来接收函数的返回结果 使用更简单

return终止函数

    <script>
        //1. return 终止函数
        function getSum(num1, num2){
            return num1 + num2; //return后面代码不再被执行
            alert('不被执行');
        }
        console.log(getSum(1, 2));
    </script>

注意事项

    <script>
        //1. return 终止函数
        function getSum(num1, num2){
            return num1 + num2; //return后面代码不再被执行
            alert('不被执行');
        }
        console.log(getSum(1, 2));

        //2.return只能返回一个值
        function getSum(num1, num2){
            return num1, num2; //return返回最后一个值
        }
        console.log(getSum(2, 3));
        
        //3.求任意两个数的加减乘除结果
        function getResult(num1, num2){
            return [num1+num2, num1-num2, num1*num2, num1/num2];
        }
        console.log(getResult(4, 2));

        //4.函数如果有return，则返回的是return后面的值，如果函数没有return 则返回undefined
        function fun1(){
            return 12345;
        }
        console.log(fun1()); //12345
        console.log('================================');
        function fun2(){
        }
        console.log(fun2()); //undefined
    </script>

berak、continue、return区别

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

理解函数

输入苹果 通过内部处理 出来苹果汁

输入参数 内部处理 返回结果

案例:计算器

1.写一个函数简易计算器

        //1.输入两个数字任意算数运算
        var leixin = prompt('请输入您需要计算的类型：' + '\n' + '1.加法' + '\n' + '2.减法' + '\n' +'3.乘法' + '\n' + '4.除法' + '\n' +'5.退出');
        function jisuan(num){
            var num1 = parseFloat(prompt('请输入数字1：'));
            var num2 = parseFloat(prompt('请输入数字2：'));
            var result;
            switch(parseFloat(num)){
                case 1:
                result = num1 + num2;
                break;
                case 2:
                result = num1 - num2;
                break;
                case 3:
                result = num1 * num2;
                break;
                case 4:
                result = num1 / num2;
                break;
                case 5:
                // result = alert('您正在退出！');
                berak;
            }
            alert('您的运算结果是：' + result);
            leixin = prompt('请输入您需要计算的类型：' + '\n' + '1.加法' + '\n' + '2.减法' + '\n' +'3.乘法' + '\n' + '4.除法' + '\n' +'5.退出');
            //如果没有上面那一句，就会循环的进行加法，无法结束
        }
        while(1 == 1){
            if(leixin == '1'){
                jisuan(1);
            }
            if(leixin == '2'){
                jisuan(2);
            }
            if(leixin == '3'){
                jisuan(3);
            }
            if(leixin == '4'){
                jisuan(4);
            }
            if(leixin == '5'){
                alert('您正在退出！');
                break;
            }
            
        }

        //2.写一个函数计算任意两个数字最大值
        function getMax(num1, num2){
            return num1 > num2 ? num1 : num2;
        }
        var num3 = prompt('请输入数字1：');
        var num4 = prompt('请输入数字2：');
        alert(getMax(num3, num4));

        //3.写一个函数计算任意三个数字最大值
        function getMax(num1, num2, num3){
            if(num1 >= num2 && num1 >= num3){
                return num1;
            }else if(num2 >= num1 && num2 >= num3){
                return num2;
            }else{
                return num3;
            }
        }
        var num3 = prompt('请输入数字1：');
        var num4 = prompt('请输入数字2：');
        var num5 = prompt('请输入数字3：');
        alert(getMax(num3, num4, num5));

4. 判断一个数字是否为质数

        function isPrimeNum(num){
            if(num == 2){
                return true;  
            }else{
                var f=0;
                for(var i = 2; i <= num/2; i++){
                    if(num % i == 0){
                        f=1;
                        return false;
                    }
                }
                if(f==0){
                    return true;
                }
            }
        }  
        var shuzi = prompt('请输入数字：');
        alert('这个数字是质数！'+ isPrimeNum(shuzi));

        function isPrimeNum(num){
            for (var i = 2; i < num; i++) {
                if (num%i==0){
                    return false;
                }
            }
            return true;
        }
        var res = isPrimeNum(2);
        console.log(res);

arguments的使用

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

        //arguments 的使用 只有函数有arguments对象 而且是每个函数内置好了arguments
        function fun1() {
            console.log(arguments); //里面存储所有传递过来的参数
            console.log(arguments.length);
            console.log(arguments[2]);
            // 可以按照数组的方式遍历argumrnts
            for (var i = 0;i <arguments.length; i++){
                console.log(arguments[i]);
            }
        }
        fun1(1, 2, 3);
        //伪数组，并不是真正意义上的数组
        //1.具有数组的 length 属性
        //2.按照索引的方式进行存储的
        //3.没有真正数组的一些方法 pop() push()等等

案例：利用函数求任意个数的最大值

    <script>
        //求任意个数的最大值
        function getMax(){
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++){
                if(arguments[i] > max){
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(getMax(1, 2, 3));
        console.log(getMax(1, 2, 3, 4));
        console.log(getMax(1, 2, 3, 4, 5));

    </script>

函数案例

1.翻转数组

    <script>
        function fanzhuan(arr){
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--){
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = fanzhuan([1, 2, 3, 4, 5]);
        console.log(arr1);
    </script>

2.冒泡排序

        function maopao(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;
        }
        var arr1 = maopao([1, 3, 4, 2, 9]);
        console.log(arr1);

3.是否是闰年

        function isRyear(num){
            // if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0){
            //     return true;
            // }else{
            //     return false;
            // }
            var flag = false;
            if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0){
                flag = true;
            }
            return flag;
        }
        var year = prompt('请输入年份：');
        console.log( isRyear(year));

每个函数都是独立的代码块，函数可以互相调用。

    <script>
        //函数可以互相调用
        function fn1(){
            console.log(11); //11
            fn2(); //22
        }
        fn1();

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

4.用户输入年份，输出当前年份2月份天数

    <script>
        function backDay(){
            var year = prompt('请您输入年份'); //放在前后不影响吗 返回前面闰年去看
            if(isRyear(year)){
                alert('当前年份是闰年有29天');
            }else{
                alert('当前年份不是闰年有28天');
            }
        }
        backDay();

        function isRyear(num){
            // if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0){
            //     return true;
            // }else{
            //     return false;
            // }
            var flag = false;
            if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0){
                flag = true;
            }
            return flag;
        }
    </script>

函数的两种声明方式

    <script>
        //函数两种声明方式
        //利用函数关键字命名
        function fn(){
        }
        fn();
        //2.函数表达式 匿名函数 fun是变量名 不是函数名
        //函数表达式声明方式和声明变量差不多 变量里面存放是值 函数表达式存放是函数
        //函数表达式也可以传递参数
        
        var 变量名 = function(aru){};
        var fun = function() {
            console.log('我是函数表达式');
            console.log(aru);
        }
        fun();
        fun('酸辣烤冷面'); //我是函数表达式 \n  酸辣烤冷面
    </script>