条件判断和循环【JavaScript入门教程3】

条件判断

计算机之所以能做很多自动化的任务，是因为它可以自己做条件判断。比如根据用户的分数，打印出不同的奖励值，在JavaScript中可以使用if语句实现这种智能判断：

var score = 70;
var reward;
if (score >= 60) {
    reward = score * 2;
} else {
    reward = 0;
}
console.log("Reward: " + reward); // 140

在以上代码中，我们赋值变量 score 数值 70，然后我们创建一个 reward 变量。紧接着我们进入条件判断，如果 score 大于等于 60，那么 reward 就是 score 的两倍（双倍奖励），否则 reward 就是 0。

以下是 if 语句的基本语法：

if (condition1) {
    //statement_block_1
} else if (condition2) {
    //statement_block_2
} else if (condition3) {
    //statement_block_3
} else {
    //statement_block_4
}

在 if 之后必须紧跟着一个条件判断，然后加上左尖括号( { )，再跟上要执行的代码，之后以右尖括号( } )作为一个条件的结束。如果判断的内容简单，比如以上 score 的例子，我们则不需要 else if 语句，直接紧跟着 else 语句即可，当 if 判断的条件不为真时，else 中的内容会自动执行。

如果我们需要判断多个条件，那么我们则需要加上 else if 语句，比如以下的例子：

var score = 70, reward = 0;
if (score >= 90) {
    reward = score * 2;
} else if (score >= 80) {
    reward = score * 3 / 2;
} else if (score >= 60) {
    reward = score;
} else {
    reward = 0;
}
console.log("Reward: " + reward); // 70

在这个例子中，我们有三个条件需要判断。第一个条件判断score是否大于等于90，如果为真，reward则是score的两倍，不为真的话，我们进入第二个条件判断：score是否大于80，为真，reward则是score的1.5倍，如果还不为真，那么就进入第三个条件判断：score是否大于60，如果为真，reward则会被赋予score一样的数值。最后的else只有在前三个条件都不满足的时候，才会被执行。

在我们的代码中，score为70，所以前两个条件判断都无法满足，但是能满足第三个判断，所以最后reward则是70。

在 if 语句中，只有第一个条件判断必须以 if 为开头，其他的都是 else if，else if的判断数量不限，最后再使用 else 来处理所有条件都不满足的情况。

条件判断类型

除了基本的数值条件判断外，JavaScript中还有其他的条件判断类型：

• 布尔条件：true
• 查询是否相等或不等：age == 18
• 数值比较：age >= 21
• 字符串比较：car == “BMW”
• 多个条件判断：score >= 60 && score <= 80

布尔判断：

// Boolean check
var game_over = true;
if (game_over) {
    console.log("Game Over :(");;
}
var alive = false;
if (alive) {
    console.log("Alive");
} else {
    console.log("You died :(");
}

数值比较：

// Numerical comparisons
var age = 18;
console.log(age == 18);
if (age <= 21) {
    console.log("You can't drink!");
}

字符串相等性比较：

// check for equality
var car ="bmw";
console.log(car == "bmw");
console.log(car == "audi");
// checking for equality is case sensitive
console.log(car == "Bmw");
console.log(car.toUpperCase() == "BMW");
// checking for inequality
if (car != "audi") {
    console.log("I want an Audi");
}

我们也可以使用数组自带的函数进行条件判断，比如以下的includes就能查看一个数值是否存在于数组中：

var cars = ["audi", "bmw", "subaru", "toyota"];
if (cars.includes("bmw")) {
    console.log("I have BMW!");
}

多条件判断：

// Checking multiple conditions
var age_1 = 22;
var age_2 = 18;
if (age_1 >= 21 && age_2 >= 21) {
    console.log("You can both drink.");
} else {
    console.log("You can't drink together.");
}
if (age_1 >= 21 || age_1 >= 21) {
    console.log("one of you can drink.");
}

if 嵌套

我们可以把if…elif…else结构放入另一个if…elif…else结构中：

var num = window.prompt("Enter a number: ");
if (num % 2 == 0) { 
    if (num % 3 == 0) {
        console.log("Your input can be divisible by 2 and 3.");
    } else {
        console.log("Your input can be divisible by 2, but cannot be divisible by 3.");
    }
} else {
    if (num % 3 == 0) {
        console.log("Your input can be divisible by 3, but cannot be divisible by 2.");
    } else {
        console.log("Your input can’t be divisible by both 2 and 3.");
    }
}

Switch语句

另一个能够进行条件判断的就是switch语句，它会根据不同条件执行不同的代码块，以下是它的基本语法：

switch(expression) {
    case x:
        break;
    case y:
        break;
    default:
}

switch语句中的变量类型可以是：boolean、number或者string。switch语句可以使用多个case语句，每个case后面跟着一个要比较的数值和冒号。在case语句中，如果出现 break 关键词，那么switch语句就会终止，beak 关键词不是必须的，如果没有的话，程序就会继续执行下一个case语句，知道出现break为止。如果所有的case都不满足，那么switch就会执行default中的语句。

var grade = "A";
switch (grade) {
    case "A":
        console.log("Great job!");
        break;
    case "B": 
    case "C":
        console.log("Good job.");
        break;
    case "D": 
    case "F": 
        console.log("You can do better.");
        break;
    default:
        console.log("Unknown grade");
}

在上面的例子中，我们根据grade打印出不同的信息，如果成绩是’A’就称赞，如果是’B’或者‘C’，也夸奖一下，如果是’D’或者’F’就鼓励对方，不然就是未知成绩。

循环

循环可以帮助我们执行一些重复的任务，让我们的程序更加智能化。在JavaScript中用来控制循环的主要有两个语句，while和for语句。

While循环

以下是 while 的语法：

while (condition) {
  // code block to be executed
}

其中condition为判断条件，也就是true和false其中的一个，如果为true，那么将执行语句块，否则将跳过该while语句块借着往下执行。

比如我们想要将0~9中的数值打印出来，可以简单地使用以下语句：

var num = 0;
while (num < 10) {
  console.log(num);
  num++;
}

这段代码将自动会输出数值0 到 9，在第一行num的初始值被设为1，在while判断的时候，如果num < 10是true，将会执行while内部的代码，先打印出num，然后将num的值加1，至此完成一次循环。下一个循环再将num和10比较，如果还是true，重复相同过程，直至num等于10后，num < 10将会为false，就结束了循环。

另一个与while相关的循环就是do…while语句，这个循环里的代码至少会被执行一次，然后再根据循环条件判断是否需要再次继续：

do {
  // code block to be executed
}
while (condition);

使用do…while，不管循环条件是否为真，循环至少会被执行一次。我们可以将上面的例子，用do…while来重写：

var num = 0;
do {
  console.log(num);
  num++;
}
while (num < 10);

在使用 while 句法的时候一定要注意在循环内部一定要修改判断条件的值，否则会造成“死循环”，也就是说程序的 while 部分将永远执行下去。以下就是一个永远不会停止的循环代码块：

while (true) {
    console.log("Forever ...");
}

此时只能通过强制关闭Chrome标签页结束程序。

For循环

如果我们知道循环确切的次数，可以使用 for 循环来代替 while 循环：

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

statement1 会在执行循环代码块之前有且只执行一次；statement2 定义了是否执行循环代码块的判断条件；statement3 会在每次循环代码块执行完之后执行。以下的例子使用 for loop 打印了数字 0 到 4：

for (var i = 0; i < 5; i++) {
  console.log(i);
}

statement1 定义了变量i，并初始化为数值1。statement2 定义了判断条件：i 是否小于5，如果条件为真，继续执行循环代码块，否则结束循环。每次执行完循环代码块后，statement3 让变量 i 增加 1。循环代码块的作用则是打印出 i 的数值。

下面的例子也是使用 for 循环，打印出 0 到 10 之间的偶数。

for (i = 0; i <= 10; i += 2) {
  console.log(i);
}

for 也可以用来遍历数值，比如以下的语句：

fruits = ["Banana", "Orange", "Apple", "Mango"];
length = fruits.length;
for (i = 0; i < length; i++) {
  console.log(fruits[i]);
}

以下的两个代码块也能实现相同的作用：

for (const s of fruits) {
  console.log(s);
}

fruits.forEach(function (item, index) {
  console.log(item);
});

智能循环：break和continue

在循环中，我们还有两个很重要的关键词要掌握。一个是break，另一个是continue。break 不仅仅可以用在 switch 中，也可以用在循环中，用于跳出整个循环语句块，如果是多层循环嵌套的话，break 跳出的则是最里层的循环，跳出后继续执行下面的语句。来看一个例子：

var nums = [3, 7, 4, 2, 9, 13, 22];
for (const num of nums) {
    if (num >= 10) {
        break;
    }
    console.log(num);
}

在这个循环块中，只要有个 num 大于等于10，整个循环语句块就结束了，所有打印完9，迭代到13的时候就停止了。

continue 用于循环语句，作用是提前让当前循环块结束，然后直接跳转到下一次循环的迭代。在 for 循环中，continue 会让程序跳转到下一个循环判断语句，在 while 中也是如此。来看一个例子：

for (var i = 0; i <= 10; i++) {
    if (i % 2 == 0) {
        continue;
    }
    console.log(i);
}

在这个例子中，只要 i 能够被 2 整除，那么就跳到下一个循环，不断打印出 i，所有这个程序会把 0 ~ 10 之间的奇数全部打印出来。

再来看一个将 break 和 continue 结合的例子：程序提示用户不断输入数值，只要输入的是偶数，程序就会将数值相加，并打印出当前输入偶数相加之和。否则程序就提醒用户是否要继续，如果用户输入 n，那么循环终止，打印出输入偶数之和。

var sum = 0;
while(true) {
    var num = Number(window.prompt("Enter a number: "));
    if (num % 2 == 0) {
        sum += num;
        console.log("sum = " + sum);
        continue;
    }
    var response = window.prompt("Do you want to continue?(Y/N)");
    if(response.toLowerCase()[0] == 'n') {
        break;
    }
}

以上就是关于条件判断和循环的基本内容了，大家可以通过以下的实践练习巩固知识点，下一章我们就来学习函数。

实践练习

请创建一个永久循环，在循环中，提示用户输入两个数字，并打印出两个数字区间内的所有奇数。如果用户输入1和5，就打印出1，3，5。如果用户输入的第一个数字大于第二个数字，就结束循环。