javascript——循环

本文详细介绍了JavaScript中的for循环和while循环的语法结构、执行过程以及在实际编程中的应用,包括打印学生成绩、九九乘法表等案例。同时,讲解了断点调试的重要性,以及continue和break关键字在循环控制中的作用。通过这些基础知识,读者能够更好地理解和运用循环控制结构进行程序开发。
摘要由CSDN通过智能技术生成

循环


在程序中,一组被重复执行的语句被称之为 循环体,能否继续重复执行,取决于循环的 终止条件。由循环体及循环的终止条件组成的语句,被称之为 循环语句

for循环

语法结构

for(初始化变量;条件表达式;操作表达式){
    //循环体
}
//初始化变量 就是用var声明的一个普通变量,通常用于作为计数器使用
//条件表达式 就是用来决定每一次循环是否继续执行就是终止的条件
//操作表达式是每次循环最后执行的代码经常用于我们邯数器变量进行更新(递增或递减)
for(var i = 1;i < 100;i ++){
    console.log('hello');
}

执行过程

略,与以他语言一样

断点调试

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行廓显示错误,停下。

断点调试可以帮助我们观察程序的运行过程

浏览器中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点

Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。
今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。

for循环重复执行相同代码

        var num = prompt('你想死几次?');
        for (var i = 0; i <= num; i++) {
            alert('你只能死一次');
        }

for循环重复执行不同代码

        //for循环可以重复执行不同的代码﹐因为我们有计数器变量i的存在 i每次循环值都会变化
        var num = prompt('你想死几次?');
        for (var i = 0; i <= num; i++) {
            alert('这是你第' + i + '次死');
        }

for循环重复某些相同操作

        var num = prompt('输入一个数');
        var sum = 0;
        for (var i = 0; i <= num; i++) {
            sum += i;
        }
        alert(sum);

for循环案例

        //1~100所有数的平均值
        var sum = 0;
        var avg = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        avg = sum / 100;
        console.log(avg); //5050

        //1~100所有偶数和奇数的和
        var ou = 0;
        var ji = 0;
        for (var i = 0; i <= 100; i++) {
            if (i % 2 == 0) {
                ou++;
            } else {
                ji++;
            }
        }
        console.log('奇数和为:' + ji + ';偶数和为:' + ou); //奇数和为:50;偶数和为:51

        //1~100所有能被3整除的数的和
        var sum1 = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                sum1 += i;
            }
        }
        console.log(sum1); //1683

打印学生成绩案例

        var sum = 0;
        var avg = 0;
        var stuNum = prompt('请输入班级人数:');
        for (var i = 1; i <= stuNum; i++) {
            var score = parseInt(prompt('请输入第' + i + '个学生的成绩'));
            sum += score;
        }
        avg = sum / stuNum;
        console.log('总分'+sum);
        console.log('平均分'+avg);

一行5个⭐

        var starNum = prompt('请输入你想打印的星星个数');
        var str = '';
        for (var i = 1; i <= starNum; i++) {
            str = str + '⭐';
        }
        alert(str);

双重for循环

语法结构

for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
    for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
        //执行语句
    }
}
//我们可以把里面的循环看作是外层循环的语句
//外层循环一次,里层执行全部

打印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 = str + '\n';
        }
        console.log(str);

打印倒三角

        var str = '';
        for (var i = 10; i >= 1; i--) {
            for (j = 1; j <= i; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐
⭐⭐⭐⭐
⭐⭐⭐
⭐⭐
⭐

打印九九乘法表

        var str = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str += j + '*' + i + '=' + i * j;
                str = str + '\t';
            }
            str = str + '\n';
        }
        console.log(str);
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

for循环小结

  • for循环可以重复执行某些相同代码

  • for循环可以重复执行些许不同的代码,因为我们有计数器

  • for循环可以重复执行某些操作,比如算数运算符加法操作

  • 随着需求增加,双重for循环可以做更多、更好看的效果

  • 双重for循环,外层循环一次,内存for循环执行全部

  • for循环是循环条件和数字直接相关的循环

  • 一些核心算法想不到,但是要学会,分析它执行过程

while循环

语法结构

        //语法结构 while 当···的时候
        while (条件表达式) {
            //循环体
        }
        //执行思路:当条件表达式结果为true 则执行循环体 否则 退出循环

案例:打印人的一生,并计算总和

        var age = 1;
        var sum = 0;
        while (age <= 100) {
            console.log('你今年' + age + '岁了');
            sum += age;
            age++;

        }
        console.log(sum);

do while 循环

语法结构

do{
    循环体
}while(条件表达式)
//执行思路跟while不同的地方在于do while 先执行一次循环体再判断条件 如果条件表达式结果为真,则继续执行循环体,否则退出循环
//do...while至少执行一次循环体代码

continue break

continue关键字

continue关键字用于立即跳出本次循环继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。

例如,吃5个包子,第3个有虫子,就扔掉第3个,继续吃第4个第5个包子,其代码实现如下:

        for (i = 1; i <= 5; i++) {
            if (i == 3) {
                continue;//只要遇见continue就退出本次循环 直接跳到i++
            }
            console.log('我正在吃第' + i + '个包子');
        }

break关键字

break 关键字用于立即跳出整个循环(循环结束)。
例如,吃5个包子,吃到第3个发现里面有半个虫子,其余的不吃了,其代码实现如下:

        for (i = 1; i <= 5; i++) {
            if (i == 3) {
                break;//只要遇见break就退出整个循环
            }
            console.log('我正在吃第' + i + '个包子');
        }
简易ATM机案例
        var blance = 100;
        var money = 0;
        do {
            var num = prompt('请输入您要的操作\n1.存钱\n2.取钱\n3.显示余额\n4.退出')
            switch (num) {
                case '1':
                    var money = prompt('请输入您要存的额度:');
                    blance += parseFloat(money);
                    alert('您的余额为:' + blance);
                    break;
                case '2':
                    var money = prompt('请输入您要取的额度:');
                    blance -= parseFloat(money);
                    if (blance <= 0) {
                        alert('余额不足'); //余额不足尚未实现
                    } else {
                        blance = blance;
                        alert('您的余额为:' + blance);
                    }
                    break;
                case '3':
                    alert('您的余额为:' + blance);
                    break;
                case '4':
                    alert('您已退出')
                    break;
            }
        } while (num !== '4');
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值