四 JavaScript流程控制

四 流程控制

4.1 代码块

使用{}来创建代码块，代码块可以用来对代码进行分组

同一个代码中的代码，就是同一组代码，一个代码块中的代码要么都执行要么都不执行

在JS中，使用let声明的变量具有块作用域，在代码块中生命的变量无法在代码块的外部访问

var声明的变量，不具有块作用域

{
    let a = "Hello World"
}
console.log(a); // ReferenceError: a is not defined

{
    var a = "Hello World"
}
console.log(a); // Hello World

if 语句：if() 进行判断，如果判断结果为true，则会执行下一条语句；如果将多条语句用代码块包裹起来，则会执行代码块内的多条内容。【下文有讲】

4.2 if语句

流程控制语句可以用来改变程序的执行顺序

流程控制语句有：

1. 条件判断语句：if
2. 条件分支语句：switch
3. 循环语句：while for

4.2.1 语法

if(条件表达式){
	语句...
}

4.2.2 执行流程

if语句会先对条件表达式进行求值判断

• 判断结果为true 执行if后面的语句
• 判断结果为false不执行

if语句只会控制紧跟其后的那一行代码，如果希望控制多行代码，可以使用代码块（{}）将语句包裹起来

if(true) console.log("你好"); // 你好

if(false)console.log("你好") // 不会执行
console.log("你不好") // 你不好

如果if后添加的不是布尔值，则会转换为布尔值然后再运算

if(100){
    console.log("Hello");
}
if (80>30) {
    console.log("World");
}

// Hello
// World

4.2.3 if-else

语法：

if(条件表达式){
    语句...
}else{
    语句...
}

执行流程：

if-else执行时，先对条件表达式进行求值判断，

• 如果结果为true 则执行if后的语句

• 如果结果为false 则执行else后的语句

if (10>20) {
    console.log("十其实是大于二十的");
}else{
    console.log("十不大于二十");
}
// 十不大于二十

4.2.4 if-else if-else

语法：

if(条件表达式){
    语句...
}else if(条件表达式){
    语句...
}else if(条件表达式){
    语句...
}else if(条件表达式){
    语句...
}else{
    语句...
}

执行流程：

if-else if-else语句，会自上向下依次对if后的条件表达式进行求值判断，

• 如果条件表达式结果为true，则执行当前if后的语句，执行完毕语句结束

• 如果条件表达式结果为false，则继续向下判断，直到找到true为止

• 如果所有的条件表达式都是false，则执行else后的语句

let a = 10
if (a>100) {
    console.log("a大于100");
}
else if(a>10){
    console.log("a大于10");
}else{
    console.log("a既不大于100也不大于10");
}
// "a既不大于100也不大于10"

if-else if-else语句中只会有一个代码块被执行， 一旦有执行的代码块，下边的条件不会再继续判断

4.3 switch语句

4.3.1 语法

 switch(表达式){
 	case 表达式:
    	代码...
    	break
	case 表达式:
		代码...
		break
		
	... ...
	
	default:
		代码...
		break
}

4.3.2 执行流程

switch语句在执行时，会依次将switch后的表达式和case后的表达式进行全等比较

• 如果比较结果为true，则自当前case处开始执行代码,一直执行下去，直到结尾或者遇到break，即case是代码执行的起始位置；

• 如果比较结果为false，则继续比较其他case后的表达式，直到找到true为止

• 如果所有的比较都是false，则执行default后的语句

这玩意还是蛮坑的，看下方函数的执行结果，所以break的必要性很强。

switch(1+1+1){
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 3:
        console.log(3);
    case 4:
        console.log(4);
    default:
        console.log("并不属于1到4的整数区域内");
}
/**
	执行结果：
		3
		4
		并不属于1到4的整数区域内
*/

switch语句和if语句的功能是重复，switch能做的事if也能做，反之亦然。

它们最大的不同在于，switch在多个全等判断时，结构比较清晰

4.4 循环语句

通过循环语句可以使指定的代码反复执行

JS中一共有三种循环语句

• while语句
• do-while语句
• for语句

通常编写一个循环需要三个条件

1. 初始化表达式（初始化变量）（在循环的整个生命周期中只执行一次）
2. 条件表达式（设置循环运行的条件）
3. 更新表达式（修改初始化变量）

4.4.1 while语句

语法：

while(条件表达式){
	语句...
}

while语句在执行时，会先对条件表达式进行判断，

• 如果结果为true，则执行循环体，执行完毕，继续判断

• 如果为true，则再次执行循环体，执行完毕，继续判断，如此重复

  知道条件表达式结果为false时，循环结束

当一个循环的条件表达式恒为true时，这个循环就是一个死循环，会一直执行（慎用）

let a = 0 // 初始化表达式
while(a < 3){ // 条件表达式
	console.log(a)
	a++ // 更新表达式
}

4.4.2 do-while循环

语法：

do{
	语句...
}while(条件表达式)

执行顺序：

do-while语句在执行时，会先执行do后的循环体，

• 执行完毕后，会对while后的条件表达式进行判断

• 如果为false，则循环终止

• 如果为true，则继续执行循环体，以此类推

和while的区别：

• while语句是先判断再执行

• do-while语句是先执行再判断

  实质的区别：

• do-while语句可以确保循环至少执行一次

4.4.3 for循环

for循环和while没有本质区别，都是用来反复执行代码，不同点就是语法结构，for循环更加清晰。

语法：

for(①初始化表达式; ②条件表达式; ④更新表达式){
    ③语句...
}

执行流程：

① 执行初始化表达式，初始化变量

② 执行条件表达式，判断循环是否执行（true执行，false终止）

③ 判断结果为true，则执行循环体

④ 执行更新表达式，对初始化变量进行修改

⑤ 重复②，直到判断为false为止

• 初始化表达式，在循环的整个的生命周期中只会执行1次
• for循环中的三个表达式都可以省略，直接死循环

for(;;){
    console.log("你好");
}
// 会死循环，持续向你问好

使用let 在 for循环的()中声明的变量是局部变量，只能在for循环内部访问

使用var在for循环的()中声明的变量可以在for循环的外部访问

创建死循环的方式：

while(true){};for(;;){}

4.4.4 嵌套循环

在循环中嵌套其他的循环

for (let i = 1; i <= 5; i++) {
    let arr = []
    for (let j = 1; j <= i; j++) {
        arr.push("*")
    }
    console.log(arr.toString().replace(/\,/g,'')); 
    // 使用toString()方法转换成字符串，然后replace()替换其中的逗号
}

执行结果如下：

4.5 break和continue

for (let i = 0; i <=5 ; i++) {
    console.log(i);
}
// 执行结果
// 012345

4.5.1 break

• break用来终止switch和循环语句
• break执行后，当前的switch或循环会立刻停止
• break会终止离他最近的循环

for (let i = 0; i <=5 ; i++) {
    if (i==1) {
        break
    }
    console.log(i);
}
// 执行结果
// 0

4.5.2 continue

• continue用来跳过当次循环

for (let i = 0; i <=5 ; i++) {
    if (i==1) {
        continue
    }
    console.log(i);
}
// 执行结果
// 02345 ps:1被跳过了，即continue之后的代码在本次循环不再执行