05-JS流程控制.md

1. 什么是流程控制

流程控制就是来控制我们的代码按照什么样的结构顺序来执行

• 顺序结构（按照代码的从上到下，从左右到的顺序，依次执行）
• 分支结构（if...else、switch）
• 循环结构(for、while)

2. 分支结构

在代码以顺序执行的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果。

• if 语句
• switch 语句

2.1 if 语法结构

// 单个条件
if(条件表达式){
	条件成立执行语句
}

// 单个条件
if(条件表达式){
    条件成立执行的代码
}else{
    条件不成立执行的代码
}

// 多个条件
if(条件1){
    条件1成立执行的代码
}else if(条件2){
    条件2成立执行的代码
}else if(条件3){
    条件3成立执行的代码
}......
else{
    所有条件都不成立时执行的代码
}

2.2 三元表达式

三元表达式也能做一些简单的选择。由三元运算符的组成的式子叫做三元表达式

• 语法结构 a?b:c
• 如果a为真，那么返回b
• 如果a为假，那么返回c

2.3 switch语法结构

switch语句也是多分支语句，它是基于不同的条件来执行不同的代码。当要针对的变量设置一系列特定的值时，就可以使用switch。switch语句只能实现规定值。

举个例子：

// 假如num是0-5的数字
switch(num){
    case 0:如果num是0，执行这个代码;break; // 一定要加上break
    case 1:如果num是1，执行这个代码;break; // 一定要加上break
    case 2:如果num是2，执行这个代码;break; // 一定要加上break
    case 3:如果num是3，执行这个代码;break; // 一定要加上break
    case 4:如果num是4，执行这个代码;break; // 一定要加上break
    case 5:如果num是4，执行这个代码;break; // 一定要加上break
    default: 这个是不满足上述条件执行的代码;break;
}

• num必须要和case后面的值全等（值和类型都相等）才可以
• 如果没有break；那么就会一直执行下一个case，直到遇到break或者遇到default才会停止

2.4 switch语句和if...else if...语句的区别

• 一般情况下，这两个语句是可以相互替换的
• switch...case语句通常处理case为比较确定值的情况下，而if...else if语句更加灵活，常用语判断范围（大于、等于某个范围）
• switch 语句直接执行匹配的代码，效率更高，而if语句则是有几种条件，就要判断多少次
• 当分支比较少时，if语句比switch效率更高
• 当分支比较多时，switch语句比if效率高，而且结构更清晰

3. 循环结构

如果代码需要多次重复执行，那么就可以放入循环中。

• for 循环
• while 循环
• do...while 循环

3.1 for循环

在程序中，一组被重复执行的语句被称为循环体，能够继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

for(初始化变量;条件表达式;操作表达式){
    每次循环执行的代码
}

• 初始化变量：用var声明的普通变量，通常用于计数器。例如：var i = 0;
• 条件表达式：循环终止的条件，循环执行的次数。例如：i<100
• 操作表达式：每次循环执行的代码，经常用于计数器变量进行更新（递增、递减）。例如：i++

3.2 双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结果，例如在for语句中，我们可以再嵌套一个for循环。

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

外面的循环执行一次，里面的循环执行全部

for循环写九九乘法表

var str = "";
for (var i = 1; i < 10; i++) {
    for (var j = 1; j <= i; j++) {
        str += j + "×" + i + "=" + i * j + "\t";
    }
    str += "\n";
}
console.log(str);

3.3 while循环

while语句在条件表达式为真的情况下，循环执行制定的一段代码，直到条件不为真的时候才会结束

while(条件表达式){
    //循环执行的代码
}

3.4 do...while循环

do...while语序其实是while循环的一个变体。该循环会先执行一次代码块，然后对表达式进行判断，如果条件为真，那么就会继续执行代码块，否则退出循环。

do {
    //循环体
}while(条件表达式)

do...while至少会执行一次循环体的代码

3.5 循环小结

• JS循环中有for、while、do...while
• 三个循环多数情况下都可以相互替代使用
• 如果是用来计数，和数字有关的，三者基本相同，for比较常用
• while和do...while可以做更复杂的条件判断，比for更灵活一些
• while和do...while执行顺序不同，while是判断后执行，do...while是先执行一次后判断
• while和do...while执行次数不同，do...while至少会执行一次，while则可能一次都不执行
• 实际开发中，我们更加常用for循环

3.6 continue关键字

continue关键字用于立即跳出本次循环，继续下次循环

3.7 break关键字

break关键字用于直接结束循环