js函数学习小结

函数

1.函数的概念;

什么是函数;

函数就是封装了一段可以重复执行调用的代码块，目的就是让代码重复使用

代码;

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

2.函数的使用。

函数在使用的时候分为两步：声明函数和调用函数

2.1声明函数

  /*1.声明函数
      function 函数名(){
          //函数体
      }

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

2.2.调用函数

    2.调用函数
         函数名(); //通过调用函数名来执行函数

• 调用函数的时候千万不要忘记加上小括号
• 口诀：函数不调用，自己不执行

注意：声明函数本省并不会执行代码，只有调用函数的时候才会执行函数的具体代码

2.3.函数的封装

• 函数的封装是把一个或者多个功能通过函数的方式进行封装，对外只提供一个简单的函数接口
• 简单理解：封装类似于将电脑配件整合到组装机箱当中，类似于快递打包

案例：求函数计算1到100之间的累加和

<script>
        //利用函数计算1~100的累加和
        //1.声明函数,将代码进行封装
        function getSum() {
            var sum = 0;
            for (var i = 0; i <= 100; i++) {
                sum += i;
            }
            console.log(sum);
        }
        //调用函数：
        getSum();
    </script>

3.函数的参数

3.1、形参和实参

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

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

代码执行过程解释;

<script>
        //1.函数可以重复相同的代码
        // function cook() {
        //     console.log('酸辣土豆丝');
        // }
        // cook();
        // cook();
        //通过函数的参数实现函数重复不同的的代码；
        //在声明函数的小括号里面是形参(形式上的参数)
        /*
        function 函数名(形参1,形参2...){

        }
        //在函数调用的小括号里面是实参（实际的参数）
        函数名(实参1,实参2.。。。);*/
        //3.形参和实参的执行过程
        function cook(aru) { //形参是接接受实参 aru='酸辣土豆丝'，形参相当于一个变量
            console.log(aru);
        }
        cook('酸辣土豆丝')
        cook('大肘子')
        //函数的参数可有可无
    </script>

3.2案例

 <script>
        //1.利用参数求任意两个数的和
        /*
        function he(nu1, nu2) {
            var su = nu1 + nu2;
            console.log(su);
        }
        he(1, 2);
        he(3, 8);
        */

        //2.利用参数求任意两个数之间的和
        function he1(start, end) {
            var sum = 0;
            for (var i = start; i <= end; i++) {
                sum += i;
            }
            console.log(sum);
        }
        he1(1, 100)
        //3.注意点
        /*
         (1)多个参数用逗号隔开    
         (2)形参可以看做不用声明的变量
        */
    </script>

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

参数个数	说明
实参个数等于形参的个数	输出正确的结果
实参的个数多于形参的个数	只取到形参的个数
实参的个数小于形参的个数	多的参数被定义为undefined,结果NaN

代码;

 <script>
        //函数形参实参个数匹配
        function getSum(nu1, nu2) {
            console.log(nu1 + nu2);
        }
        //1.如果实参的个数和形参的个数一致，则正常输出结果
        getSum(2, 3);
        //2.如果实参的个数多于形参的个数  会取到形参的个数
        getSum(2, 3, 4);
        //3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是NaN
        // nu2是一个变量是没有接受值 结果就是undefined
        getSum(1); //NaN
        //建议 尽量让实参的个数和形参的个数相匹配
    </script>

3.4.小结

• 函数可以带参数也可以不带参数
• 声明函数的时候，函数的名括号里面的是形，形参的默认值为undefined
• 调用函数的时候，函数括号里面的是实参
• 多个参数中间用逗号分隔
• 形参的个数和实参的个数可以不匹配，但是结果可不预计，我们尽量匹配

4.函数的返回值

4.1 return 语句

有的时候，我们会希望函数将值返回给调用者，此时通过return语句就可以实现.

 <script>
        function cook(aru) {
            return aru;
        }
        console.log(cook('大肘子'));
        //2.当函数的返回值格式
        function 函数名(){
            return 需要返回的结果;
        }
        //函数名();
        //(1)我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return来实现的
        //(2)只要函数遇到return,就把后面的结果返回给函数的调用者 函数名() = return 后面的结果
        //3.代码验证
        function getResult() {
            return 666;
        }
        getResult(); //getResult()=666;
        console.log(getResult());
        //4.求任意两个数的和
        function getSum(nu1, nu2) {
            return nu1 + nu2;
        }
        console.log(getSum(3, 4));
    </script>

案例：求两个数之间的最大值

 <script>
        function he(nu1, nu2) {
            if (nu1 > nu2) {
                return nu1;
            } else {
                return nu2;
            }
        }
        console.log("两个数之间的最大值" + he(6, 4));
    </script>

用三元运算符改造：

return nu1 > nu2 ? nu1 : nu2;

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

求数组中的[5,2,99,101,67,77]中的最大值

 <script>
        //求数组中的[5,2,99,101,67,77]中的最大值
        function getArrayMax(arr) {
            var max = arr[0];
            for (var i = 0; i < arr[length]; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            return max;
        }
       // console.log(getArrayMax([5, 2, 99, 101, 67, 77])); //实参是一个数组送过去
//在实际开发的过程中，我们通常用一个变量来接受一个结果
        var res = getArrayMax([5, 2, 99, 101, 67, 77]);
        console.log(res);
    </script>

4.2 return 终止函数

return后面的代码不会被执行

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

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

<script>
        //函数返回值的注意事项
        //2.return 终止函数
        function getSum(num1, num2) {
            return num1 + num2; //return后面的代码不会被执行
            alert('我是不会被执行的')
        }
        console.log(getSum(1, 2));
        //return只能返回一个值
        function fn(num1, num2) {
            return num1, num2; //返回的结果是最后一个值
        }
        console.log(fn(3, 4)); //结果是4.
        //3.我们求任意两个数的 加减乘除结果
        function getResult(nu1, nu2) {
            return ([nu1 - nu2, nu1 + nu2, nu1 * nu2, nu1 / nu2])
        }
        console.log(getResult(6, 3));
    </script>

4.5 break ,continue,return 的区别

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

5.arguments的使用

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

<script>
        //arguments的使用 只有函数函数才有 arguments对象，而且每个函数都内置好了这个arguments
        function fn() {
            console.log(arguments); //里面存储了所有的实参
            console.log(arguments.length);
            console.log(arguments[2]);
            //我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        //伪数组，并不是真正意义上的数组
        //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));
        console.log(getMax(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 34, 444, 5, 100));
    </script>

6.函数案例

案例一：

利用函数封装的方式，翻转任意一个数组

 <script>
        //利用函数翻转任意数组
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];//翻转数组操作
            }
            return newArr;
        }
        var arr1 = reverse([1, 3, 4, 6, 9]);
        console.log(arr1);
    </script>

案例二：

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

 <script>
        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;
                        temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var arr1 = maopao([2, 4, 6, 5, 1]);
        console.log(arr1);
    </script>

案例三、判断闰年

要求:输入一个年份，判断是否为闰年(闰年：能被4整除并且不能被100整除，或者能被400整除)

<script>
        function run(num) {
            if ((num % 4 == 0 && num % 100 != 0) || num % 400 == 0) {
                console.log("是闰年");
            } else {
                console.log('不是闰年');
            }
        }
        run(2008);
    </script>

pink老师写的：

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>
        //函数是可以相互调用的
        function fn1() {
            console.log(11);
            fn2(); //在fn1函数里面调用了fn2函数
        }
        fn1();

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

小案例：判断二月有多少天：

 <script>
        //用户输入年份，输出当前2月份的天数
        function backDay() {
            var year = prompt('请输入年份:')
            if (isRunYear(year)) {
                alert('当前年份是闰年2月份有29天')
            } else {
                alert('当前年份是平年2月份有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>

函数的两种的定义方式;

s<script>
        //函数调用的两种方式
        //1.利用函数关键字自定义函数(命名函数)
        function fn() {

        }
        fun();
        //2.函数表达式
        var 变量名 = function() {};
        var fun = function() {
            console.log('我是函数表达式');
        }
        fun();
//(1).fun是变量名，不是函数名
        //(2).函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数。
        
    </script>