前端开发：JavaScript（3）—— 选择与循环

选择

在编程时，选择要素是代码逻辑中十分重要的一环。当达到某个条件时，程序会选择对应的一条分支往下走。选择时的关键字有if选择和switch选择。

选择

if-else

if-else

if-else语句的规则与JAVA中相同。我们先来看下面的代码：

javascript 复制代码

let a = 1;
    if(a==1)
        a++;
    else
        a--;
console.log(a);

选择语句很好理解：当a满足if中的条件时，程序会执行if下面包含的语句。如果不满足，则执行else下面的语句。在书写过程中，如果if或else语句中包含的代码要用{}包围。像上述例子中只有一条代码时，可以将{}省略。

那么，如果我想要有多条选择分支，而不是两条，该如何实现呢？我们直接做一个判断奇偶的逻辑，看下面的代码：

javascript 复制代码

let a = prompt("请输入一个正整数");//输入数据
    if(a%2==0)
    {
       alert("偶数");
    }
    else if(a%2==1)
    {
        alert("奇数");
    }
    else
    {
        alert("输入错误");
    }

else if 可以用来追加条件，并且可以写多条：

javascript 复制代码

let a = 10;
    if(a==1){console.log("haha")}
    else if(a==2){console.log("haha")}
    else if(a==3){console.log("haha")}
    else if(a==4){console.log("haha")}
    //...
    else {console.log("the end")};

switch

switch语句的语法也和JAVA中相同。其规则如下：

javascript 复制代码

switch (给定一个条件值val) {
  case 选项1:
    // 当val等于选项1时执行的代码
    break;
    
  case 选项2:
    // 当val等于选项2时执行的代码
    break;   
    //...    
  case 选项n:
    break:
    
  default:
    // 当val不匹配任何选项时执行的代码
}

switch语句相比于else-if语句更适用于条件不复杂，分支选项多的情况。

break表示跳出switch语句。执行后将不再执行break之后的语句，直接跳出上一级代码。在书写代码时，需要根据具体情况判断case中是否需要加上break语句。未使用break语句结束后的case语句会顺着代码顺序往下继续执行。

三元表达式

三元表达式如下：

javascript 复制代码

text1 ? case1 : case2

它表示如果text1中的结果为真，则返回执行case1的结果，如果为假，则执行返回case2的结果。例如：

javascript 复制代码

 let a = prompt("请输入a的值");
 alert(a==1?true:false);

如果输入a的值为1，则返回true；反之则返回false。

循环

循环也是编程中十分重要的一个逻辑环节，其思想为在达到某种给定条件之前重复执行给定区域中的语句。

循环中常使用的为while和for循环。它们的实现逻辑都比较简单，我们先来看while循环：

while

while循环的逻辑为：只要某个条件还成立，就会一直重复执行花括号 {} 里的代码。

代码书写如下：

javascript 复制代码

while (条件) {
    // 要重复执行的代码
}

执行顺序为先判断while（）中的条件，如果符合则执行{}中的语句，执行完成后又返回while（）中进行判断，重复操作直到条件不满足时跳出循环。

我们举一个例子：假设有一个装有足够多水的水壶，只要还有水杯未倒满水，我们就要一直往杯子里倒水：

javascript 复制代码

let cups = 3; // 假设有3杯水
while (cups > 0) { // 条件：杯子数大于0吗？
    console.log("倒了一杯水！"); // 重复做的事：打印倒水
    cups = cups - 1; // 关键！倒完一杯，杯子数减1 (更新条件)
}
console.log("水杯倒完了！");

for

再来看for循环。for循环的逻辑为：当明确知道或能计算出需要重复执行的次数时，for循环可以将计数器初始化、循环条件和更新三件事情集中写在一行，让结构更加清晰。

代码书写如下：

javascript 复制代码

for (初始化计数器; 循环条件; 更新计数器) {
    // 要重复执行的代码
}

有可能还是没有看懂for循环到底是怎么运作的。没关系，我们来看一个例子：数羊睡觉。从第一只羊开始数，在数到第5只时停止。

javascript 复制代码

// 要数五只羊
for (let i = 0; i < 5; i++) 
{ // i 从 0 开始；只要 i 小于 5；每次 i 加 1
    console.log("sheep"); // 重复数羊
}
console.log("fall asleep...");

这下一定明白for循环是如何运作了。

了解了while和for循环之后，我们只需要再讲解一下break和continue语句。

break：和上面讲解的相类似，break执行后会直接跳出当前循环，不再进行条件判断执行循环语句。

例如上面的数羊：

javascript 复制代码

let count = 0;
for (let i = 0; i < 5; i++) 
{ 
    console.log("sheep");
    count++; 
    break;
}
console.log(count);

我们会发现count最后打印出来为1.说明在执行第一次循环后就跳出循环了。

continue：continue会立刻跳过当前一次循环，之后会继续判断条件，执行下一条循环语句。

continue就不再代码举例。

书写循环语句时，一定要有能结束循环的条件，否则程序会一直执行循环语句，造成死循环，让程序过载而导致崩溃。