函数

#1.函数的概念

函数：就是封装了一段可重复被调用的代码块

#2.函数的使用

函数使用分为 声明函数和使用函数

2.1.声明函数 和 调用函数

<script type="text/javascript">
            // 函数使用分为 声明函数和使用函数
            // 1.声明函数
            // function 函数名(参数) {
            //     函数体
            // }
            function get() {
                console.log('hi~~~');
            }
            // (1) function 声明函数的关键词 全部小写
            // (2) 函数是做某件事情，函数名一般是动词 get
            // (3) 函数不调用自己不会执行的
            // 2.调用函数
            // 函数名()
            get()
        </script>

注意：调用函数时千万别忘啦加小括号

2.2.封装函数

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

案例

<script type="text/javascript">
            // 求1~100之间的累加和
            function getsum() {
                let sum = 0;
                for (var i = 1; i <= 100; i++) {
                    sum += i;
                }
                console.log(sum);
            }
            getsum()
        </script>

#3.函数的参数

3.1形参和实参

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

 

 

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

<script type="text/javascript">
            //利用参数求固定值
            function getsum(a, b) {
                console.log(a + b);
            }
            getsum(3, 8)
            //利用参数求任意两数之间的和
            function getSums(start, end) {
                var sum = 0;
                for (var i = start; i <= end; i++) {
                    sum += i;
                }
                console.log(sum);
            }
            getSums(1, 100)
            //3.注意点
            //(1) 多个参数之间用逗号隔开
            //(2) 形参可以看做成不用声明的变量
        </script>

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

<script type="text/javascript">
            //函数形参和实参个数匹配
            function getSum(a, b) {
                console.log(a + b);
            }
            // 1.如果实参的个数和形参的个数一致 则正常输出结果
            getSum(1, 2);
            // 2.如果实参的个数多余形参的个数  会取到形参的个数
            getSum(1, 2, 3)
            // 3.如果实参的个数小于形参的个数  多于的形参定义为 undefined 最终的结果就是 NaN
            // 形参可以看作是不用声明的变量 num2 是一个变量但是没有接受值 结果就是 undefined
            getSum(2) //NaN
            // 建议 我们尽量让实参的个数和形参的相匹配
        </script>

 

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

3.4小结

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

2.在声明函数是，函数括号里的是形参，形参的默认值是 undefined

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

4.多个参数中间用逗号相隔

5.形参的个数可以和实参的个数不匹配，但是结果不可预计，我们尽量要匹配

#4.函数的返回值

4.1. return 语句

<script type="text/javascript">
            // 函数返回值格式
            // function 函数名() {
            //     return 需要返回的结果；
            // }
            // 函数名()
            //(1) 我们函数只是实现某种功能，最终的结果需要返回个函数的调用者函数名() 通过 return 实现的
            //(2) 只要函数遇到 return 就把后面的结果 返回给函数的调用者 函数名 () = return 后面的结果
            //3.代码验证
            function getReturn() {
                return 666;
            }
            console.log(getReturn());
        </script>

 4.2 return 终止函数

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

<script type="text/javascript">
            function get(num1, num2) {
                return num1 + num2
                alert('我不会被执行') // return 后面的代码不会被执行
            }
            console.log(get(1, 2));
        </script>

4.3 return 的返回值

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

<script type="text/javascript">
            function fn(num1, num2) {
                return num1, num2; // 返回的结果是最后一个值
            }
            console.log(fn(1, 2));
        </script>

4.4 函数如果没有 return 返回的是 undefined

我们的函数如果有 return 则返回的是 return 后面的值，如果有函数没有 return 则返回 undefined

<script type="text/javascript">
            //4.我们的函数如果有 return 则返回的是 return 后面的值，如果有函数没有 return 则返回 undefined
            function fun1() {
                return 666;
            }
            console.log(fun1()); // 666
            function fun2() {
                
            }
            console.log(fun2()); // undefined
        </script>

#5.arguments 的使用

<script type="text/javascript">
            //利用函数求任意个数的最大值
            function getMax() {
                let 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, 2, 5, 53, 45, 241));
        </script>

#6.函数案例

案例1：利用函数封装方式，反转任意一个数组

<script type="text/javascript">
            //利用函数翻转任意数组
            function reverse(arr) {
                let newArr = [];
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i]
                }
                return newArr
            }
            let arr1 = reverse([1, 2, 3, 4, 5, 6, 7, 8, 9])
            console.log(arr1);
        </script>

案例2：利用函数封装方式，对数组排序--冒泡排序

<script type="text/javascript">
            function sort(arr) {
                for (var i = 0; i < arr.length; i++) {
                    for (var k = 0; k < arr.length - 1; k++) {
                        if (arr[k] > arr[k + 1]) {
                            let zzm = arr[k]
                            arr[k] = arr[k + 1]
                            arr[k + 1] = zzm
                        }
                    }
                }
                return arr;
            }
            let arr1 = sort([1, 4, 7, 2, 5, 8, 3, 6, 9])
            console.log(arr1);
        </script>

案例3：判断闰年

<script type="text/javascript">
            function isRun(year) {
                //如果是润年返回 true 否则返回 false
                let flag = false;
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                    flag = true
                }
                return flag
            }
            console.log(isRun(2000));
        </script>

案例4：判断平年闰年2月份有几天

<script type="text/javascript">
            //用户输入年份，输出当前年份2月份的天数
            function backDay() {
                var year = prompt('请输入年份:')
                if (isRun(year)) {
                    alert('当前年份是闰年2月份有29天')
                } else {
                    alert('当前年份是平年2月份有28天')
                }
            }
            backDay();

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

#7.函数的两种声明方式

1.利用函数关键字自定义函数

<script type="text/javascript">
            function fn() {
                
            }
            fn()
        </script>

2.函数表达式

<script type="text/javascript">
            let 变量名 = function() {}
            let fun = function() {
                console.log('我是函数表达式');
            }
            fun();
        </script>

（1）fun 是变量名 不是函数名

（2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数

（3）函数表达式也可以进行传递参数