流程控制介绍，顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

苦海123

已于 2024-03-19 23:07:58 修改

阅读量267

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

于 2021-04-22 09:49:40 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116000168

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

流程控制

流程控制：指代码的执行顺序，有三种方式：顺序结构、分支结构、循环结构
在这里插入图片描述

顺序结构：

代码从上到下，从左到右的执行顺序。

分支语句：

if语句、if-else语句、if-else if-else···语句、switch-case语句、三元表达式：

<script>
        // if-else语句:
        // if (条件) {
        //     要执行的代码1
        // } else {
        //     要执行的代码2
        // };
        var age = 19;
        if (age == 19) {
            console.log('等于19');
        };
    
        var num = prompt('请输入数字');
        if (num % 2 == 0) {
            console.log('该数字是偶数');
        } else {
            console.log('该数字是奇数');
        };
    
        var result = prompt('请输入B');
        if (result == 'B') {
            var result2 = prompt('请输入Y');
            if (result2 == 'Y') {
                console.log('您输入的的有效字母是：Y');
            } else {
                console.log('您输入的无效字符是：' + result2);
            };
        } else {
            var result3 = prompt('请输入T');
            if (result3 == 'T') {
                console.log('您输入的是有效字母：T');
            } else {
                console.log('您输入的无效字符是：' + result3);
            };
        };
    
        var num1 = 40;
        var num2 = 30;
        if (num1 > num2) {
            console.log(num1);
        } else {
            console.log(num2);
        };
    
        // 三元表达式： 条件？ 表达式1： 表达式2;
    
        var age = 18;
        var result = age >= 18 ? '成年' : '未成年';
        console.log(result);
    
        var result = 5 > 3 ? '对' : '错';
        console.log(result); //对
    
        var num = 2 - 1 > 5 - 6 ? 2 - 1 : 5 - 6;
        console.log(num); //1
    
        var str = 10 - 5 < 0 ? 5 - 5 > 0 ? 'Y' : 'N' : 5 - 5 == 0 ? 'y' : 'n';
        console.log(str); //y
    
    		//if-else if-else语句：
        var score = prompt('请输入分数');
        if (isNaN(score)) {
            console.log('输入有误');
        } else if (score > 90 && score <= 100) {
            console.log('A级');
        } else if (score > 80 && score <= 90) {
            console.log('B级');
        } else if (score > 70 && score <= 80) {
            console.log('C级');
        } else if (score > 0 && score <= 70) {
            console.log('成绩不合格');
        } else if (score > 100 || score < 0) {
            console.log('输入有效成绩');
        };
    
        // switch-case:多分支语句；
        // 语法：switch(表达式){
        //     case 值1 :代码1;break;
        //     case 值2 :代码2;break;
        //     case 值3 :代码3;break;
        //     ···
        //     default:代码4;break;(这里break和default可省略)
        // }   
    
        var score = prompt('请输入ABC等级别');
        switch (score) {
            case 'A':
                console.log('分数在100-90之间');
                break;
            case 'B':
                console.log('分数在80-70之间');
                break;
            default:
                console.log('分数在0-60之间');
        };
    
        //当好几个case有相同的结果时，可以省略重复的代码块，只需要在最后一个case后面跟代码块：
        var sease = prompt('请输入月份');
        switch (sease) {
            case '1':
            case '2':
            case '3':
                console.log('春季');
                break;
            case '4':
            case '5':
            case '6':
                console.log('夏季');
                break;
            case '7':
            case '8':
            case '9':
                console.log('秋季');
                break;
            case '10':
            case '11':
            case '12':
                console.log('冬季');
                break;
        };
    </script>

循环结构：

while循环、do-while循环、for循环、for-in循环、for-of循环：

<script>
        // while循环语句：先判断条件是否成立，成立执行大括号中的内容，否则不执行大口号中的内容
        // while(循环条件){
        //     循环体
        //     计数器
        // }
        // while循环特点:先判断,后循环,有可能一次循环体都不执行
        var i = 0;
        while (i < 10) {
            console.log(i);
            i++;
        };
    
        var i = 0;
        var sum = 0;
        while (i < 100) {
            sum += i;
            i++
        };
        console.log(sum);
    
        var i = 1;
        sux = 1;
        while (i <= 3) {
            sux = sux * i;
            i++;
        };
        console.log(sux);
    
        var i = 1;
        var sum = 0;
        while (i <= 100) {
            if (i % 2 == 0) {
                sum = sum + i;
                i++;
            } else {
                i++;
            };
        };
        console.log(sum);
    
        var sum = 0;
        var i = 1;
        while (i <= 100) {
            if (i % 2 != 0) {
                sum += i;
            };
            i++;
        };
        console.log(sum);
    
        var i = 1;
        while (i <= 100) {
            if (i % 7 == 0) {
                console.log(i);
            };
            i++;
        };
    
        var admin = prompt('请输入账号');
        var keyw = prompt('请输入密码');
        while (admin != 'admin' || keyw != '123') {
            admin = prompt('重新输入账号');
            keyw = prompt('重新输入密码');
        };
        console.log('登录成功');
    
    
        //do-while循环语句：先执行一次循环，后判断条件，成立继续循环，不成立就跳出循环。
        //  do{
        //      循环体
        //  }while(条件);
        // do-while循环特点:先循环,后判断,至少执行一次循环体
        var i = 0;
        do {
            console.log(i);
            i++;
        } while (i < 10);
    
        do {
            var yn = prompt('我帅吗？请用Y或者N回答');
        } while (yn !== 'Y');
        console.log('谢谢夸奖');
    
        var sum = 0;
        var i = 0;
        do {
            if (i % 3 == 0) {
                sum += i;
            }
            i++;
        } while (i <= 100);
        console.log(sum);
    
    
        /* for循环语句：先执行一次表达式1,然后判断表达式2;如果不成立则直接跳出循环，
        如果表达式2成立,执行循环体的代码,结束后,跳到表达式3执行,然后跳到表达式2,
        判断表达式2是否成立,不成立,则跳出循环，如果表达式2成立,则执行循环体,
        然后再跳到表达式3,再跳到表达式2,判断是否成立,一直如此 */
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        };
        console.log(sum);
    
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                sum += i;
            };
        };
        console.log(sum);
    
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 1) {
                sum += i;
            };
        };
        console.log(sum);
    
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                sum += i;
            };
        };
        console.log(sum);
    
        for (var i = 0; i < 6; i++) {
            for (var j = 0; j <= i; j++) {
                document.write('*');
            };
            document.write('<br>');
        };
    
    
        // for in循环：用于对数组索引或者对象的属性进行循环操作，语法：
        // for (变量 in 对象){
        //     执行的代码
        // };
        var obj = {
            name: '明明',
            age: '18岁'
        };
        for (var i in obj) {
            console.log(i);
        };
    
    
        // for-of遍历数组的元素，键值对对象会报错（不遍历某些对象，数组对象是可以遍历的）
        // for (变量 of 数组){
        //     执行的代码
        // };
        for (var k of arr) {
            console.log(k); //1  '2'  3  '4'  'str'
        }
        for (var k of obj) {
            console.log(k); //Uncaught TypeError: obj is not iterable at test.html:34
        };
    </script>

break和continue关键字：
在这里插入图片描述

 <script>
        for (var i = 1; i < 100; i++) {
            if (i % 7 == 0) {
                console.log(i);//7
                break;
            };
        };
    
        for (var i = 1; i < 22; i++) {
            if (i % 7 == 0) {
                console.log(i);
                continue;//7、14、21
            };
        };
    </script>

label语句：

label语句是用来控制break语句从哪个作用域跳出循环，（默认是跳出当前循环，外面的循环是不会被跳出的）label并非关键字，只要是非保留关键字都可以用来做label语句的标识符，如下面案例：

    <script>
        iFor:
            for (var i = 0; i < 5; i++) {
                console.log('i:' + i);
                jFor:
                    for (var j = 0; j < 5; j++) {
                        console.log('j:' + j);
                        if (j == 3) break iFor; //默认情况下回跳到jFor这里，也就是说i循环5次，每次i循环中j循环4次;当使用label语句后，i循环1次，j循环了4次
                    };
            };
    </script>

throw语句：

当运行错误时，使用throw语句抛出一个异常的信息，如：

<script>
        throw "文件不存在";//控制台输出：test.html:18 Uncaught 文件不存在
</script>

try-catch-finally语句：

如果try代码块中的语句一旦抛出了异常，那么执行流程会立即进入catch 代码块，如果try代码块没有抛出异常，catch代码块就会被跳过。finally 代码块总会紧跟在try和catch代码块之后执行，但会在try和catch代码块之后的其他代码之前执行（三个语句块不一定同时出现，三语句块也可以嵌套在其他三语句中）。

<script>
        try {
            // 抛出异常时执行的语句
        } catch (e) {
            //无异常时执行的语句
        } finally {
            // 抛出异常或无异常时都执行的语句
        };
</script>

Promise对象：

ECMAScript 6中提供promise对象操作延时和异步的流程控制，Promise 对象有以下几种状态：

pending：初始的状态，即正在执行，不处于 fulfilled 或 rejected 状态。
fulfilled：成功的完成了操作。
rejected：失败，没有完成操作。
settled：Promise 处于 fulfilled 或 rejected 二者中的任意一个状态, 不会是 pending。
settled：Promise 处于 fulfilled 或 rejected 二者中的任意一个状态, 不会是 pending。

<script>
        // 为了解决回调地狱问题带来的代码不好维护问题，这里可以使用ES6提供的方法：promise，使用步骤如下：
        // 1.创建promise容器：一旦创建这个容器就会执行里面的代码
        new Promise(function(resolve, rejecte) {
            fs.readFile('./data/c.txt', 'utf8', function(err, data) {
                if (err) {
                    rejecte(err)
                } else {
                    resolve(data)
                }
            });
        }); //2.在容器中放一个函数并在其中执行异步操作
    
    
        //案例：
        var p1 = new Promise(function(resolve, reject) {
            fs.readFile('./data/a.txt', 'utf8', function(err, data) {
                if (err) {
                    reject(err)
                } else {
                    resolve(data)
                }
            })
        })
    
        var p2 = new Promise(function(resolve, reject) {
            fs.readFile('./data/b.txt', 'utf8', function(err, data) {
                if (err) {
                    reject(err)
                } else {
                    resolve(data)
                }
            })
        })
    
        var p3 = new Promise(function(resolve, reject) {
            fs.readFile('./data/c.txt', 'utf8', function(err, data) {
                if (err) {
                    reject(err)
                } else {
                    resolve(data)
                }
            })
        })
    
        p1.then(function(data) {
                console.log(data)
                // 当 p1 读取成功的时候
    
                // 当前函数中 return 的结果就可以在后面的 then 中 function 接收到，当你 return 123 后面就接收到 123，return 'hello' 后面就接收到 'hello'，没有 return 后面收到的就是 undefined
    
                // 真正有用的是：我们可以 return 一个 Promise 对象，当 return 一个 Promise 对象的时候，后续的 then 中的 方法的第一个参数会作为 p2 的 resolve
                return p2
            }, function(err) {
                console.log('读取文件失败了', err)
            })
            .then(function(data) {
                console.log(data)
                return p3
            })
            .then(function(data) {
                console.log(data)
                console.log('end')
            })
    </script>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

苦海123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
流程控制介绍，顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制流程控制：指代码的执行顺序，有三种方式：顺序结构、分支结构、循环结构顺序结构：代码从上到下，从左到右的执行顺序。分支语句：if语句、if-else语句、if-else if-else···语句、switch-case语句、三元表达式：<script> // if-else语句: // if (条件) { // 要执行的代码1 // } else { // 要执行的代码2
复制链接

扫一扫