JavaScript-for/while/do...while循环

循环结构是JavaScript中很重要的代码执行结构，这里通过几个小练习简单介绍一下JS中的for/while/do...while三种循环：

for循环

<script>
        // 求1~100的整数累加和的平均值
        var sum = 0, average = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        average = sum / 100;
        console.log('1~100的整数累加和的平均值是：' + average);    // 50.5
        
        // 求1~100的整数中偶数和奇数的累加和
        var even = 0, odd = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
        }
        console.log('1~100的整数中偶数的累加和是：' + even);    // 2550
        console.log('1~100的整数中奇数的累加和是：' + odd);     // 2500
        
        // 求1~100的整数中所有能被3整除的数的和
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result += i
            }
        }
        console.log('1~100的整数中所有能被3整除的数的和是：' + result);    // 1683
    </script>

 执行代码截图：

 for循环是JS中最常用的循环结构，其循环体可以嵌套分支结构也可以再嵌套循环结构：

<script>
        // 打印倒三角型案例
        var str = '';   // 定义变量用于拼接每行显示的字符
        for (var i = 1; i <= 10; i++) {    // 外部循环控制行数
            for (var j = i; j <= 10; j++) {    // 内部循环控制列数，j = i才能使得每一列都在减少
                str = str + '☆';    // 将每一列的星星拼接到一行显示
            }
            str += '\n';    // i循环一次后换一行
        }
        console.log(str);   // 一行一行显示

        // 打印正三角型案例
        var tostr = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = 1; j <= i; j++) {  // 内部循环控制列数，j从1个开始，j <= i才能使得每一列都在增加
                tostr = tostr + '☆';
            }
            tostr += '\n';
        }
        console.log(tostr);
    </script>

  执行代码截图：

案例：for循环嵌套打印出九九乘法表 

while循环和do...while循环

<script>
        // while循环执行思路：先判断while后面括号里的条件，满足条件则执行循环体，不满足则退出循环继续执行后续代码
        // 用while循环做出一个类似于访问拦截/身份验证的效果
        var str = prompt('请输入访问密码:');
        while(str !== '1114') {     // 1114才是正确的密码，若值不等于1114，则会一直循环
            str = prompt('不正确哦，请再输入一次:');    // 不正确则再弹出输入框要求再次输入
        }
        alert('欢迎访问本站！')     // 只有正确输入后才能跳出循环执行这里的代码
        // 显然，如果第一次输入密码就直接输入正确，则不会有第二次输入的弹窗弹出，所以while循环是可能一次也不执行的，而do...while循环则不一样，do...while循环的特点就是至少会执行一次循环体
        
        // do...while循环执行思路：先执行循环体一次，再判断while后面括号里的条件，若满足条件则再执行循环体，不满足则退出循环继续执行后续代码
        // 同样，用do...while循环做出一个类似于访问拦截/身份验证的效果
        do {
            var tostr = prompt('请输入访问密码:');
        } while (tostr !== '1114');
        alert('欢迎访问本站！');
    </script>

 执行代码截图：

 while循环和do...while循环的差别就是while循环是先判断条件再根据结果看是否需要执行循环体，所以可能循环体一次也不会被执行；

而do...while则是先执行一次循环体再判断条件，所以循环体至少会被执行一次。

 

小结：

• JavaScript中的循环有for、while、do...while
• 三个循环很多情况下都可以替代使用
• 如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
• while和do...while可以做更复杂的判断条件，比for循环灵活一些
• while和do...while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断循环条件
• while和do...while执行次数不一样，do...while至少会执行一次循环体，而while可能一次也不执行
• 实际工作中，我们更喜欢for循环语句，它写法更简洁直观。