JavaScript流程控制语句

1.1 流程控制语句分类

任何复杂的程序逻辑都可以通过 ” 顺序 ” 、 ” 条件 ( 分支 )” 和 ” 循环 ” 三种基本的程序结构来实现。

• 顺序程序结构就是从上往下顺序执行语句；程序默认就是由上到下顺序执行的
• 条件(分支)程序结构就是根据不同的情况执行不同的语句；
• 循环程序结构就是某些语句要循环执行多次。

 1. 条件语句(分支语句) :

if 单分支语句

if-else 双分支语句

if - else if 多分支语句

switch 开关语句

2. 循环语句

for 循环语句

while 循环语句

do-while 循环语句

for ／ in 循环语句 ( 增强 for 循环、 foreach 循环 )

1.2 条件语句

if 语句即条件判断语句，一共有三种格式：

• 单分支的条件语句；
• 双分支的条件语句；
• 多分支的条件语句。

条件语句用于基于不同的条件来执行不同的动作。

1.2.1 单分支的条件语句

if(){} 语句 - 只有当指定条件为 true 时，使用该语句来执行代码：

if (/* 条件表达式 */) {

// 执行语句

}

注意：

• 放在if之后的括号里的返回值为boolean类型的表达式或boolean值，即这个表达式的返回值只能是true或false。
• 如果表达式的值为true，则执行语句；如果表达式的值为false，则什么也不执行。
• 花括号括起来的语句块可以只有一行语句，也可以由多行代码构成。一个语句块通常被当成一个整体来执行。 如果语句块只有一行语句时，则可以省略花括号，因为单行语句本身就是一个整体，无须花括号来把它们定义成一个整体。建议都加花括号;

1.2.2 双分支的条件语句

if()...else 语句 - 当条件为 true 时执行语句1，当条件为 false 时执行语句2

if ( /* 条件表达式 */ ){

// 成立执行语句

} else {

// 否则执行语句

}

if ( 条件表达式 ){

语句 1 ;

} else {

语句 2 ;

}

注意：

• 放在if之后的括号里的返回值为boolean类型的表达式或boolean值，即这个表达式的返回值只能是true或false。
• 如果if表达式的值为true，则执行语句1；如果表达式的值为false，则执行语句2。

1.2.3 多分支的if条件语句

if()...else if()....else 语句 - 使用该语句来选择多个代码块之一来执行.

if ( /* 条件 1 */ ){

// 成立执行语句

} else if ( /* 条件 2 */ ){

// 成立执行语句

} else if ( /* 条件 3 */ ){

// 成立执行语句

} else {

// 最后默认执行语句

}

语法：

if ( 条件表达式 ) {

语句 1 ;

} else if ( 条件表达式 ) {

语句 2 ;

} ...

else {

语句 n ;

}

注:if语句()中的表达式会自动转换成布尔值。

满足条件即执行对应语句，然后语句就结束：如果都不满足，则执行else语句：当然else语句块可以不存在。

1.2.4 switch多条件选择语句

switch 语句又称开关语句，它与多重 if 语句类似，前者用于等值判断，后者用于区间值和等值判断。

switch 语句的作用是根据表达式的值，跳转到不同的语句。 switch 语句用于基于不同的条件来执行不同的动作。

语法：

switch ( expression ) {

case 常量 1 :

语句 ;

break ;

case 常量 2 :

语句 ;

break ;

case 常量 3 :

语句 ;

break ;

…

case 常量 n :

语句 ;

break ;

default :

语句 ;

break ;

}

 switch多条件选择语句:

首先设置表达式，随后表达式的值会与结构中的每个 case 的常量表达式做比较。如果存在匹配，则与该case 关联的代码块会被执行。

使用 break 来阻止代码自动地向下一个 case 运行。 default 关键词来规定匹配不存在时做的事情，也就是说，当没有匹配的值时，执行default 下的语句。

switch 语句在比较值时使用的是全等操作符 , 因此不会发生类型转换 （例如，字符串 '10' 不等于数值10）

工作原理： 首先设置表达式 n （通常是一个变量）。

随后表达式的值会与结构中的每个 case 的值做比较。

如果存在匹配，则与该 case 关联的代码块会被执行。

请使用 break 来阻止代码自动地向下一个 case 运行。

default 关键词来规定匹配不存在时做的事情 ; 相当于 if 里的 else

注意 :

1 、每个 case 语句下的 break 语句一般不可以省略， break 语句表示退出 switch 语句，如果省略，则会继续执行下一个case 语句中的代码，直到遇到 break 语句跳出 switch 语句。

2 、 default 语句可以出现在switch 语句中任何地方，如果放在最后，其中的 break 语句可省略。 default 语句也可省略。

3 、每个 case 语句没有先后顺序之分，但建议按照常量表达式的值从小到大的顺序。

4 、 switch语句用于等值判断，也就是说表达式的结果是个具体的值；而多重 if 选择结果的表达式的值是个区间，比如大于100 而小于 200 。

输入一个数字，打印对应的星期

var day = 10 ;

switch ( day ) {

case 1 :

console . log ( ' 星期一 ' );

break ;

case 2 :

console . log ( ' 星期二 ' );

break ;

case 3 :

console . log ( ' 星期三 ' );

break ;

case 4 :

console . log ( ' 星期四 ' );

break ;

case 5 :

console . log ( ' 星期五 ' );

break ;

case 6 :

console . log ( ' 星期六 ' );

break ;

case 7 :

console . log ( ' 星期日 ' );

break ;

default :

console . log ( ' 输入的值不在星期范围内 ' );

break ;

}

1.3 循环结构

循环程序的结构有三要素：循环的初始值、循环条件 ( 循环的结束值 ) 和循环的迭代，所谓循环的迭代就是如何从初始值到结束值，比如是每次加1 还是每次加 2 ，诸如此类等。当然，一个循环程序还有包含一个循环体

1.3.1 while 语句

while 循环会在指定条件为真时循环执行代码块，它是一种先判断，后运行的循环语句，也就是说，必须满足条件了之后，方可运行循环体。用于不太确定循环次数的场合。

语法：

// 当循环条件为 true 时，执行循环体，

// 当循环条件为 false 时，结束循环。

while ( 循环条件 ) {

// 循环体

}

 例如：

// 打印 1-100 之间所有的数字

var i = 1 ;

while ( i <= 100 ) {

console . log ( i );

// i = i + 1;

// i += 1;

i ++ ;

}

1.3.2 do...while循环

 

do...while 循环是 while 循环的变体，在检查条件是否为真之前，该循环会至少执行一次 do 下的代码块(循环体 ) ，然后如果条件为真的话，就会重复这个循环，否则退出该循环体。常用于至少执行一次循环体，再判断要不要继续循环的场合。

语法：

do {

// 循环体 ;

} while ( 循环条件 );

例如：

// 求 100 以内所有 3 的倍数的和

var i = 1 ;

var sum = 0 ;

do {

// 循环体

// 判断是否是 3 的倍数，如果是 3 的倍数累加

if ( i % 3 === 0 ) {

sum += i ;

}

// i 自身 +1

i ++ ;

} while ( i <= 100 );

console . log ( sum );

1.3.3 for语句

for 语句是应用最广泛、功能最强的一种循环语句。大部分情况下， for 循环可以代替 while 循环、 do while 循环。

for 语句是一种在程序执行前就要先判断条件表达式是否为真的循环语句。假如条件表达式的结果为假，那么它的循环语句根本不会执行。for 语句通常使用在知道循环次数的循环中。

while 和 do...while 一般用来解决无法确认次数的循环。 for 循环一般在循环次数确定的时候比较方便

 for 语句语法格式：

for ( 条件表达式 1 ; 条件表达式 2 ; 条件表达式 3 ) {

语句块 ;

}

 for 循环中 3 个条件表达式的含义如下：

for循环执行机制:

 

for 循环的循环迭代语句并没有与循环体放在一起，因此即使在执行循环体时遇到continue 语句结束本次循环，循环迭代语句也一样会得到执行。

for 循环和 while 、 do while 循环不一样：由于 while 、 do while 循环的循环迭代语句紧跟着循环体，因此如果循环体不能完全执行，如使用 continue 语句来结束本次循环，则循环迭代语句不会被执行。但for 循环的循环迭代语句并没有与循环体放在一起，因此不管是否使用 continue 语句来结束本次循环，循环迭代语句一样会获得执行。

与前面循环类似的是，如果循环体只有一行语句，那么循环体的大括号可以省略

1.3.4 for...in语句

for...in 语句用于遍历数组或者对象的属性（通常我们使用 for/in 语句循环遍历对象的属性，在数组中可以遍历数组中的所有元素）。

for...in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for..in 遍历数组

// 定义一个数组
var arr = [13,21,34,42,53,63];
// 普通for循环遍历
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
// 使用for..in遍历数组
for(var i in arr){
console.log(arr[i]);
}

for..in 遍历对象

// 创建一个对象
var person = {
name : "jack",
age : 12,
height: 178
}
//列举对象属性名及其值
for(var pro in person){
console.log(pro+" "+person[pro])
}

在 JavaScript 语言中，支持循环语句的相互嵌套，即在一个循环语句中嵌套另一个循环语句，也就是说，for循环语句可以嵌套 for 语句，也可以嵌套 while 循环语句，或者 do..while 循环语句，其他的循环语句也是一样的。

需要注意的是， break 和 continue 语句用在循环嵌套中，这两条语句只对离它最近的循环语句有效。比如如果break 语句用在内层的循环语句中，则只退出内层的循环，对外层循环没有影响。

1.4 跳转语句

break: 立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue: 立即跳出当前循环，继续下一次循环（跳到 i++ 的地方）

continue 语句只能用在循环中； break 能用在循环或 switch 中。

1.5 调试

过去调试 JavaScript 的方式

• alert()
• console.log()

断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

 调试步骤

浏览器中按 F12-->sources--> 找到需要调试的文件 --> 在程序的某一行设置断点

调试中的相关操作

Watch: 监视，通过 watch 可以监视变量的值的变化，非常的常用。

F10: 程序单步执行，让程序一行一行的执行，这个时候，观察 watch 中变量的值的变化。

F8 ：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。