JavaScript循环

基础JavaScript

循环

1. for循环

1.1 介绍

image-20230303113615229

image-20230303113710237

1.2 执行过程

image-20230303113725846

image-20230303113734301

1.3 重复执行相同的代码

image-20230303113756527

1.4 重复执行不同的代码

image-20230303113818782

1.5 重复执行某些操作

image-20230303113839825

1.6 案例

1.61 计算案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
        // 1. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= 100; i++) {
            sum = sum + i;
        }
        average = sum / 100;
        console.log(average);

        // 2. 求1-100之间所有偶数和奇数的和   我们需要一个偶数的和变量 even  还需要一个奇数 odd
        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 2 == 0) {
                even = even + i;
            } else {
                odd = odd + i;
            }
        }
        console.log('1~100 之间所有的偶数和是' + even);
        console.log('1~100 之间所有的奇数和是' + odd);

        // 3. 求1-100之间所有能被3整除的数字的和   
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                // result = result + i;
                result += i;
            }
        }
        console.log('1~100之间能够被3整数的数字的和是：' + result);
</script>

1.62 学生成绩案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
        // 弹出输入框输入总的班级人数(num)
        // 依次输入学生的成绩（ 保存起来 score）， 此时我们需要用到
        // for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
        // 进行业务处理: 计算成绩。 先求总成绩（ sum）， 之后求平均成绩（ average）
        // 弹出结果
        var num = prompt('请输入班级的总人数:'); // num 总的班级人数
        var sum = 0; // 求和的变量
        var average = 0; // 求平均值的变量
        for (var i = 1; i <= num; i++) {
            var score = prompt('请您输入第' + i + '个学生成绩');
            // 因为从prompt取过来的数据是 字符串型的需要转换为数字型
            sum = sum + parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是' + sum);
        alert('班级平均分是：' + average);
</script>

1.63 一行5个星星案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
        // 一行打印五个星星 
        // console.log('★★★★★');
        // for (var i = 1; i <= 5; i++) {
        //     console.log('★');

        // }
        // var str = '';
        // for (var i = 1; i <= 5; i++) {
        //     str = str + '★';
        // }
        // console.log(str);
        var num = prompt('请输入星星的个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str = str + '★'
        }
        console.log(str);
</script>

1.64 把1-100之间所有能够被3和7同时整除的数找出来，计算累加和

1
2
3
4
5
6
7
8
9
10
11
<script>
        // 把1-100之间所有能够被3和7同时整除的数找出来，计算累加和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0 && i % 7 == 0) {
                console.log('1-100之间所有能够被3和7同时整除的数:' + i);
                sum += i;
            }
        }
        console.log('累加和' + sum);
</script>

1.65 求整数1～100的累加值，但要求跳过所有个位为3的数。

1
2
3
4
5
6
7
8
9
10
11
<script>
        var sum=0;
        for (var i = 1; i <= 100; i++){
            if(i%10==3){
                console.log(i);
                continue;
            }
            sum+=i;
        }
        console.log(sum);
</script>

1.66 求从1开始第35个能被7和3整除的整数

1
2
3
4
5
6
7
8
<script>
        // 求从1开始第35个能被7和3整除的整数
        for (var i = 1; i <= 35; i++) {
            if (i % 3 == 0 && i % 7 == 0) {
                console.log(i + '\n');
            }
        }
</script>

2. 双重for循环

2.1 介绍

image-20230303114408883

image-20230303114426050

2.2 打印5行5列星星

1
2
3
4
5
6
7
8
9
10
11
12
<script>
        // 打印五行五列星星
        var str = '';
        for (var i = 1; i <= 5; i++) { // 外层循环负责打印五行
            for (var j = 1; j <= 5; j++) { // 里层循环负责一行打印五个星星
                str = str + '★';
            }
            // 如果一行打印完毕5个星星就要另起一行 加 \n
            str = str + '\n';
        }
        console.log(str);
</script>

2.3 打印n行n列的星星

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
        // 打印n行n列的星星
        var rows = prompt('请您输入行数:');
        var cols = prompt('请您输入列数:');
        var str = '';
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j <= cols; j++) {
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);
</script>

2.4 打印倒三角形案例

1
2
3
4
5
6
7
8
9
10
11
<script>
        // 打印倒三角形案例
        var str = '';
        for (var i = 1; i <= 10; i++) { // 外层循环控制行数
            for (var j = i; j <= 10; j++) { // 里层循环打印的个数不一样  j = i
                str = str + '★';
            }
            str += '\n';
        }
        console.log(str);
</script>

2.5 九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
        // 九九乘法表
        // 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
        // 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行  
        // 内层的 for 循环控制每行公式  j  
        // 核心算法：每一行 公式的个数正好和行数一致， j <= i;
        // 每行打印完毕，都需要重新换一行
        var str = '';
        for (var i = 1; i <= 9; i++) { // 外层循环控制行数
            for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i
                // 1 × 2 = 2
                // str = str + '★';
                str += j + '×' + i + '=' + i * j + '\t';
            }
            str += '\n';
        }
        console.log(str);
</script>

2.6 打印正三角形

1
2
3
4
5
6
7
8
9
10
<script>
        // 打印正三角形
        var str ='';
        for (var i = 1; i <= 5; i++) {
            for (var j = i; j <= i; j++) {
                str+='*';
            }
            console.log(str);
        }
</script>

3. for循环小结

image-20230303114823524

4. while循环

4.1 介绍

image-20230303114846995

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
        // 1. while 循环语法结构  while 当...的时候
        // while (条件表达式) {
        //     // 循环体
        // }
        // 2. 执行思路  当条件表达式结果为true 则执行循环体 否则 退出循环
        // 3. 代码验证
        var num = 1;
        while (num <= 100) {
            console.log('好啊有');
            num++;
        }
        // 4. 里面应该也有计数器 初始化变量
        // 5. 里面应该也有操作表达式  完成计数器的更新 防止死循环
</script>

4.2 while循环案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
        // while循环案例
        // 1. 打印人的一生，从1岁到100岁
        var i = 1;
        while (i <= 100) {
            console.log('这个人今年' + i + '岁了');
            i++;
        }
        // 2. 计算 1 ~ 100 之间所有整数的和
        var sum = 0;
        var j = 1;
        while (j <= 100) {
            sum += j;
            j++
        }
        console.log(sum);

        // 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
        var message = prompt('你爱我吗?');
        while (message !== '我爱你') {
            message = prompt('你爱我吗?');
        }
        alert('我也爱你啊！');
</script>

4.3 登录案例

1
2
3
4
5
6
7
8
9
10
<script>
        // 接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功!  否则，让用户一直输入。
        var username=prompt('please enter your username');
        var password=prompt('please enter your password');
        while (username!='admin' && password!='123456'){
            username = prompt('please enter your password');
            password = prompt('please enter your password');
        }
        alert('login successfully!');
</script>

4.4 atm案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
        // - 里面现存有  100 块钱。
        // - 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框
        // - 如果取钱，就减去取的钱数，之后弹出显示余额提示框
        // - 如果显示余额，就输出余额
        // - 如果退出，弹出退出信息提示框
        var sum = 100;
        var atm = prompt('输入操作' + '\n' + '1、存钱' + '\n' + '2、取钱' + '\n' + '3、余额' + '\n' + '4、退出')
        while (atm != '4') {
            var atm = prompt('输入操作' + '\n' + '1、存钱' + '\n' + '2、取钱' + '\n' + '3、余额' + '\n' + '4、退出')
            if (atm == '1') {
                atm = prompt('输入存金额');
                sum += parseInt(atm);
                alert('存后为: ' + sum);
            } else if (atm == '2') {
                atm = prompt('输入取金额');
                sum -= parseInt(atm);
                alert('取后为: ' + sum);
            } else if (atm == '3') {
                alert('余额: ' + sum);
            }
        }
        alert('已退出，欢迎再次使用');
    </script>

5. do-while循环

5.1 介绍

image-20230303115214785

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
        // 1.do while 循环 语法结构
        do {
            // 循环体
        } while (条件表达式)
        // 2.  执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
        // 3. 代码验证
        var i = 1;
        do {
            console.log('how are you?');
            i++;
        } while (i <= 100)
        // 4. 我们的do while 循环体至少执行一次
</script>

5.2 do-while循环案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
        // while循环案例

        // 1. 打印人的一生，从1岁到100岁
        var i = 1;
        do {
            console.log('这个人今年' + i + '岁了');
            i++;
        } while (i <= 100)
        // 2. 计算 1 ~ 100 之间所有整数的和
        var sum = 0;
        var j = 1;
        do {
            sum += j;
            j++;
        } while (j <= 100)
        console.log(sum);

        // 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
        do {
            var message = prompt('你爱我吗?');
        } while (message !== '我爱你')
        alert('我也爱你啊');
		
		//4.疯狂弹窗
 		var info=prompt('i love you,and you?');
        do {
            info=prompt('i love you,and you?');
        } while (info!=='me,too');
        alert('i love you,too');
</script>

6. continue、break

6.1 介绍

image-20230303115430578

6.2 continue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
        // continue 关键字   退出本次（当前次的循环）  继续执行剩余次数循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
            }
            console.log('我正在吃第' + i + '个包子');

        }
        // 1. 求1~100 之间， 除了能被7整除之外的整数和 
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);
</script>

6.3 break

1
2
3
4
5
6
7
8
9
10
<script>
        // break 退出整个循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break;
            }
            console.log('我正在吃第' + i + '个包子');

        }
</script>

7. 代码规范

image-20230303115546471

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~