第3章，JavaScript的流程控制

• 在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。我们要通过控制代码的执行顺序来实现我们要完成的功能。
• 简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。
• 流程控制主要有三种结构：分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

3.1，JavaScript顺序结构

• 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

console.log("1，学习JavaScript");//1，学习JavaScript
console.log("2，努力和坚持");//2，努力和坚持
console.log("3，兴趣驱动");//3，兴趣驱动

3.2，JavaScript分支结构

JavaScript的分支结构：

• 由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程）从而得到不同的结果。
• JavaScript提供了两种分支结构的语句：if语句，switch语句。

JavaScript的if分支结构：

• if语句的语法结构：if(条件表达式){ 执行语句 }。
• 如果if里面的条件表达式结果为真true，则执行大括号里面的执行语句。
• 如果if条件表达式结果为假，则不执行大括号里面的语句，则执行if语句后面的代码。
• JavaScript的if分支结构案例：

if (3 < 5) {
    console.log("进入到if语句块");
}
var age = window.prompt("请输入你的年龄：");
if (age > 7) {
    console.log("你的年龄需要不断培养自主学习能力");
}

JavaScript的if…else双分支结构：

• 如果表达式为真，那么执行语句1；否则执行语句2
• if…else语句双分支语法结构：

if(条件表达式){
执行语句1
}else{
执行语句2
}

• JavaScript的if…else双分支结构案例：

var age = 10;
if (age >= 10) {
    console.log("可以独自去旅行");
} else {
    console.log("回家学习");
}

var score = window.prompt("请输入你的考核平均分：");
if (score > 90) {
    console.log("你可以拿奖学金");
} else {
    console.log("继续努力加油");
}

• 判断输入年份是闰年还是平年？提示：一般能被4整除的年份是闰年，不能被4整除的年份是平年。如：1988年、2008年是闰年；2005年、2006年、2007年是平年。但是如果是世纪年（也就是整百年），就只有能被400整除才是闰年，否则就是平年。

var year = window.prompt("请输入年份：");
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    window.alert("你输入的是闰年");
} else {
    window.alert("你输入的是平年");
}

JavaScript的if…else多分支结构

• if…else语句多分支语法结构：

if (条件表达式1) {
    语句1;
} else if (条件表达式2) {
    语句2;
} else if (条件表达式3) {
    语句3;
} else {
    最后的语句;
}

• 如果条件表达式1满足就执行语句1执行完毕后，退出整个if分支语句
• 如果条件表达式1不满足，则判断条件表达式2满足的话，执行语句2，以此类推
• 如果上面的所有条件表达式都不成立，则执行else里面的语句
• JavaScript的if…else多分支结构案例：

var score = window.prompt("请输入分数：");
if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 70) {
    console.log("一般");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

JavaScript的switch分支结构

• switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码
• 当要针对变量设置一系列的特定值的选项时，就可以使用switch
• 利用我们的表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句，如果没有匹配上，那么执行default里面的语句
• switch语法结构：

switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
    default:
        执行最后的语句;
}

• JavaScript的switch分支结构案例：

var fruit = window.prompt("请你输入水果的名称：");
switch (fruit) {
    case "苹果":
        console.log("苹果2元/斤");
        break;
    case "雪梨":
        console.log("雪梨4元/斤");
        break;
    default:
        console.log("没有此水果价格");
}

var time = window.prompt("请输入时间：");
switch (parseInt(time)) {
    case 12:
        console.log("中午好");
        break;
    case 18:
        console.log("傍晚好");
        break;
    case 23:
        console.log("深夜好");
        break;
    default:
        console.log("你好");
}

3.3，JavaScript循环结构

• 在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
• JavaScript的循环三种方式：for循环，while循环，do…while循环

JavaScript的for循环结构

• for语法结构：

for (初始化变量; 条件表达式; 操作表达式) {
    循环体
}

• 初始化变量：用var声明一个变量，通常用于计数器赋值使用
• 条件表达式：用来决定每一次循环是否继续执行
• 操作表达式：每次循环最后执行的代码，经常用来计数器的变更
• JavaScript的for循环案例：

for (var i = 1; i <= 5; i++) {
    console.log("你好啊？" + i);
}
/*
* 你好啊？1
* 你好啊？2
* 你好啊？3
* 你好啊？4
* 你好啊？5
* */

var sum = 0;
for (var i = 0; i <= 5; i++) {
    sum += i;
}
console.log("和为：" + sum);//和为：15

for (var i = 1; i <= 5; i++) {
    if (i == 1) {
        console.log("这个人1岁，刚出生");
    } else if (i == 2) {
        console.log("这个人2岁了，去幼儿园");
    } else {
        console.log("这个人" + i + "岁了");
    }
}
/*
* 这个人1岁，刚出生
* 这个人2岁了，去幼儿园
* 这个人3岁了
* 这个人4岁了
* 这个人5岁了
* */

var num = window.prompt("输入循环的次数：");
for (var i = 1; i <= num; i++) {
    console.log("我在循环做事情");
}

JavaScript的双重for循环

• 双重for循环语法结构：

for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {
    for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {
        执行语句;
    }
}

• 可以把里面的循环看做是外层循环语句
• 外层循环循环一次，里面的循环执行全部
• JavaScript的双重for循环案例：

var str = "";
for (var i = 1; i <= 5; i++) {
    for (var j = 1; j <= 5; j++) {
        str = str + "▲";
    }
    str = str + "\n";
}
console.log(str);
/*
* ▲▲▲▲▲
* ▲▲▲▲▲
* ▲▲▲▲▲
* ▲▲▲▲▲
* ▲▲▲▲▲
* */

var str = "";
for (var i = 1; i <= 5; i++) {
    for (var j = i; j <= 5; j++) {
        str = str + "☆";
    }
    str = str + "\n";
}
console.log(str);
/*
* ☆☆☆☆☆
* ☆☆☆☆
* ☆☆☆
* ☆☆
* ☆
* */

JavaScript的while循环结构

• while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
• while语句语法结构：

while (条件表达式) {
    循环体代码
}

• 先执行条件表达式，如果为true，则执行循环体代码；如果为false，则退出循环，执行后面代码
• 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false，整个循环过程才会结束。
• JavaScript的while循环案例：

var i = 1;
while (i <= 5) {
    console.log("循环了" + i + "次");
    i++;
}
/*
* 循环了1次
* 循环了2次
* 循环了3次
* 循环了4次
* 循环了5次
* */

var sum = 0;
var j = 1;
while (j <= 5) {
    sum += j;
    j++;
}
console.log(sum);//15

JavaScript的do…while循环结构

• do…while语句其实是while语句的一个变体
• 该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环
• do…while语句语法结构：

do {
    循环体
} while (条件循环体);

• do…while先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环，do…while至少循环一次
• JavaScript的do…while循环案例：

var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 10);
console.log(sum);//55

do {
    message = window.prompt("你好吗？");
} while (message !== "我很好");
console.log("我也很好");

3.4，JavaScript的continue break关键字

JavaScript的continue关键字

• continue关键字用于立即跳出本次循环，继续下一次循环；
• 本次循环体中continue之后的代码就会少执行一次

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue;
    }
    console.log("我正在干" + i + "件事");
}
/*
* 我正在干1件事
* 我正在干2件事
* 我正在干4件事
* 我正在干5件事
* */

var sum = 0;
for (var i = 1; i <= 5; i++) {
    if (i % 2 == 0) {
        continue;
    }
    sum += i;
}
console.log(sum);//9
/*
* 余2为0，代表遇到偶数时立即执行continue跳出本次循环
* 所以结果就是1+3+5=9
* */

JavaScript的break关键字

• break关键字用于立即跳出整个循环，循环结束

for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        break;
    }
    console.log("我正在干" + i + "件事");
}
/*
* 我正在干1件事
* 我正在干2件事
* */