javascript流程控制_javascript 流程控制-优快云博客

本文链接：https://blog.youkuaiyun.com/AI_U20/article/details/84589701

本文深入讲解JavaScript中的流程控制概念，包括顺序、选择（分支与条件）、循环结构，以及break和continue语句的使用技巧。通过实例演示if、switch、for、while、do...while循环的运行机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript流程控制

流程： 代码执行的顺序和方式；
流程控制：在JS中，用一些特殊的语句控制程序按照我们想要的方式去选择执行（执行一次or重复执行）

一、分类

1、顺序结构
2、选择结构
（1）分支结构

单路分支
双路分支
多路分支
嵌套分支

（2）条件结构

3、循环结构

for循环
while循环
do while循环

二、顺序结构

代码的正常的执行顺序：首先按引入的顺序一块一块执行，在每一块中一条一条语句的去执行。
e.g.先执行代码块1，后执行代码块2

{
    console.log("代码块1");
}
{
    console.log("代码块1");
}

三、选择结构

选择结构：对给定的条件进行判断，再根据判断结果来决定执行哪一段代码。

（一）分支结构

注： if 和 else if 使用布尔表达式或布尔值作为分支条件来进行分支控制

1. 单路分支

条件返回的结果只能是布尔值（其通常是由比较运算符或逻辑运算符组成的表达式所计算的结果值，或返回布尔型的函数等）。若传入其他类型的值，也会自动转换为布尔值。若表达式为true，则执行，否则不执行。
语法结构：

if(表达式){
	//当表达式为真时要执行的代码
}

e.g.

<script>
    var x=10,y=20,t;
    if(x<y){
        t=x;     //t=10
        x=y;     //x=20
        y=t;     //y=10
    }
    var H;
    console.log(H=(x>y));   //true
</script>

2.双路分支

注: else语句是if语句的从句，必须和if一起使用，不能单独存在。
语法结构：

if(表达式){
	//表达式为真时执行的代码
} else if {
	//表达式为假时执行的代码
}

e.g.

<script>
    var grade = prompt("请输入成绩");
    console.log(typeof grade);  //string
    if (grade >= 60){
        console.log("成绩合格");
    }else {
        console.log("成绩不合格");
    }
</script>

拓展：
prompt：是JS中的一个方法，用来显示提示对话框，返回值是字符串。如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。【注：在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。】

3. 多路分支

注：没有最后一个else也是可以的，当然可能每条路都不满足，也是存在的。
11. 当没有最后一个else时，多路中所有路都为假时，则不执行；
12. 当有最后一个else时，多路中所有路都为假时，则执行最后一个else{……}中的代码。
语法结构：

if(表达式1){
	//表达式1为真时执行的代码
}else if (表达式2){
	//表达式2为真时执行的代码
}else {
	//当表达式1&&表达式2为假时执行的代码
}

e.g.

var grade = prompt("请输入成绩");
 if(grade >= 90 && grade <=100){
   console.log("成绩优秀");
 }else if(grade >=80 && grade <90){
     console.log("成绩良好");
 }else if(grade >=60 && grade <80){
     console.log("成绩合格");
 }else if(grade >=0 && grade <60){
     console.log("成绩不合格");
 }else {
     console.log("输入异常");
 }

4. 嵌套分支

在一个分支结构中嵌套另一个分支结构。即if语句或else语句后面的代码块中又包含if语句……

var grade = prompt("请输入成绩");
if(grade >= 60 && grade <=100){
    console.log("成绩合格");
}else if(grade >=0 && grade <60){
    console.log("成绩不合格");
    if(grade == 0) {
        console.log("成绩为0");
    }
}else {
    console.log("输入异常");
}

（二）条件结构（switch）

switch语句 switch 语句用于基于不同的条件来执行不同的动作。也就是说，用于测试一个表达时的值，并根据测试结果选择执行相应的分支程序，从而实现分支控制。
switch语句由一个选择表达式和多个case标签组成，case标签后进阶一段代码块。
语法结构:

switch(表达式 n){
    case 1:  
    case "1": 
        //当 n==1，时执行代码块 1
        break;
    case 2:
        //当 n==1时，执行代码块 2
        break;
    default:
        //当 n 与 case 1 和 case 2 都不同时执行的代码
}

注:

switch语句的选择表达式的数据类型只能是整型或者是字符串，不能是boolean型，通常这个控制表达式是一个变量名称；
switch语句后的花括号是必须有的；
case语句的个数没有规定，可无限增加，但case标签和其后面的值之间应该有一个空格，之后面必须有一个冒号；
switch语句匹配完成后，将依次逐条执行匹配的分支模块中的语句，知道switch结构结束或遇到break才停止执行，so，请使用 break 来阻止代码自动地向下一个 case 运行。
default标签后直接跟一个冒号，而后写当所有case值都不匹配时要执行的代码【default语句可省略】
e.g.

var num1 = prompt("请输入数字1");
var num2 = prompt("请输入数字2");
var ysf = prompt("请输入运算符(+，-，*，/)");
console.log(typeof num1);//string
num1 = parseFloat(num1);//parseFloat:解析一个字符串，并返回一个浮点数
num2 = parseFloat(num2);
switch (ysf) {
    case "+":
    case "加":
        console.log(num1+num2);
    break;
    case "-":
    case "减":
        console.log(num1-num2);
    break;
    case "*":
    case "乘":
        console.log(num1*num2);
    break;
    case "/":
    case "除":
        console.log(num1/num2);
    break;
    default:
               console.log("输入异常");
}

拓展:
parseFloat()：此函数可解析一个字符串，并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以number类型返回该数字，而不是string类型。
注：

字符串中，只返回第一个数字；
开头与结尾的空格是允许的；
若字符串的第一个字符不能被转换为数字，则返回NAN。
e.g.

document.write(parseFloat(" 8 2 ")+"<br>");
document.write(parseFloat("g2 ")+"<br>");
document.write(parseFloat(" ")+"<br>");
document.write(parseFloat("2 g")+"<br>");
document.write(parseFloat("25g")+"<br>");
document.write(parseFloat("m g")+"<br>");
document.write(parseFloat("10.33")+"<br>");

效果图：
在这里插入图片描述

三、循环结构

for循环；while循环；do while循环

（一）for循环

主要用来控制循环语句的执行。
适用于明确知道重复执行次数的情况，即for语句将循环次数的变量在for语句中预先定义好。

1. 语法结构：

由分号（；）分割成三部分即：循环变量初始化；条件表达式；循环变量自增/自减；

初始化：一个赋值语句，用来循环控制变量赋初值；
条件表达式：一个关系表达式，决定什么时候退出循环；
循环变量（++/ --）：增量定义循环控制变量，每循环一次后按什么方式变化

2. for语句代码的运行：

第一次进入for循环时，对循环控制变量赋初值；
根据判断条件的结果决定是否要继续循环，若判断条件为真，则继续执行循环；若为假，则结束循环执行下面的语句。
注：so，步骤1（第一次）赋初值是的运行，不做++/ --的操作，执行完循环体内的语句后，系统会根据循环控制变量增/减方式，更改循环控制变量的值，再回到步骤2重新判断是否继续执行循环。

3. 小练习

输出1-100内所有的偶数：

for (var i=0;i<=100;i++){
	if(i%2==0){
	     console.log(i);
	 }
}
//换一种写法：
for (var i=0;i<=100;i++){
	i%2 || console.log(i);
}

求1-100累加的和：5050

var sum = 0;
for(var i=1;i<=100;i++){
    sum += i;
}
console.log(sum);

在页面做出十行十列表格，且偶数行背景色为#ccc

document.write("<table border='1' align='center'>");
for(var i=1;i<=10;i++){
    if(i%2==0){
        document.write("<tr bgcolor='#ccc'>");
    }else {
        document.write("<tr>");
    }
    for(var j=0;j<10;j++){
        document.write(`<td>第${i}行 第${j+1}列</td>`);
    }
    document.write("</tr>");
}
document.write("</table>");

效果图:
在这里插入图片描述

拓展：
document.write()：

常用来网页向文档中输出内容；
其次，也可以通过此方法输出变量和字符串的结合，通过变量拼接字符串来达到我们想输出的效果；
e.g.

var str = 'hello world';
document.write(str + " " + "嗨，你好");

效果图：
在这里插入图片描述

最后，还可以通过此方法来输出html标签，同时也可以将css样式写入标签中，注意书写格式，及引号之间的转义。

e.g.

document.write("<p style='border: 1px solid black;width:300px;height:90px;color:#fff;line-height:90px;background:blue;text-align:center;'>我爱学习 http://www.woaixuexi.com</p>")

效果图：
在这里插入图片描述

document.write("<ul>");
for(var i=1;i<10;i++){
   document.write("<li>123</li>");
   document.write("<li>");
   document.write(i);
   document.write("</li>");
   document.write("<li>"+i+"</li>");
   document.write("<li>"+(i+1)+"</li>");
   document.write(`<li>${i}</li>`);     //ES6新增，模板字符串
   document.write(`<li>${i+1}</li>`);   //ES6新增，模板字符串
}
document.write("</ul>");

拓展：
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。【注：如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。】

（二）while循环

设定一个布尔型条件，当条件为真时，不断执行一个语句块，直到条件为假。

1. 语法结构：

while (表达式){
	//当表达式为真时执行的代码
}

2. while循环实际的运行：

计算表达式的值，判断其true/false；
为false，while将结束，执行while之后的语句；
为true，执行while语句花括号中的代码块，然后返回第一条执行。

e.g.

//用if条件语句：
var grade = prompt("请输入成绩");
if(!(grade >= 0 && grade <= 100)){
    grade = prompt("请输入成绩");//只执行了一次，若第二次输入依旧为假值，就输入不了了
}
//使用while循环语句：
var grade;
while (!(grade >=0 && grade <=100)){
    grade = prompt("请输入成绩");//循环执行，直至输入真值
}

（三） do while循环

do while循环与while循环非常相似，区别在于do while循环表达式的值是在每一次循环结束后检查，so，do while循环语句必定会执行一次。

1. 语法结构：

do{
	/*当表达式为真时，要执行的代码*/
} while(/*表达式*/)

2. do while循环实际的运行：

先执行一遍do {……}花括号中的代码块；
然后计算表达式的值，判断其true/false；
为false，循环将结束，执行do while之后的语句；
为true，返回执行do{……}花括号中的代码块。

e.g.

var grade;
do {
    grade = prompt("请输入成绩");
}while (!(grade >=0 && grade <=100))

（四）循环的控制语句

1.break语句：

停止循环，而后不继续，用于跳出循环。
可以将深埋在嵌套循环中的语句退出到指定层数，break是接受一个可选的数字参数决定跳出几重（层）语句。
e.g. 鸡兔同笼，36个头，98只脚，求鸡、兔个数。
设：鸡为i，兔为j

loop1:   //loop1给这个循环的命名
for(var i=0;i<=36;i++){
    for(var j=36-i;j<=36;j++){
        if(i*2+j*4==98){
            console.log(`鸡的个数是${i}只，兔的个数是${j}只`);
            break loop1; //在这个位置，停止loop1循环的继续
        }
    }
}

2.continue语句：

停止循环，停止当前条件下的循环，而后继续。用于跳过循环中的一个迭代。

注：只能使用在循环语句内部，功能是跳出该次循环，继续执行下一次循环结构。【对于while和do while语句，continue跳转到循环条件开始出执行；对于for循环，控制变量更新，然后继续执行代码块。】
e.g.

for (var i=0;i<=10;i++) {
   if (i==3) continue;  //跳过了值 3
   console.log(i);   //0 1 2 4 5 6 7 8 9 10
}