ECMAScript流程控制

最新推荐文章于 2023-08-28 17:27:33 发布

Jyann~

最新推荐文章于 2023-08-28 17:27:33 发布

阅读量387

点赞数 3

分类专栏：前端 JS高级文章标签： switch基本结构 switch穿透性及break及default for...in语句 while及do while循环 break及continue终止循环

本文链接：https://blog.csdn.net/qq_34569497/article/details/95306972

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

JS高级

84 篇文章 3 订阅

订阅专栏

流程控制语句分类，switch基本结构，switch穿透性及break，switch语句default，switch案例分数评级，for...in语句，while及do while语句，break及continue终止循环。

1.程序的三种基本结构

顺序结构：按照顺序一条一条执行，从上至下；
分支结构：执行的时候，可以根据条件进行选择，条件越多对应的结果越多，分支也就越多。if...else if...else...语句,switch语句；
循环结构：重复的做一件事情，如果不给条件，就会无限执行。可以限制重复的次数。for循环，for...in循环，while循环，do while循环，forEach循环等；

2.分支结构——if语句

if...else if...else...语句,switch语句

// 单条件判断
if(判断条件){//....}

if(判断条件){
    //....
}else{
    //....
}

// 多条件判断
if(判断条件1){
    //....     
}else if(判断条件2){
    //....  
}else if(判断条件3){
    //....  
}else{
    //....
}

3.分支结构——switch语句

switch (表达式||变量) {
   case value1:
        console.log('执行的代码1');
        break;
   case value2:
        console.log('执行的代码2');
        break;
   case value3:
        console.log('执行的代码3');
        break;
   default:
        console.log('执行的代码4');
        break;               
}

switch后面的小括号内可以写变量 || 表达式，一般都是变量。
value是与括号里的内容作比较的，这个比较是全等的比较。
一旦满足全等的条件，就会执行后续的代码。
default，以上条件都不满足时候，执行这里对应代码。
default可以放在任何位置。

4.switch语句案例：判断今天星期几

<!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>Switch分支结构：判断今天星期几</title>
</head>
<body>
    <input type="text">
    <button>今天星期几？</button>
    <Script>
        var txt = document.querySelector("input");
        var btn = document.querySelector("button");
        btn.onclick = function(){
            var txtVal = txt.value;
            //switch是将括号里面的内容和case后面的条件进行全等判断，因此类型和数值都必须相等
            switch(txtVal){
                case '1':
                    console.log("今天是星期一");
                    break;
                case '2':
                    console.log("今天是星期二");
                    break;
                case '3':
                    console.log("今天是星期三");
                    break;
                case '4':
                    console.log("今天是星期四");
                    break;
                case '5':
                    console.log("今天是星期五");
                    break;
                case '6':
                    console.log("今天是星期六");
                    break;
                case '7':
                    console.log("今天是星期天");
                    break;
                default:
                    console.log("您输入的日期不合法！");
                    break;
            }
        };
    </Script>
</body>
</html>

结果：

5.switch语句的穿透性及break

穿透：一旦符合条件，并且没有break终止后续代码，会产生穿透问题，当前满足条件的位置开始，后续的执行代码，都会被执行。

（解决穿透问题）break：break后面的代码会终止执行，并跳出。

当上例，不写break时：

<Script>
        var txt = document.querySelector("input");
        var btn = document.querySelector("button");
        btn.onclick = function(){
            var txtVal = txt.value;
            //switch是将括号里面的内容和case后面的条件进行全等判断，因此类型和数值都必须相等
            switch(txtVal){
                case '1':
                    console.log("今天是星期一");
                case '2':
                    console.log("今天是星期二");
                case '3':
                    console.log("今天是星期三");
                case '4':
                    console.log("今天是星期四");
                case '5':
                    console.log("今天是星期五");
                case '6':
                    console.log("今天是星期六");
                case '7':
                    console.log("今天是星期天");
                default:
                    console.log("您输入的日期不合法！");
            }
        };
    </Script>

发现：最后的结果将所有的情况都输出了，这是不合理的。

因此需要使用break，当某个条件成立时，跳出当前分支，结束流程。

6.switch穿透的好处

有时候能通过穿透性使代码更加简洁，性能更好。

更改上例：当输入是工作日时输出“今天是工作日”，当输入是周末时输出“今天是周末”

<!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>switch穿透性的好处</title>
</head>
<body>
    <input type="text">
    <button>今天是工作日吗？</button>
    <Script>
            //当输入是工作日时输出“今天是工作日”，当输入是周末时输出“今天是周末”
            var txt = document.querySelector("input");
            var btn = document.querySelector("button");
            btn.onclick = function(){
                var txtVal = txt.value;
                //switch是将括号里面的内容和case后面的条件进行全等判断，因此类型和数值都必须相等
                switch(txtVal){
                    case '1':
                    case '2':
                    case '3':
                    case '4':
                    case '5':
                        console.log("今天是工作日");
                        break;
                    case '6':
                    case '7':
                        console.log("今天是周末");
                        break;
                    default:
                        console.log("您输入的日期不合法！");
                        break;
                }
            };
        </Script>
</body>
</html>

结果：当输入1-5时显示是工作日，输入6-7时显示是周末

7.switch语句——default

所有的switch语句都可以使用if语句替换。但是如果可以使用switch语句时，推荐使用switch语句，更加简洁清晰。
但是在判断条件和括号里面的值不是全等的情况下，不能使用switch语句，这时就必须使用if语句。
当所有条件都不满足时，switch语句使用default，而if语句中使用else；
default可以写在switch语句中的任何位置，但是推荐使用在最下面

<!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>所有switch语句都可以使用if语句替换</title>
</head>
<body>
    <input type="text">
    <button>今天是工作日吗？</button>
    <Script>
            //当输入是工作日时输出“今天是工作日”，当输入是周末时输出“今天是周末”
            var txt = document.querySelector("input");
            var btn = document.querySelector("button");
            btn.onclick = function(){
                var txtVal = txt.value;
                //switch是将括号里面的内容和case后面的条件进行全等判断，因此类型和数值都必须相等
                // switch(txtVal){
                //     case '1':
                //     case '2':
                //     case '3':
                //     case '4':
                //     case '5':
                //         console.log("今天是工作日");
                //         break;
                //     case '6':
                //     case '7':
                //         console.log("今天是周末");
                //         break;
                //     default:
                //         console.log("您输入的日期不合法！");
                //         break;
                // }
                if(txtVal === '1' || txtVal === '2' || txtVal === '3' || txtVal === '4' || txtVal === '5'){
                    console.log("今天是工作日");
                }else if(txtVal === '6' || txtVal === '7'){
                    console.log("今天是周末");
                }else{
                    console.log("您输入的日期不合法！");
                }
            };
        </Script>
</body>
</html>

发现结果一致。且switch中的default和if语句中的else功能一致。

8.switch：分数评级案例

当发现判断条件是在某一段范围是，可以通过在switch括号中写上布尔值，在case条件中写条件，这样switch括号中的布尔值就可以和case条件的结果进行全等比较。

<!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>分数评级</title>
</head>
<body>
    <input type="text">
    <button>评级</button>
    <script>
        var txt = document.querySelector("input");
        var btn = document.querySelector("button");
        btn.onclick = function(){
            var score = txt.value;
            //可以通过在switch括号中写上布尔值，在case条件中写条件，这样switch括号中的布尔值就可以和case条件的结果进行全等比较
            switch(true){
                //成绩输入有可能输入超过100或小于0，所以需要限定完全
                case score>=90 && score<=100 :
                    console.log("优秀");
                    break;
                case score>=60 && score<90 :
                    console.log("良好");
                    break;
                case score>=0 && score<60 :
                    console.log("不合格");
                    break;
                default :
                    console.log("成绩有误");
                    break;
            }
        };
    </script>
</body>
</html>

结果：

9.for..in循环

回顾for循环：

初始化变量；
判断当前for循环结束条件；
更改判断条件；

for(初始化;循环条件;变更条件){
    //满足循环执行的代码...
}

for循环的用处：用于给获取到的元素批量获取数组的值，批量添加样式等。

但是对于object对象这种的复杂对象，for循环无法获取到对象中的值。因为object对象格式的对象没有length属性,所以不能使用for循环，将object对象的长度作为循环结束的条件。因此不能使用for循环，将object对象的长度作为循环结束的条件。所以只能使用for...in循环。
for in循环也可以获取到数组的值，但是数组一般不需要拿到key值，所以对于数组不推荐使用for in循环

for...in循环格式：

for(var key in obj){
    //这里的key指的就是对象下的属性
}

对于Object复杂对象通过for...in循环获取key和value：

//对于object对象这种的复杂对象，for循环无法获取到对象中的值，所以只能使用for...in
        var obj = {
            name:'lmf',
            age:20,
            tel:'13316789876'
        }
        //object对象格式的对象没有length属性,所以不能使用for循环，将object对象的长度作为循环结束的条件
        // console.log(obj.length);//undefined
        for( var key in obj){
            //通过key就可以获取到key对应的value值
            console.log(key+" : "+obj[key]);
        }

结果：

for in循环也可以获取到数组的值，但是数组一般不需要拿到key值，所以对于数组不推荐使用for in循环：

//for in循环也可以获取到数组的值，但是数组一般不需要拿到key值，所以对于数组不推荐使用for in循环
        var arr = [true,10,'1','a'];
        for(var i in arr){
            console.log(arr[i]);
        }

结果：

10.while和do while循环

10.1 while（前测试循环语句）

先判断条件是否成立，再执行代码

格式：

while(判断条件){
    //需要循环的代码
}

for循环和while循环使用：

for循环：更适合已知执行次数的情况，例如，我们要获取数组中的每一位的值；
while循环：更适合未知的执行次数的情况。

10.2 do while（后测试循环语句）

先执行代码再判断条件，至少会执行一次代码。

格式：

do{
	//需要循环执行的代码
}while(
	//判断条件
)

10.3 需求：找到第一个大于23的数。

使用for循环：

<script>
        //需求：找到第一个大于23的数
        var arr = [10,23,56,98,34];
        //如果使用for循环
        console.log("使用for循环打印的结果：");
        for(var i=0;i<arr.length;i++){
            if(arr[i]>23){
                console.log(arr[i]);
            }
        }

结果：发现会将大于23的所有数据都打印出来，不符合需求

使用while循环：

<!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>while循环</title>
</head>
<body>
    <script>
        //需求：找到第一个大于等于23的数
        var arr = [10,23,56,98,34];
        //如果使用for循环
        // console.log("使用for循环打印的结果：");
        // for(var i=0;i<arr.length;i++){
        //     if(arr[i]>23){
        //         console.log(arr[i]);
        //     }
        // }
        console.log("使用while循环打印的结果：");
        var num = 24;
        var i = 0;
        //注意：需求是找第一个大于23的数，所以循环条件是，只要小于23都会执行
        while(arr[i]<num){
            //i++在判断条件前面，因为循环条件已经判断了arr[i]<num，所以arr[i]>=num已经不可能了，所以只需要判断下一个是否>=num即可得到
            i++;
            //这里需要同时判断两者是否相等，因为有可能给出的num就是数组中的某个值，否则不会有任何打印结果
            if(arr[i]>=num){
                console.log(arr[i]);
            }
        }
    </script>
</body>
</html>

结果：符合需求。

同样的需求，使用do while：（while条件中使用了while(arr[i-1]<num)）,使用i-1判断的还是i++前的数，所以这里使用do...while不推荐，因为可以先判断了有循环条件再执行，效果更好。

<script>
         var arr = [10,23,56,98,34];
        console.log("使用do while循环打印的结果：");
        var i = 0;
        var num = 27;
        do{
            console.log(i);
            if(arr[i]>=num){
                console.log(arr[i]);
            }
            //这里因为是判断arr[i]>num是否成立，所以i++需要写在判断条件后面
            i++;
            //因为可能num是数组中某个值，但是i++前还未判断到，所以需要同时判断是否等于num
        }while(arr[i-1]<num);
    </script>

结果：

11.break,continue终止循环

break（打破）

终止当前循环，包括break后面的代码也会被停止执行，并且跳出该循环。
break只能跳出当前循环，如果有多个for循环，break是不会跳出所有循环的。要使其跳出所有循环，需要在每个循环中使用break
break跳出循环后，本循环break后的所有代码都不会再执行

continue（持续）

终止本次循环，包括continue后面的代码也会被停止执行，但是不跳出整个循环，循环会在这次之后，继续执行。

for循环问题重现：使用for循环找到第一个大于或等于23。问题：会打印大于或等于23的所有数据

解决：在第一次打印第一个大于或等于23的数据时，直接使用break跳出整个循环即可。

<!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>for循环问题重现</title>
</head>
<body>
    <script>
        var arr = [10,23,56,98,34];
        var num = 23;
        console.log("使用for循环打印的结果：");
        for(var i=0;i<arr.length;i++){
            if(arr[i]>=num){
                console.log(arr[i]);
                break;
                console.log("break后的代码");
            }
        }
    </script>
</body>
</html>

结果：console.log("break后的代码");并没有打印

注意：break只能跳出当前循环，如果有多个for循环，break是不会跳出所有循环的

continue:当数组中数据等于5时终止循环

<script>
        for (var i = 0; i < 10; i++) {
            if(i==5){
                continue;
                console.log("continue后的代码");
            }
            console.log(i);
        }
    </script>

结果：发现只有i=5时未打印，且console.log("continue后的代码");并没有打印

Jyann~

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ECMAScript流程控制

流程控制语句分类，switch基本结构，switch穿透性及break，switch语句default，switch案例分数评级，for...in语句，while及do while语句，break及continue终止循环。1.程序的三种基本结构顺序结构：按照顺序一条一条执行，从上至下；分支结构：执行的时候，可以根据条件进行选择，条件越多对应的结果越多，分支也就越多。if...else...
复制链接

扫一扫