JS 06——function(）函数、函数里的形参和实参、return 返回值与return返回、形参也是可以设置默认值的、认识变量作用域、变量提升

一、函数概述

二、自定义函数

1、函数结构：

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

//自定义函数printChina()
    function printChina(){
        document.write("<h1>中国年</h1>")
    }
    //调用function函数，这里调用了3次，所以运行结果就会出现三次
    printChina()

    printChina()

    printChina()

运行结果：

注意：我们可以用外联的方式，在外边的一个js文件里写好js代码，然后直接调用即可

 <script src="../1.22js的学习/js文件夹/index1.js"></script>
  <script>
        //调用function函数
        printChina()
        printChina()
        printChina()
  </script>
   

2、理解形参和实参

 <script>
        //有参（形参：形式上的参数）函数
        function printNum(start, end) {
            if (start > end) {
                console.error('start必须小于end')
            }
            for (var i = start; i <= end; i++) {
                document.write('<h1>中国中国</h1>')
            }
        }
        //开始调用函数 函数()
        //实参：实际的参数
        printNum(2, 10)
 </script>

运行结果：

3、return在函数体里，可以加返回值，也可以在循环里，表示返回

（1）return加返回值

函数一般都有返回值，至于之后有没有人要这个返回值，那另说，反正作为函数，一般情况下，返回值都要写。

 <script>
        //return：返回
        function sum(a, b) {
            var sum1 = a + b;
            return sum1;
        }

        function ji(a, b) {
            var result1 = a * b;
            return result1;
        }
        var r = sum(2, 3)
        var result = ji(r, 8)
        document.write(result)
    </script>

运行结果：
（2）return直接表示返回

程序见了return，那么程序立刻、马上就结束了，程序全部结束！如果你return之后还写了一行、两行什么的，反正，程序都不会再执行他们了，你要是写了，程序就会报错。break是结束循环（结束所有的循环），continue是结束本轮循环！而今天我们新学的return，表示的是 程序运行到return这里就直接结束了。

 <script>
         //return在这里表示返回
        function print1(){
            for (let i=0;i<=10;i++){
                for (let j=i;j<20;j++){
                    document.write(i+','+j)
                    document.write('<hr>')
                    if (j==5){
                        return;
                    }
                }

            }
        }
        print1();
    </script>

运行结果：

4、形参，也是可以设置默认值的

 <script>
        //给函数的形参设置默认值
        //栈区（先进后出 栈区内存空间比较小，存取内存速度比较快）  堆出
        function cal(a=1,b=2){
            document.write(a+'<hr>');
            document.write(b+'<hr>')
            var sum = a+b;
            return sum;
        }
        var res=cal(4,5)
        document.write(res)
    </script>

运行结果：

5、认识变量作用域

    <script>
        //变量作用域：全局和局部
        var cal = function(a=1,b=2){
           if(a==1){
               var c = 78;
               if(b==2){
                   var m  = 900;
                   alert(m)//结果会弹出900
               }   
               alert(m)//结果会弹出900
           }
           alert(m)//结果会弹出900
       }

       cal()
       alert(m)//这里的这个alert(m)，就不会再弹出结果了，程序就会报错啦！因为这个m是在函数体外设定的，程序识别不出来这个m是什么
    </script>

6、变量提升

var可以先用，再声明，称为变量提升。只有var有变量提升，let不可以

<script>
       alert(a)
       var a;
       a=78;
   </script> 

那么，我们的程序，其实是可以访问到a变量的，只是拿不到a变量的值而已。所以会弹出undefined，并不会报错。下图为运行结果：

下面用let演示一下，就会发现，let确实不会产生变量提升。

<script>

function cal(a,b){
            if(a==1){
                let c = 90;
                alert(c)
            }
            alert(c)
        }
        cal(1,2)
        
</script>