JavaScript学习笔记04

发布于:2023-01-12 ⋅ 阅读:(517) ⋅ 点赞:(0)

一、函数介绍

        概念:将任意代码封装到一起,需要用的时候进行调用执行。就像一个盒子,盒子里面装代码,通过盒子名称找到盒子执行里面的代码。

        函数作用:封装代码。

        封装作用:复用代码。

        语法:

    //定义函数
    function 函数名(){
        函数体 //封装的代码
    }
    //函数调用语句
    函数名()

        示例:两个数中的最大数

<body>
    <script>
        function getMax(){
            var m=34
            var n=23
            var max=m
            if(max<n){
                max=n
            }
            console.log('max is '+max);
        }
        getMax()
    </script>
</body>

        输出:max is 34

二、函数参数

        函数有形参和实参。

        形参是在函数内部可以使用的变量,在函数外部不能使用,也不用再定义。形参的值是在函数调用的时候由实参决定的。

function 函数名(形参1,形参2...){
        函数体
    }

        实参是在函数调用的时候给形参赋值的,也就是说,在调用的时候传入的实际参数值。

 函数名(实参1,实参2...)

         示例:求最大值

<body>
    <script>
        //在定义函数的括号中,定义的变量叫形参,即x和y是形参
        function max(x,y){
            var max=x
            if(max<y){
                max=y
            }
            console.log('max:',max);
        }
        max(23, 45) //在函数调用语句中,传递的值叫实参,即23和45是实参
    </script>
</body>

        形参和实参是按照顺序一一对应的。

        1.当形参比实参少时,形参没有实参给的值,所以在函数内部无法用到这些值。

<body>
    <script>
        function fn(num1,num2){
            //函数内部可以使用num1和num2
        }
        fn(100,200,300)
        //本次调用的时候,传递了两个实参,100和200
        //100对应num1,200对应num2,300没有对应的变量
        //所以在函数内部就没有办法依靠变量来使用300这个值
    </script>
</body>

        2.当形参比实参多时,多出来的形参没有值,就是undefined。

<body>
    <script>
        function fn(num1,num2,num3){
            //函数内部可以使用num1、num2和num3
        }
        fn(100,200)
        //本次调用的时候,传递了两个实参,100和200
        //100对应num1,200对应num2,num3没有实参和其对应
        //所以num3的值就是undefined
    </script>
</body>

        参数默认值:

<body>
    <script>
        function fun(m){
            m = m || 10  //函数默认值
            console.log('m',m)
        }
        fun() //没有给实参,会打印默认值10
    </script>
</body>

 三、函数返回值

        函数中使用return给函数一个返回值和终断函数。

        1.终断函数:使用return关键字,不给返回值,让函数在中间位置停掉,让后面的代码不再执行。

        2.返回值:给执行完的函数一个结果。

<body>
    <script>
        //无返回值
        function f2(){
            console.log('f2')
            var i=1
            return
            console.log('i',i)
        }
        f2()

        console.log('-----------------')

        //有返回值
        function f1(){
            console.log('f1');
            return 100
        }
        console.log(f1());
    </script>
</body>

四、函数类型

     根据函数参数和返回值,分为四类:
    1.无参无返回值
        function fun(){

        }
        fun()
    2.无参有返回值
        function fun(){
            return 值
        }
        var m=fun()
    3.有参无返回值
        function fun(形参){

        }
        fun(实参)
    4.有参有返回值
        function fun(形参){
            return 值
        }
        var m=fun(实参)

五、函数定义方式

        1.声明式函数定义

        2.赋值式函数定义

<body>
    <script>
        //1.声明式 function 函数名(){}
        //2.函数表达式(赋值式) var 函数名=function (){} 函数名()
        var getMax=function (m,n){
            var max=m
            if(max<n)
                max=n
            console.log('max:',max);
        }
        getMax(12,13)
    </script>
</body>

六、预解析

         浏览器javascript引擎解析执行javascript代码。执行javascript代码之前,扫描通过js代码,如果发现声明式函数和var声明的变量,将其提前。

<body>
    <script>
        fun()
        console.log('111 num',num)
        function fun(){
            console.log('fun >>>');
        }
        var num=100
        console.log('222 num',num);
    </script>
</body>

        同名变量和函数解析方式:声明式函数优先。一定要避免函数名和变量同名。

<body>
    <script>
        fn()
        function fn(){
            console.log('我是fn函数');
        }
        fn()
        var fn=100
        fn()
    </script>
</body>

        if条件不管成立与否都会预解析,只是条件不成立不会执行代码。

<body>
    <script>
        console.log(num);
        if(false){
            var num=100
        }
        console.log(num)
    </script>
</body>

         return语句后代码不执行,但会进行预解析。

<body>
    <script>
        function fn(){
            console.log(num);
            if(true){
                var num=10
                return;
            }
            var num=100
        }
        fn()
    </script>
</body>

 输出一个:undefined

 七、练习

        1.求1*2*3*……*99*100的乘积

<body>
    <script>
        function fn(m,n){
            s=1
            for(var i=m;i<=n;i++){
                s *= i
            }
            return s
        }
        document.write(fn(1,100))
        //console.log(fn(1,100))
        //输出结果是:9.33262154439441e+157 
    </script>
</body>

        2.百元买百鸡

<body>
    <script>
        function fun() {
            //用一百元钱买一百只鸡。已知公鸡5元/只,母鸡3元/只,小鸡1元/3只。必须每种都有
            for (var gj = 1; gj < 100; gj++) {
                for (var mj = 1; mj < 100; mj++) {
                    // for(var chicken=1;chicken<100;chicken++){
                    //     if((gj+mj+chicken==100) && (5*gj+3*mj+chicken/3==100)){
                    //         document.write('公鸡有'+gj+'只'+'<br>')
                    //         document.write('母鸡有'+mj+'只'+'<br>')
                    //         document.write('小鸡有'+chicken+'只'+'<br>')
                    //         document.write('-----------------<br>')
                    //     }
                    // }
                    chicken = 100 - mj - gj
                    if (5 * gj + 3 * mj + chicken / 3 == 100) {
                        console.log('公鸡:', gj, '母鸡:', mj, '小鸡:', chicken)
                    }
                }
            }
        }
        fun()
    </script>
</body>

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到