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

景天科技苑2024-03-07 9:59

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

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

所属的专栏： 前端泛海
景天的主页： 景天科技苑

文章目录

1.流程控制与分支结构

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

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

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

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

1.if分支结构

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程控制 -> 分支结构 </title>
</head>
<body>
    <script>
        var mashengni = "美女";
        //1.单项分支
        // if(mashengni == "美女"){
        //     alert("给他买好吃的~");
        // }

        //2.双项分支
        // if(mashengni == "野兽"){
        //     alert("给他一榔头~");
        // }else{
        //     alert("跳起来给他一榔头~");
        // }

        //3.多项分支
        // 不推荐判断条件连续比较,有可能失效;
       多条件用&& 连接才行，不能用 10000 <salary<15000

        var salary = 1000;
        if(10000 < salary && salary < 12000){
            console.log("正常薪资范围~");
        }else if(12000 <= salary && salary < 15000){
            console.log("超过一般水平~");
        }else if(15000 <= salary && salary <18000){
            console.log("大神级毕业生~");
        }else if(salary >= 18000){
            console.log("王牌毕业生~");
        }else{
            console.log("回炉重生~")
        }

        //4.巢状分支，分支嵌套
        var youqian = true;
        var youfang = true;
        if(youqian){
            if(youfang){
                console.log("老子要嫁给你~!");
            }
        }

    </script>
    
</body>
</html>

2.switch case 分支结构

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支结构 : switch case </title>
</head>
<body>
    <script>

js日期

日期的获取方法 Date/date

获取当前小时

html 复制代码 
   var date = new Date();
    console.log(date);
    // 获取星期 getDay
    var week = date.getDay();
    console.log(week)
    week = "1"

    // 注意点: switch case中的判断(全等于): (1) 值的比较(2)类型的比较 全部符合才能满足条件;
  switch语法 ：

    switch (week){
        
        case 1:
            console.log('星期一');
            break;   //一定要加break  打断后续的case, 能防止case穿透  不然寻找到正确的条件之后，后面的case不做判断，直接执行
        
        case 2:
            console.log('星期二');
            break;

        case 3:
            console.log('星期三');
            break;

        case 4:
            console.log('星期四');
            break;
        case 5:
            console.log('星期五');
            break;

        case 6:
            console.log('星期六');
            break;

        default:    //所有条件都不满足，走default分支
            console.log("星期日!");
            break;
    }

week为字符串'1'，case里面是数值1，所以匹配不到，打印出默认值 星期日

将week改为1，则匹配成功

html 复制代码 
    </script>
    
</body>
</html>
html 复制代码 
// 给你月份判断该月份是第几季度，利用case穿透，使代码更简洁
// var month = 2
// switch (month){
//     case 1:
//     case 2:
//     case 3:
//         console.log("第一季度");
//         break
//     case 4:
//     case 5:
//     case 6:
//         console.log("第二季度");
//         break
//     //...
// }

3.循环结构

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分支结构 : 循环结构 </title>
</head>
<body>
    <script>

      
  // ### 1.for循环
        /*
            语法特征:
                1号    2号     3号
                for(初始值;判断条件;自增自减的值){
                    code1
                    code2..
                }
                先执行1,2满足后执行代码体
                然后执行3,2满足后在执行代码体
                以此类推...
                直到不满足条件终止循环;
        */
        // 打印 1~100
        for(var i = 1;i<=100;i++){
            console.log(i);
        }
html 复制代码 
// 打印1~100 遇到50,自动跳过;
for(var i = 1;i<=100;i++){
    if(i == 50){
        continue;
    }
    console.log(i);
}

50被跳过

html 复制代码 
 // ### 2.while 循环
        //遇到5,终止循环
        i = 0
        while(i<10){
            if( i == 5){
                break;
            }
            console.log(i);
            i++;            
        }
html 复制代码 
        console.log("<===============第一组===================>")
        // ### 3.for( var i in Iterable )  获取的是数组中的索引号;
        var arr = ["孟浩然","赵子龙","康乃馨","张飞","汪精卫"];
        
可以根据索引拿数组中的值      
  for(var i in arr ){
            console.log(i);
            console.log(arr[i]);
        }
html 复制代码 
console.log("<===============第二组===================>")
// 获取的是js对象中的键
var dic = {"a":"王同培","b":"马村你","c":"张宇"};
for(var i in dic){
    console.log(i)       
    console.log(dic[i]) ;    
}
html 复制代码 
        console.log("<===============第三组===================>")
       
 // ### 4.for( var i of Iterable ) 获取的是数组中的值; [等价于python中 for i in Iterable:]
        for(var i of arr){
            console.log(i);
        }
html 复制代码 
        console.log("<===============第四组===================>")
      
  // 注意点: for(var i of dic) 不能遍历js对象[字典] error
        /*
        var dic = {"a":"王同培","b":"马村你","c":"张宇"};
        for(var i of dic){
            console.log(i)     
        }
        */
html 复制代码 
// 字符串的遍历:
        for(var i of "abcdefg"){
            console.log(i)
        }
html 复制代码 
    </script>
</body>
</html>

2.函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法,函数就是包裹在花括号中的代码块，前面使用了关键词 function： 当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

将脚本编写为函数，就可以避免页面载入时执行该脚本。 函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行 [1]。

你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 <head> 部分。

1.函数定义方式一 ：普通函数

(存在预加载机制,提前把函数加载到内存中,然后代码整体再执行)

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
</head>
<body>
    <script>
        
func1()
 
 // ###1 函数
 
   // 方式一 普通函数 (存在预加载机制,提前把函数加载到内存中,然后代码整体再执行)
        func1()
        function func1(){
            console.log(111);
        }

存在预加载机制，可以先调用，再定义

函数命名的特殊字符：

html 复制代码 
$和_
function _(){
  console.log("我是一个$函数");
      }

 _();  // $, _普通字符 -> 1是为了简单, 2是为了绕你


        // // fn();// 让变量fn所指向的那个东西. 运行起来
        //
        // gn = fn; // 实际上是内存地址的复制
        // fn();
        // gn(); //  123 对
        // // 函数的运行不是依赖于函数名. 而是依赖于内存地址

2.函数定义方式二：匿名函数

(匿名函数没有预加载价值,必须先定义再调用) 匿名函数想要运行 让该内存地址 加括号就可以了

// func2() error
var func2 = function(){
    console.log('我是func2~');
}
func2();

匿名函数先调用报错

先定义，后调用正常执行

html 复制代码 
    var x = (function(a){  // 形参->变量
          console.log("我爱你"+a);
          return "堕落小羊"
        })(123456); // 自运行函数

        console.log(x);

window是顶级作用域,内部的东西想要调用的话. 可以省略window

        // // 关于对象的补充
        // var wf = {
        //     name: "子怡",
        //     age: 199,
        //     songs: ["吹天理", "夏天不里", "秋天奖励", "冬天美丽"],
        //     chi: function(){
        //         // this就是当前对象
        //         console.log(this.name + "喜欢吃饭"); // this关键字
        //         this.he("北冰洋");
        //     },
        //     he: function(yinliao){
        //         console.log(this["name"] + "在喝"+ yinliao);
        //     }  // 7
        // }
        //
        // wf.chi(); // 777   999

      

  // // 在前端js中不存在多个返回值
        // function fn(){
        //     // 前端 多个逗号隔开. 最终返回的是最后一项.
        //     //
        //     var i = 0
        //     i++;
        //     ++i;
        //     i++;
        //     return i;
        //     return n=a(),
        //         n++,
        //         t=b(n),
        //         t;
        // }
        //
        // var r = fn();
        // console.log(r);

如果要返回多个值，需要用数组包裹

也可以封装到json中返回

3.变量提升

html 复制代码 
// 记住结论即可
// var -> 创建变量
// 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()里面

html 复制代码 
    // 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.函数定义方式四：闭包函数

html 复制代码 
function func5(){
    var a = 100;
    function func6(){
        console.log(a,"<===>");
        return "我是闭包函数";
    }
    return func6;
}

func = func5();
res = func();
console.log(res);

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

func6是闭包函数

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

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

将变量名设为局部变量

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

此时就用到了闭包

html 复制代码 
// 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.函数定义方式五：箭头函数

html 复制代码 
function mysum(x,y){
    return x+y;
}
res = mysum(5,6)
console.log(res,"<=======11122233=======>");
var mysum = (x,y)  =>  {return x+y;}        
var res = mysum(5,6);
console.log(res,"========3334444=========");

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

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

html 复制代码 
// 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);


html 复制代码 
 // // 如果只有1个参数. 可以省略()
        // let an = n => {
        //     console.log(n);
        // }
        //
        // an(18);

       
 // // 慢慢捋
        // function fn(n, m){
        //     m(n); //
        // }
        //
        // a = 10;
        // fn(a, n => {
        //     console.log(n);
        // });


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

html 复制代码 
// 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 自动收集所有的实参，是个数组

html 复制代码 
// 计算任意个数值的累加和;
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);

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

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

控制台打印

html 复制代码 
    </script>
</body>
</html>

3.函数调用

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

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

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

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

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

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的调用</title>
</head>
<body>
    <script>

        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 ... ");
        }();


    </script>
</body>
</html>
相关推荐
m0_748235242 分钟前
前端实现获取后端返回的文件流并下载
前端·状态模式
信号处理学渣20 分钟前
matlab画图，选择性显示legend标签
开发语言·matlab
红龙创客21 分钟前
某狐畅游24校招-C++开发岗笔试（单选题）
开发语言·c++
jasmine s30 分钟前
Pandas
开发语言·python
biomooc1 小时前
R 语言 | 绘图的文字格式(绘制上标、下标、斜体、文字标注等)
开发语言·r语言
骇客野人1 小时前
【JAVA】JAVA接口公共返回体ResponseData封装
java·开发语言
m0_748240251 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar1 小时前
纯前端实现更新检测
开发语言·前端·javascript
404NooFound1 小时前
Python轻量级NoSQL数据库TinyDB
开发语言·python·nosql
寻找沙漠的人2 小时前
前端知识补充—CSS
前端·css
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）