JavaScript 流程控制

2021-05-06 08:18:41 更新

B站关联视频教程:https://www.bilibili.com/video/BV1RA41137yd?p=6

目录:

一、分支结构

    1、if else

    2、switch

    3、三目运算符

二、循环结构

    1、for

    2、while

    3、do while

三、break continue

    1、break

    2、continue



内容:

一、分支结构


    1、if else

通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码

if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

if 语句 

语法:

if (condition){
    当条件为 true 时执行的代码
}

if...else 语句

请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。

语法:

if (condition){
    当条件为 true 时执行的代码
}else{
    当条件不为 true 时执行的代码
}

试一试:

<script>
    if(1<2){
        document.write("正确");
    }else{
        document.write("错误");
    }
</script>
<script>
    //只输出 1小于2
    if(1<2){
        document.write("1小于2");
    }else if(1>0){
        document.write("1大于0");
    }
</script>
<script>
    //输出 1小于2 和 1大于0
    if(1<2){
        document.write("1小于2");
    }
    if(1>0){
        document.write("1大于0");
    }
</script>

if语句可以单独使用,也可以和if else 或者 if else if结合使用。

2、switch

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法:

switch(n){
    case 1:
        //执行代码块 1
        break;    
    case 2:
        //执行代码块 2
        break;    
    default:
        //与 case 1 和 case 2 不同时执行的代码
}

工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

<script>
    var x;
    var d=new Date().getDay();
    
    switch (d){
        case 0:x="今天是星期日";
            break;
        case 1:x="今天是星期一";
            break;
        case 2:x="今天是星期二";
            break;
        case 3:x="今天是星期三";
            break;
        case 4:x="今天是星期四";
            break;
        case 5:x="今天是星期五";
            break;
        case 6:x="今天是星期六";
            break;
    }
    document.write(d);
    document.write(x);
</script>

    3、三目运算符

JavaScript中的三目运算符用作判断时,

语法:

expression ? sentence1 : sentence2

当expression的值为真时执行sentence1,否则执行 sentence2, 请看代码:

<script>
   var a= 3>2?1:2
   document.write(a);//1
</script>

三目运算符类似于if else 但是比if else 更简洁,性能也高于if else。


二、循环结构

如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

我们以计算1+2+3+4+……100的和为例,分别用不同的循环写法实现。

    1、for

<script>
    var sum=0;
    for(i=0;i<=100;i++){
        sum=sum+i;
    }
    document.write(sum);
</script>

    2、while

<script>
    var sum=0;
    i=0;
    while(i<=100){
        sum=sum+i;
        i++
    }
    document.write(sum);
</script>

    3、do while

<script>
    var sum=0;
    i=0;
    do{
        sum=sum+i;
        i++
    }
    while(i<=100)
    document.write(sum);
</script>

三、break continue


    1、break

程序执行中,满足指定条件后,需要终止(循环)。

<script>
    var sum=0;
    for(i=0;i<=100;i++){
        if(i==100){ // 为100的时候,跳出循环体,终止循环,所以4950
            break;
        }
        sum=sum+i;
    }
    document.write(sum);
</script>

    2、continue

程序执行中,满足指定条件后,需要终止本次循环,继续进行后续循环。

<script>
    var sum=0;
    for(i=0;i<=100;i++){
        if(i==100){ // 为100的时候,跳出本次循环体,继续进行其他循环,所以4950
            continue;
        }
        sum=sum+i;
    }
    document.write(sum);
</script>
<script>
    var sum=0;
    for(i=0;i<=100;i++){
        if(i==1){ // 为100的时候,跳出本次循环体,继续进行其他循环,所以5049
            continue;
        }
        sum=sum+i;
    }
    document.write(sum);
</script>