流程控制switch语句和for语句

5分之流程控制switch语句

5.1语法结构

  • switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置-系列的特定值
    的选项时,就可以使用switch.

查询水果案例:

  • 用户在弹出框里面输入-个水果,如果有就弹出该水果的价格,如果没有该水果就弹出“没有此水果”。

案例分析:

弹出prompt输入框,让用户输入水果名称,把这个值取过来保存到变量中。
将这个变量作为switch括号里面的表达式。
case后面的值写几个不同的水果名称,注意-定要加引号,因为必须是全等匹配。
弹出不同价格即可。同样注意每个case之后加上break , 以便退出switch语句。

<script>
        var fruit = prompt('请您输入查询的水果');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是3.5斤');
                break;
            case '草莓':
                alert('草莓的价格是10.5斤');
                break;
            case '香蕉':
                alert('香蕉的价格是3.5斤');
                break;
            case '雪梨':
                alert('雪梨的价格是3.5斤');
                break;
            default:
                alert('不好意思,你选的水果买完了!');
                break;
        }
    </script>

5.2switch语句和if else if语句的区别·

一般情况下,它们两个语句可以相互替换
swith…case语句通常处理case为比较确定值的情况,而…语句更加灵活,常用于范围判断(大于等于某个范围)
switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而… else语句有几种条件,就得判断多少次。
当分支比较少时, if… else语句的执行效率比switch语句高。
当分支比较多时, switch语句的执行效率比较高,而且结构更清晰。

for循环

2.1语法结构断点调试:

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


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


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


* Watch:监视,通过watch可以监视变量的值的变化,非常的常用。


* F11:程序单步执行,让程序-行行的执行 ,这个时候,观察watch中变量的值的变化。


* 代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。


* 今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即呵,后面还会学到很多的代码调试技巧。

案例:求学生成绩:

* 要求用户输入班级人数,之后依次输入每个学生的成绩,最后打印出该班级总的成绩以及平均成绩。

案例分析:

* 弹出输入框输入总的班级人数(num )
* 依次输入学生的成绩(保存起来score) ,此时我们需要用到for循环,弹出的次数跟班级总人数有关系条件表达式i <= num
* 进行业务处理:计算成绩。先求总成绩( sum) , 之后求平均成绩( average )
* 弹出结果
<script>
        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>

一行打印五个小心心案例:

 <script>
        var str = ' ';
        for (var i = 1;i<=1000;i++)
        {
            str = str + ' ❤ ';
        }
       console.log(str);
    </script>

打印五行五列:

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

5循环小结

JS中循环有for、while、do while

三个循环很多情况下都可以相互替代使用

如果是用来计次数,跟数字相关的,三者使用基本相同,但是我们更喜欢用for

while和do…while可以做更复杂的判断条件,比for循环灵活- -些

while和do…wvhile执行顺序不一-样, while先判断后执行, do…while先执行一次,再判断执行

while和do…wvhile执行次数不- -样, do…while 至少会执行一次循环体,而while可能一-次也不执行

实际工作中,我们更常用for循环语句,它写法更简洁直观,所以这个要重点学习

你可能感兴趣的:(前端web开发,调试,js,循环)