小工具知识网

当前位置: 首页 > 行业知识 > 深入探讨javascript的流程控制与分支结构,以及js的函数

行业知识

深入探讨javascript的流程控制与分支结构,以及js的函数

2026-11-09 21:41:26 来源:互联网转载

✨✨ ���迎大家来到景天科技苑✨✨

养成好习惯,先赞后看哦~

所属的专栏:前端泛海

景天的主页:景天科技苑

文章目录

  • 1.流程控制与分支结构
    • 1.if分支结构
    • 2.switch case 分支结构
    • 3.循环结构
    • 2.函数
      • 1.函数定义方式一 :普通函数
      • 2.函数定义方式二:匿名函数
      • 3.变量提升
      • 4.函数定义方式三:不推荐 (了解) 把代码写在Function()里面
      • 5.函数定义方式四:闭包函数
      • 6.函数定义方式五:箭头函数
      • 7.函数参数 (普通位置参数,默认参数)
      • 8.arguments 自动收集所有的实参,是个数组
      • 3.函数调用

        1.流程控制与分支结构

        在javascript中的一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。

        很多时候我们要通过控制代码的执行顺序来实现我们要完成功能。

        简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行

        流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

        1.if分支结构

                    流程控制 -> 分支结构             var mashengni = "美女";        //1.单项分支        // if(mashengni == "美女"){        //     alert("给他买好吃的~");        // }        //2.双项分支        // if(mashengni == "野兽"){        //     alert("给他一榔头~");        // }else{        //     alert("跳起来给他一榔头~");        // }        //3.多项分支        // 不推荐判断条件连续比较,有可能失效;       多条件用&& 连接才行,不能用 10000             console.log("正常薪资范围~");        }else if(12000             console.log("超过一般水平~");        }else if(15000             console.log("大神级毕业生~");        }else if(salary = 18000){            console.log("王牌毕业生~");        }else{            console.log("回炉重生~")        }        //4.巢状分支,分支嵌套        var youqian = true;        var youfang = true;        if(youqian){            if(youfang){                console.log("老子要嫁给你~!");            }        }     创建变量// let -> 创建变量// const -> 创建常量// function fn(){//     // 提前声明name, 这种现象叫变量提升//     // 站在开发人员的角度分析. 是不合理的.//     console.log(name);//     var name = '大马猴'; // 正常人理解. 应该是报错的.//     // 新版本的js -> es6 对变量的提升进行的修复.//     // let声明的变量. 没有变量提升// }// fn()// 常量的声明,不希望后续的程序去修改该变量的值// const BIRTH_DAY = 2000;//// BIRTH_DAY = 1998; // 把规范的东西标准化// console.log(BIRTH_DAY);

        变量提升,打印出name undefined

        const 修饰的常量不允许修改,强制修改报错

        4.函数定义方式三:不推荐 (了解) 把代码写在Function()里面

            // var func3 = new Function("alert('我是func3~');alert('woshi3333');");    // console.log(func3,typeof(func3));    // func3();   带参数,前面写参数,后面写代码体    // var func4 = new Function("x","y","alert(x+y)");    // func4(5,6);

        5.函数定义方式四:闭包函数

        function func5(){    var a = 100;    function func6(){        console.log(a,"");        return "我是闭包函数";    }    return func6;}func = func5();res = func();console.log(res);

        内函数使用了外函数的变量,外函数将内部函数返回出来

        func6是闭包函数

        在一个html中引入多个js文件时,大概率会出现变量名冲突的变量

        怎样才能让自己代码的变量名与别人的不冲突呢

        将变量名设为局部变量

        外部要想用到局部变量,则需要将变量返回出来

        此时就用到了闭包

        // rsa 加密 -> key// 这里直接用var声明的东西. 自动进window(function(){    // 局部变量    // 外界无法对key进行修改    var key = "22222222";    var b64 = function(){        console.log("我是rsa, 我也需要b64");    }    // 提供给外界的一个接口.    // 外界使用该变量来访问闭包中的功能    window.rsa = function(){        console.log("我也要开始加密了. 我是rsa")        b64();        console.log(key);        return "rsa加密结果";    }})()

        6.函数定义方式五:箭头函数

        function mysum(x,y){    return x+y;}res = mysum(5,6)console.log(res,"");var mysum = (x,y)  =>  {return x+y;}        var res = mysum(5,6);console.log(res,"========3334444=========");

        =>箭头函数,把一个函数传递到另一个函数,作为参数

        箭头格式不能变,一定得是向右指向

        // if (a > 5) console.log(3333333); // 如果只有一句话.可以省略大括号// else {//     console.log(6666666);// }// let fn = function(){//     console.log("你好啊");// }//// fn();//// // 箭头函数// let gn = ()=>{//     console.log("我不叫赛利亚");// }//// gn();// setTimeout(()=>{//     console.log("123")// }, 1000);
         // // 如果只有1个参数. 可以省略()        // let an = n => {        //     console.log(n);        // }        //        // an(18);        // // 慢慢捋        // function fn(n, m){        //     m(n); //        // }        //        // a = 10;        // fn(a, n => {        //     console.log(n);        // });

        7.函数参数 (普通位置参数,默认参数)

        // js中的形参实参不匹配不会报错function func7(a,b,c=3){    console.log(a,b,c);}func7(10,11);func7(10,11,12);func7(10,11,12,13);

        参数写多了也不报错

        只能按位置参数处理,不能用关键字传参

            console.log("")

        8.arguments 自动收集所有的实参,是个数组

        // 计算任意个数值的累加和;function func8() {    // console.log(a,b)    // console.log(arguments)    var total = 0;    for(var i of arguments){        total += i;        console.log(i);    }    return total;}res = func8(1,100,2,3,4,5,56,6);console.log(res);

        收集所有实参,不管有没定义形参,都收集

        遍历出参数,计算出参数计算结果

        控制台打印

            

        3.函数调用

        在JavaScript中,常见的有四种不同的方式进行函数调用:

        1.作为一个函数进行调用,这是最简单的形式。

        2.作为一个方法进行调用,在对象上进行调用,支持面向对象编程。

        3.作为构造器进行调用,创建一个新对象。

        4.通过apply() 或call() 方法进行调用。

                    函数的调用            function func(){            console.log("函数正在执行 ... ");        }        // 1.正常调用        func();        // 2.函数的立即执行,不用手动调用        (function func2(){            console.log("函数正在执行2 ... ")        })();        // 3.匿名函数的立即执行        (function(){            console.log("匿名函数正在执行3 ... ")        })();        // 4.其他立即执行的方法;        !function(){            console.log("我在执行4 ... ");        }();        ~function(){            console.log("我在执行5 ... ");        }();    

上一篇:苹果用户必学,Instagram软件下载指南!

下一篇:xshell怎么查服务器配置?