JavaScript 流程控制（if、switch、for、while）

关注

原创 2023-09-23 12:30:31 236 阅读 AI 写同款· GEO 优化 ›

ES-流程语句篇 1. 流程控制 概念：在一个程序执行过程中，各种代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解：流程控制就是来控制我们的代码什么结构顺序来执行。 流程控制主要有三种结构：顺序结构、分支结构、循环结构，这三种结构代表三种代码执行的顺序。 2. 顺序流程控制 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。 3. 分支流程控制 3.1 分支结构阅读详情

JavaScript 通过规定的语句让程序代码有条件的按照一定的方式执行。

JavaScript if…else 语句

条件语句

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

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

只有当指定条件为 true 时，该语句才会执行代码。

语法

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

请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

if (time<20){
  x="Good day";
}

请注意，在这个语法中，没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

If...else 语句

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

语法

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

if (time<20){
  x="Good day";
}
else{
  x="Good evening";
}

Javascript三目运算（三元运算）语句

与其他语言类似，JavaScript存在一个用于条件判断的三目(三元）运算符，它的基本使用方式是这样的：对于条件表达式b ? x : y，先计算条件b，然后进行判断。如果b的值为true，计算x的值，运算结果为x的值；否则，计算y的值，运算结果为y的值。一个条件表达式绝不会既计算x，又计算y。条件运算符是右结合的，也就是说，从右向左分组计算。例如，a ? b : c ? d : e将按a ? b : (c ? d : e)执行。

5 > 3 ? alert("5大于3") : alert("5小于3");

注意：if...else与三目运算这两者的区别，总结为一句话：三目运算有返回值，if else没有返回值

var n=1;
if(n>1){
    n=0;
}else{
    n++;
}
console.log(n);
//输出结果：2

var n=1;
n = n>1?0 : n++;
console.log(n);
//输出结果为：1

var n=1;
if(n>1){
    n=0;
}else{
    ++n;
}
console.log(n);
//输出结果：2

var n=1;
n = n>1?0 : ++n; 
console.log(n); 
//输出结果为：2

If...else if...else 语句

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

语法

if (condition1){
  当条件 1 为 true 时执行的代码 
}
else if (condition2){
 当条件 2 为 true 时执行的代码   
}  
else{
  当条件 1 和 条件 2 都不为 true 时执行的代码  
}

if (time<10){
  x="Good morning";
}
else if (time>=10 && time<20){
  x="Good day";
}
else{
  x="Good evening";
}

提示：在使用if、else if语句的时候需要注意它们中代码的执行顺序。

JavaScript switch 语句

switch 语句用于在不同的条件执行不同的动作。搭配case和default使用（default可以认为是一个特殊的case，case对应一种或多种（default）情况，Switch语句没有case是没有办法体现其功能的）。

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

语法

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

代码解释：

计算一次 switch 表达式
把表达式的值与每个case的值进行对比
如果存在匹配，则执行关联代码

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。

使用 break 来阻止代码自动地向下一个 case 运行,因为默认情况下Switch会按顺序将所有匹配的case（default）执行完毕！

案例

显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：

var day=new Date().getDay();
switch (day){
    case 0:
        x="Today it's Sunday";
        break;
    case 1:
        x="Today it's Monday";
        break;
    case 2:
        x="Today it's Tuesday";
        break;
    case 3:
        x="Today it's Wednesday";
        break;
    case 4:
        x="Today it's Thursday";
        break;
    case 5:
        x="Today it's Friday";
        break;
    case 6:
        x="Today it's Saturday";
        break;
}

break 关键词

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

使用 default 关键词来规定匹配不存在时做的事情（default也是case，是一类特殊的case，即已有case情况外的case）：

案例

如果今天不是星期六或星期日，则会输出默认的消息：

var day=new Date().getDay();
switch (day){
    case 6:
        x="Today it's Saturday";
        break;
    case 0:
        x="Today it's Sunday";
        break;
    default:
        x="Looking forward to the Weekend";
}

default不必是 switch 代码块中最后一个 case：

switch (new Date().getDay()){

    default: 

        text = "期待周末！";

        break;

    case 6:

        text = "今天是周六";

        break; 

    case 0:

        text = "今天是周日";

}

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 default。

常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：

switch (new Date().getDay()) {

    case 4:

    case 5:

        text = "周末快到了：）";

        break; 

    case 0:

    case 6:

        text = "今天是周末~";

         break;

    default: 

        text = "期待周末！";

}

Switching 的细节

如果多种 case 匹配一个 case 值，则选择第一个 case。

如果未找到匹配的 case，程序将继续使用默认 label。

如果未找到默认 label，程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较（===）。

值必须与要匹配的类型相同。

只有操作数属于同一类型时，严格比较才能为 true。

在这个例子中，x 将不匹配：

var x = "0";

switch (x) {

    case 0:

        text = "Off";

        break;

    case 1:

        text = "On";

        break;

    default:

        text = "No value found";

}

JavaScript for 循环

循环可以将代码块执行指定的次数。

JavaScript 循环

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

一般写法：

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

使用for循环

for (var i=0;i<cars.length;i++){
    document.write(cars[i] + "<br>");
}

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3){        
  被执行的代码块        
}

语句 1 （代码块）开始前执行 starts.

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

for (var i=0; i<5; i++){
  x=x + "The number is " + i + "<br>";
}

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件（i 必须小于 5）。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的，也就是说不使用语句 1 也可以。

可以在语句 1 中初始化任意（或者多个）值：

for (var i=0,len=cars.length; i<len; i++){
    document.write(cars[i] + "<br>");
}

同时还可以省略语句 1（比如在循环开始前已经设置了值时）：

var i=2,len=cars.length;
for (; i<len; i++){
    document.write(cars[i] + "<br>");
}

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）：

var i=0,len=cars.length;
for (; i<len; ){
    document.write(cars[i] + "<br>");
    i++;
}

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25};
for (x in person){
  txt=txt + person[x];
}

提示：在JavaScript中，for in循环不仅可以遍历对象的属性，还可以遍历数组。

JavaScript while 循环

JavaScript while 循环的目的是为了反复执行语句或代码块。

只要指定条件为 true，循环就可以一直执行代码块。

while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件){
 需要执行的代码
}

while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

 do{
  需要执行的代码
 }while (条件);

下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

do{
  x=x + "The number is " + i + "<br>";
  i++;
}while (i<5);

别忘记增加条件中所用变量的值，否则循环永远不会结束！

比较 for 和 while

使用 for 循环来显示 cars 数组中的所有值：

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
    document.write(cars[i] + "<br>");
    i++;
}

使用 while 循环来显示 cars 数组中的所有值：

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
    document.write(cars[i] + "<br>");
    i++;
}

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

Break 语句

break 语句可用于跳出循环。

continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

for (i=0;i<10;i++){
  if (i==3){
    break;
  }
  x=x + "The number is " + i + "<br>";
}

由于这个 if 语句只有一行代码，所以可以省略花括号：

for (i=0;i<10;i++){
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
}

Continue 语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。该例子跳过了值 3：

for (i=0;i<=10;i++){
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

注意：由于 break 语句的作用是跳出代码块，所以 break 可以使用于循环和 switch 等；而 continue 语句的作用是进入下一个迭代，所以 continue 只能用于循环的代码块。

JavaScript 标签

可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句，请在语句之前加上冒号：

label:
statements

break 和 continue 语句仅仅是能够跳出代码块的语句。

语法:

break labelname;
continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

收录于