JavaScript循环与调试技巧解析-优快云博客

本文链接：https://blog.youkuaiyun.com/YourLie_in_April/article/details/124320629

break：终止某个循环，使程序跳到循环块外的下一条语句，在循环中位于break后的语句将不再执行。

for(var i=1;i <= 5;i++){
            let num = parseInt(prompt('输入第' + i + '人的成绩'));
            if(num < 0){
                document.write('第' + i + '名的成绩为输入有误，请重新输入！' + '<br>');
                break;
            }
            document.write('第' + i + '名的成绩为：' + num + '<br>');
        }

continue：语句只能用在循环结构中，退出本次循环，继续后面的循环。

for (var i = 1; i <= 5; i++) {
            let num = parseInt(prompt('输入第' + i + '人的成绩'));
            if (num < 0) {
                document.write('第' + i + '名的成绩为输入有误，请重新输入！' + '<br>');
                continue;
            }
            document.write('第' + i + '名的成绩为：' + num + '<br>');
        }

两者之间的区别是：break是把这个整个循环结束停止掉，后面的循环流程不再运行。continue是这循环里的一小次循环停止，后面的循环流程继续运行。

调试代码：（学会了代码调试，才能学会自己解决bug的能力！）

调试代码的第一种方式：alert(x);

调试代码的第二种方式：debugger; （断点调试）

调试代码的第三种方式：console.log(x) ; （会在控制台打印出相关的信息。常用）

断点调试：指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。（设置方式：在JS代码中加上属性debugger 或者浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点【调试完之后，把打上的断点再点一次，取消即可】。）

Watch：监视，通过watch可以监视变量的值的变化，非常的常用。
F10：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

小练习：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let num = parseInt(prompt('班级一共多少人'));
        let count = 0;
        let flag = true;
        for (var i = 1; i <= num; i++) {
            let score = parseInt(prompt('第' + i + '个同学分数是：'));
            if (score >= 80) {
                count++;
                console.log(count)
            } else if (score < 0) {
                document.write('学生成绩为负数，无法统计！<br>')
                flag = false;
                break;
            }
        }
        if(flag){
            document.write('80分以上的学生人数：' + count)
        }
    </script>
</body>

</html>

效果：