JavaScript基础语法8-函数

• 函数的概念

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

• 函数的使用

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

1. 声明函数

2. 调用函数

 3. 函数的封装

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

    <script>
        // 利用函数计算1-100之间的累加和
        // 1. 声明函数
        function getSum(){
            var sum = 0;
            for(var i = 0; i <= 100; i++){
                sum += i;
            }
            console.log(sum);
        }
        // 2. 调用函数
        getSum();
    </script>

• 函数的参数

1. 形参和实参

 示例及注意点：

    <script>
        // 1. 函数可以重复相同的代码
        function cook(){
            console.log('番茄鸡蛋');
        }
        cook();
        cook();

        // 2. 我们可以利用函数的参数实现函数重复不同的代码
         /* function 函数名(形参1, 形参2...){ // 在声明函数的小括号里面是 形参 （形式上的参数）

        }
        函数名(实参1, 实参2...); // 在函数调用的小括号里面是实参 (实际的参数)
         */

        // 3. 形参和实参的执行过程
        function cook1(aru){  // 形参是接收实参的 aru = '酸辣土豆丝'; 形参类似一个变量
            console.log(aru);
        } 
        cook1('酸辣土豆丝');
        cook1('大肘子');

        //  函数的参数可以有，也可以没有  参数个数不限
    </script>

 案例

    <script>
        //  1. 利用函数求任意两个数的和
        function getAddNum(num1, num2){
            console.log(num1 + num2);
        }
        addNum(1,3);
        addNum(4,3);

        //  2. 利用函数求任意两个数之间的和
        function getSumNum(num1, num2){
            var sum = 0;
            for(var i = num1; i <= num2; i++){
                sum += i;
            }
            console.log(sum);
        }
        sumNum(1,5);
        sumNum(1,50);

        // 3. 注意点
        // （1） 多个参数之间用逗号隔开
        // （2） 形参可以看做是不用声明的变量
    </script>

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

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

案例

    <script>
        //  函数形参实参个数匹配
        function getSum(num1, num2){
            console.log(num1 + num2);
        }
        // 1. 如果实参的个数和形参的个数一致 则正常输出结果
        getSum(2,3);
        // 2. 如果实参的个数多于形参的个数 只取形参的个数，多于形参个数的忽略
        getSum(2,6,4);
        // 3. 如果实参的个数小于形参的个数
        // 形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果是undefined
        getSum(2); //NaN
        // 建议 我们尽量让实参的个数和形参相匹配
    </script>

 3. 小结

• 函数的返回值

1. return语句

    <script>
        // 函数是做某件事或者实现某种功能
        function cook(aru){
            console.log(aru);
        }
        cook('大肘子');

        // 2.函数的返回值格式
        function 函数名(){
            return 需要返回的结果;
        }
        函数名();
        // (1) 函数只是实现某种功能， 最终的结果需要返回给函数的调用者 函数名()
        // (2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
        function getResult(){
            return 666;
        }
        getResult(); //  getResult() = 666
        console.log( getResult());

        function cook(aru){
            return aru;
        }
        console.log(cook('大肘子'));

        // 4. 求任意两个数的和
        function getSum(num1, num2){
            return num1 + num2;
        }
        console.log(getSum());
    </script>

2. return 终止函数

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

    <script>
        // 函数返回值注意事项
        // 1. return 终止函数
        function getSum(num1, num2){
            return num1 + num2; // return 后面的代码不会执行
            console.log(num1);
        }
       var sum = getSum(1, 3);
       console.log(sum);
    </script>

3. return 的返回值

return 只能返回一个值。

    <script>
        // 函数返回值注意事项
        // 1. return 终止函数
        function getSum(num1, num2){
            return num1 + num2; // return 后面的代码不执行
            console.log(num1);
        }
       var sum = getSum(1, 3);
       console.log(sum);

        // 2. return 只能返回一个值
        function fn(num1, num2){
            return num1, num2; //返回的结果是最后一个值
        }
        console.log(fn(1, 2));

        // 3. 求任意两个数的 加减乘除
        function getRes(num1, num2){
            return [num1+num2,num1-num2,num1*num2,num1/num2];
        }
        var res = getRes(2, 3); // 返回的是一个数组
        console.log(res);
    </script>

4. 函数没有return 返回 undefined  

函数都是有返回值的

1.如果有return 则返回return 后面的值

2.如果没有return  则返回 undefined

   <script>
       //  函数有return 返回 return后面的值； 函数没有return返回 undefined  
        function fun1(){
            return 666;
        }
        console.log(fun1()); // 返回666
        function fun2(){
           
        }
        console.log(fun2()); // 返回undefined  
    </script>

5. break, continue, return 的区别

• arguments的使用

 

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

 案例

    <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,5));
        console.log(getMax(11,22,35,44,55));
    </script>

• 函数案例

     1.   利用函数封装方式，对数组排序--冒泡排序

    <script>
        // 利用函数封装方式，对数组排序--冒泡排序
        function sort(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 = sort([6,9,4,3]);
        console.log(arr1);
    </script>

2.判断闰年

    <script>
        // 输入一个年份，判断是否是闰年（闰年：能被4整除并且不能被100整除，或者能被400整除）
        function isRunYear(year){
            // 如果是闰年 返回true  否则返回false
            var flag = false;
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                flag = true;
            }
            return flag;
        }
        console.log(isRunYear(2000));
    </script>

3. 函数相互调用

    <script>
        //  函数互相调用
        function fn1(){
            console.log(11);
            fn2(); // 在fn1 函数里面调用了 fn2 函数
        }
        fn1();
        function fn2(){
            console.log(22);
        }
    </script>

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

    <script>
        // 用户输入年份，输出当前年份的2月份的天数
        function backDay(){
            var year = prompt('请你输入年份');
            if(isRunYear(year) == true){
              alert('29天');  
            }else{
                alert('28天');
            }
        }
        backDay();

        // 判断是否为闰年的函数
        function isRunYear(year){
            // 如果是闰年 返回true  否则返回false
            var flag = false;
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                flag = true;
            }
            return flag;
        }

    </script>

• 函数的两种声明方式

        1. 利用函数关键字自定义函数(命名函数)

        function fn(){    

        }

        2. 函数表达式(匿名函数)

        var 变量名 = function(aru){}; 

    <script>
        // 函数的两种声明方式
        // 1. 利用函数关键字自定义函数(命名函数)
        function fn(){
            
        }
        fn();
        // 2. 函数表达式(匿名函数)
       /*  var 变量名 = function(aru){}; */
        var fun = function(aru){
            console.log('我是函数表达式');
        }
        fun('pink');
        // （1） fun是变量名 不是函数名
        //  (2) 函数表达式声明方式跟声明变量差不多，
        //   （2.1）变量里面存的是值  而函数表达式存的是函数
        //  (3) 函数表达式也可以进行传递参数
    </script>