美文网首页前端开发那些事儿
JavaScript快速入门05-流程控制

JavaScript快速入门05-流程控制

作者: 老哥深蓝 | 来源:发表于2021-04-07 08:40 被阅读0次

    为什么使用流程控制?

    我们在写js代码时,一行一行的写,系统也会一行一行的进行执行,但很多时候我们希望系统按照我们的意愿进行执行,在特定的时候,有些代码需要跳过,或者有些执行要重复执行多次,这时我们就要使用流程控制语句。

    在js中流程控制语句分为三类:
    顺序结构(从下往下)
    分支结构(if,switch)
    循环结构(for,while)

    顺序结构

    顺序结构是程序中最基本的流程,正常的一段代码,包含在一对大括号中,表示一个代码块,程序会按照代码的先后顺序,依次执行。

        {
            var name="小明";
            var money=100;
            console.log(name + "看看了兜里,只剩下" +money+ "元.");
        }
    

    这里我们写了三行代码,定义了一个名字叫小明的人,兜里只有100元钱,再运行后系统会一条一条进行执行:
    首先系统会创建一个name的string型变量,然后再创建一个money的number型变量,最后在控制台办输出一段文字。

    分支结构(if,switch)

    在js中分支结构有两个语句可以选择使用,分别是if语句和switch语句。

    单一条件的if语句

    具体的语法形式如下:

    if(布尔表达式)
    {
      语句块;
    }
    

    比如小明看到餐厅里有一只烤乳猪,价格为300元,可是看了看兜里的钱发现钱不够,我们在程序里就可以这样写:

            var name = "小明";
            var money = 100;
            var pig = 300;
            if (money > pig) {
                money -= pig;
                console.log(name + "买了一只猪");
                console.log(name + "看看了兜里,只剩下" + money + "元.");
            }
    

    当系统执行到if语句时,会先对(money < pig)进行运行,如果结果为真时,会运行{...}内的代码。但这时小明的钱不够买一只猪,程序判断为假,所以{...}内的代码会被程序跳过。
    但这时你会问小明钱不够会怎么办呢?

    二选一的if语句

    我们可以通过在if(如果...)语句后面紧跟一个else(否则...)来实现。

            var name = "小明";
            var money = 100;
            var pig = 300;
            if (money > pig){
                money -= pig;
                console.log(name + "买了一只猪");
                console.log(name + "看看了兜里,只剩下" + money + "元.");
            }
            else {
                console.log(name + "看看了兜里,只剩下" + money + "元.");
                console.log(name + "叹了口气,转身离开.");
            }
    
    多选一的if语句

    这时小明发现餐厅里还有鸡,他决定试一试,我们继续用if语句来实现。

            var name = "小明";
            var money = 100;
            var pig = 300;
            var chicken=200;
            var fish=100;
            if (money > pig){
                money -= pig;
                console.log(name + "买了一只猪");
                console.log(name + "看看了兜里,只剩下" + money + "元.");
            }
            else if(money>chicken){
                money -= chicken;
                console.log(name + "买了一只鸡");
                console.log(name + "看看了兜里,只剩下" + money + "元.");
            }
            else if(money>fish){
                money -= fish;
                console.log(name + "买了一只鱼");
                console.log(name + "看看了兜里,只剩下" + money + "元.");
            }
            else{
                console.log(name + "叹了口气,转身离开.");
            }
    
    if(布尔表达式 1)
    {
        语句块 1;
    }else if(布尔表达式 2){
        语句块 2;
    }
    ...
    else{
        语句块 n;
    }
    

    if说句可以这样循环嵌套的写下去,但是选项一多后,非常不利于阅读,这时我们可以什么switch说句来代替。

    switch语句
    switch(表达式){
        case 值1:
            语句体1;
            break;
        case 值2:
            语句体2;
            break;
        ...
        default:     //默认值,当其它条件不满足时
            语句体N+1;
            break;
    }
    

    用switch来改来上面的代码如下:

            switch (true) {
                case money >= pig:
                    money -= pig;
                    console.log(name + "买了一只猪");
                    console.log(name + "看看了兜里,只剩下" + money + "元.");
                    break;
                case money >= chicken:
                    money -= chicken;
                    console.log(name + "买了一只鸡");
                    console.log(name + "看看了兜里,只剩下" + money + "元.");
                    break;
                case money >= fish:
                    money -= fish;
                    console.log(name + "买了一只鱼");
                    console.log(name + "看看了兜里,只剩下" + money + "元.");
                    break;
                default:
                    console.log(name + "叹了口气,转身离开.");
                    break;
            }
    

    循环结构

    假如我们需要运行代码多次时,我们可以使用循环结构。
    javaScript支持不同类型的循环:

    • for 多次遍历代码块
    • for/in 遍历对象属性
    • while 当指定条件为 true 时循环一段代码块
    • do/while 当指定条件为 true 时循环一段代码块
    For 循环
    for (语句 1; 语句 2; 语句 3) {
         要执行的代码块
    }
    

    语句 1 在循环(代码块)开始之前执行。
    语句 2 定义运行循环(代码块)的条件。
    语句 3 会在循环(代码块)每次被执行后执行。

    for (i = 0; i < 5; i++) {
         console.log("数字是 " + i );
    }
    
    While循环

    先判断,再执行代码。

    while (条件) {
        要执行的代码块
    }
    
    while (i < 10) {
         console.log("数字是 " + i );
         i++;
    }
    
    Do/While 循环

    先执行代码,再进行判断,循环至少进行一次。

    do {
        要执行的代码块
    }
    while (条件);
    
    do {
        console.log("数字是 " + i );
        i++;
     }
    while (i < 10);
    

    相关文章

      网友评论

        本文标题:JavaScript快速入门05-流程控制

        本文链接:https://www.haomeiwen.com/subject/exjjkltx.html