JavaScritp基础知识整理（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/dimingda/article/details/120623799

这篇博客详细介绍了JavaScript中的循环结构，包括for循环、双重for循环、while循环和do...while循环的使用方法及执行顺序，并通过实例展示了如何运用这些循环来实现特定功能，如计算序列和、判断条件、模拟ATM操作等。同时，还提到了continue和break语句在循环控制中的作用，以及如何避免死循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.for循环
可以用来计数，执行相同代码等

<!DOCTYPE html>
<html lang="en">
<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>
    <script>
        // var name = prompt('请输入姓名');
        // for (var i = 0;i < name.length;i++) {
        //     if (name[i] == 'd') {
        //         alert('名字含有d');
        //     }
        // }
        // 1到100求和
        var result = 0;
        for (var i = 1;i <= 100;i++) {
            result = result + i;
        }
        alert(result);
        // var odd = 0;
        // var even = 0;
        // for (i = 1;i <= 100; i++) {
        //     if (i % 2 == 0) {
        //         even = even + i;
        //     } else {
        //         odd = odd + i;
        //     }
        // }
        // alert('奇数和为' + odd);
        // alert('偶数和为' + even);
    </script>
</head>
<body>
    
</body>
</html>

执行顺序为i=0,i < name.length,if语句，i++,i < name.length;··········等以此类推

2.双重for循环
执行顺序：外面循环一次，里面全部循环

<!DOCTYPE html>
<html lang="en">
<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>
    <script>
        // var row = prompt('输入行');
        // var line = prompt('输入列');
        
        // for (var i = 1;i <= parseInt(row); i++) {
        //     var start = '';
        //     for (var j = 1;j <= parseInt(line);j++) {
        //         start = start + '⭐';
        // }
        //     console.log(start);
        // }

        // for (var i = 10;i >= 1; i--) {
        //     var start = '';
        //     for (var j = 1;j <= i;j++) {
        //         start = start + '⭐';
        // }
        //     console.log(start);
        // }
        row = '';
        for (i = 1;i <= 9;i++){
            for (j = 1;j <=i; j++) {
                row = row + j + 'X' + i + '=' + j*i + ' '
            }
            row = row + '\n'
        }
        console.log(row)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
3. while循环
注意：避免死循环

<!DOCTYPE html>
<html lang="en">
<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>
    <script>
        // var num = prompt('你想看见几次？')
        // var i = 0
        // while (i < num) {
        //     alert('你就点吧')
        //     i++
        // }
        var message = prompt('我喜欢你，答应我好吗？');
        while (message != "我答应你") {
            message = prompt("我喜欢你，答应我好吗？");
        }
        alert('这就对了')

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

④do while语句
先执行do的表达式，再去执行while是否符合

        var i = 0;
        do {
            alert(i);
            i++;
        } while (i < 5)

⑤continue 和break
continue是跳过本次循环，继续执行下次循环
break是跳出所有循环

ATM案例

<!DOCTYPE html>
<html lang="en">
<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>ATM</title>
    <script>
        money = 100
        while (true) {
            fun = prompt('请输入您要进行的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出') 
            if (fun == '1') {
                save = parseFloat(prompt('请输入您要存的钱数'))
                money += save
                alert('存完余额为' + money)
            } else if (fun == '2') {
                take = parseFloat(prompt('请输入您要取的钱数'))
                remian = money - take
                if (remian < 0) {
                    alert('余额不足')
                } else {
                    money = remian
                    alert('取完余额为' + money)
                }
            } else if (fun == '3') {
                alert('余额为' +  money)
            } else {
                break
            }

        }
    </script>
</head>
<body>
    
</body>
</html>