javaScript基础学习 - 7 - JavaScript循环 - 案例代码

1. 循环的目的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 循环的目的:可以重复执行某些代码
        console.log('来一杯卡布奇诺');
        console.log('来一杯卡布奇诺');
        console.log('来一杯卡布奇诺');
        console.log('---------------------');
        for (var i = 1; i <= 1000; i++) {
            console.log('来一杯卡布奇诺');
        }
    </script>
</head>
<body>
</body>
</html>

2. for循环

<script>
    // 1. for 重复执行某些代码, 通常跟计数有关系
    // 2. for 语法结构
    // for (初始化变量; 条件表达式; 操作表达式) {
    //     // 循环体
    // }
    // 3. 初始化变量 就是用var 声明的一个普通变量, 通常用于作为计数器使用 
    // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
    // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新(递增或者递减)
    // 6. 代码体验 我们重复打印100局 你好
    for (var i = 1; i <= 100; i++) {
        console.log('你好吗');
    }
</script>

3. for循环执行过程

<script>
    // for 循环的执行过程
    for (var i = 1; i <= 100; i++) {
        console.log('你好吗');
    }
    // 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index
    // 2. 去 i <= 100 来判断是否满足条件, 如果满足条件  就去执行 循环体  不满足条件退出循环 
    // 3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束 
    // 4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮
</script>

4. for循环重复相同代码

<script>
    // for 循环可以执行相同的代码
    for (var i = 1; i <= 10; i++) {
        console.log('来一杯卡布奇诺');
    }
    
    // 我们可以让用户控制输出的次数
    var num = prompt('请您输入次数');
    for (var i = 1; i <= num; i++) {
        console.log('来一杯卡布奇诺');
    }
</script>

5. for循环重复不同的代码

<script>
     // for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在 i每次循环值都会变化
     // 我们想要输出1个人 1~100岁
     // for (var i = 1; i <= 100; i++) {
     //     console.log('这个人今年' + i + '岁了');
     // }
     for (var i = 1; i <= 100; i++) {
         if (i == 1) {
             console.log('这个人今年1岁了,他出生了');
         } else if (i == 100) {
             console.log('这个人今年100岁了,他死了');
         } else {
             console.log('这个人今年' + i + '岁了');
         }
     }
</script>

6. for循环重复某些操作

<script>
    // for 循环重复执行某些操作 比如说我们做了100次加法运算
    // 求 1~100 之间的整数累加和
    //         需要循环100次,我们需要一个计数器  i  
    // 我们需要一个存储结果的变量 sum ,但是初始值一定是 0
    // 核心算法:1 + 2 + 3 + 4 ....   ,sum  =  sum + i;
    var sum = 0; // 求和 的变量
    for (var i = 1; i <= 100; i++) {
        // sum = sum + i;
        sum += i;
    }
    console.log(sum);
</script>

7. for循环案例

<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>

8. 求学生成绩案例

<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>

9. 一行打印五个星星

<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>

10. 双重for循环

<script>
    // 1. 双重for循环 语法结构
    // for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    //     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
    //         // 执行语句;
    //     }
    // }
    // 2. 我们可以把里面的循环看做是外层循环的语句
    // 3. 外层循环循环一次, 里面的循环执行全部
    // 4. 代码验证
    for (var i = 1; i <= 3; i++) {
        console.log('这是外层循环第' + i + '次');
        for (var j = 1; j <= 3; j++) {
            console.log('这是里层的循环第' + j + '次');
        }
    }
</script>

11. 打印五行五列星星

<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>

12. 打印n行n列的星星

<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>

13. 打印倒三角形

<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>

out:
	★★★★★★★★★★
	★★★★★★★★★
	★★★★★★★★
	★★★★★★★
	★★★★★★
	★★★★★
	★★★★
	★★★
	★★
	★

14. 九九乘法表案例

<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>


out:
	1×1=1	
	1×2=2	2×2=4	
	1×3=3	2×3=6	3×3=9	
	1×4=4	2×4=8	3×4=12	4×4=16	
	1×5=5	2×5=10	3×5=15	4×5=20	5×5=25	
	1×6=6	2×6=12	3×6=18	4×6=24	5×6=30	6×6=36	
	1×7=7	2×7=14	3×7=21	4×7=28	5×7=35	6×7=42	7×7=49	
	1×8=8	2×8=16	3×8=24	4×8=32	5×8=40	6×8=48	7×8=56	8×8=64	
	1×9=9	2×9=18	3×9=27	4×9=36	5×9=45	6×9=54	7×9=63	8×9=72	9×9=81

15. while循环

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

16. while循环案例

<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>

17. do whild循环

<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>

18. do while循环案例

<script>
    // 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('我也爱你啊');
</script>

20. break

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

out:
	我正在吃第1个包子
	我正在吃第2个包子
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值