2.4 JavaScript循环语句
在JavaScript中有四种类型的循环语句。
➢ for：在指定的次数中循环执行代码块。
➢ for-in：循环遍历对象的属性。
➢ while：当条件为true时循环执行代码块。
➢ do-while：与while循环类似，只是先执行代码块再检测条件是否为true。
2.4.1 for循环
for循环的语法结构如下：
语法
流程结构如图2.10所示，其中：
图2.10 循环结构——for循环语句
➢ 语句1在循环开始之前执行，对应图2.10中的“①初始化表达式”部分。
➢ 语句2为循环的条件，对应图2.10中的“②循环条件”部分。
➢ 语句3为代码块被执行后需要执行的内容，对应图2.10中的“④操作表达式”部分。
➢ 语句1、语句2、语句3之间用“；”分隔。
➢ {}中的执行语句，对应图2.10中的“③循环体”部分。
例如：
上述代码表示从变量i=0开始执行for循环，每次执行前判断变量i是否小于10，如果满足条件则执行for循环内部的代码块，然后令变量i自增1。直到变量i不再小于10则终止该循环语句。
通常情况下语句1都是用于声明循环所需使用的变量初始值的，例如i=0。该语句也可以在for循环之前就声明完成，并在for循环条件中省略语句1的内容。例如：
上述代码的运行效果与前一段示例完全相同。
【示例4】 JavaScript for循环的简单应用
示例4在浏览器中的运行效果如图2.11所示。
图2.11 示例4运行效果
2.4.2 for-in循环
在JavaScript中，for-in循环可以用于遍历对象的所有属性和方法。其语法结构如下：
其中x是变量，每次循环将按照顺序获取对象中的一个属性或方法名；Object指的是被遍历的对象。例如：
其中变量x指的是people对象中的属性名称，而people[x]指的是对应的属性值。
【示例5】 JavaScript for-in循环的简单应用
示例5在浏览器中的运行效果如图2.12所示。
图2.12 示例5运行效果
2.4.3 while循环
while循环又称为前测试循环，必须先检测表达式的条件是否满足，如果符合条件才开始执行循环内部的代码块。其语法结构如下：
语法
例如：
上述代码表示将初始值为1的变量i进行自增，在没有超过10的情况下每次自增1。流程结构如图2.13所示。
图2.13 循环结构——while循环语句
【示例6】 JavaScript while循环的简单应用
示例6在浏览器中的运行效果如图2.14所示。
图2.14 示例6运行效果
2.4.4 do-while循环
do-while循环又称为后测试循环，不论是否符合条件都先执行一次循环内的代码块，然后再判断是否满足表达式的条件，如果符合条件则进入下一次循环，否则将终止循环。其语法结构如下：
语法
例如：
流程结构如图2.15所示。
图2.15 循环结构——do-while循环语句
【示例7】 JavaScript do-while循环的简单应用
示例7在浏览器中的运行效果如图2.16所示。
图2.16 示例7运行效果
2.4.5 break和continue
跳转语句用于实现程序执行过程中的流程跳转，常用的跳转语句有break和continue语句。
break语句可以用于终止全部循环，continue语句用于中断本次循环，但是会继续运行下一次循环语句。
【示例8】 JavaScript break的简单应用
示例8在浏览器中的运行效果如图2.17所示。
【示例9】 JavaScript continue的简单应用
示例9在浏览器中的运行效果如图2.18所示。
图2.17 示例8运行效果
图2.18 示例9运行效果
说明
break与continue的区别：break语句可应用在switch和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句，执行后面的代码。而continue语句用于结束本次循环的执行，开始下一轮循环的执行操作。
2.4.6 技能训练
上机练习5 九九乘法表
需求说明
➢ 使用JavaScript中的循环语句实现九九乘法内容显示，如图2.19所示。
代码实现思路
（1）找规律，假设最上面的一层作为第1层，表格的分布规律如下：
①九九乘法表的表格是由9行、每行最多9列的单元格组成的。
②乘法表的层数=表格的行数=每行中的列数。如乘法表的第3层，是表格的第3行，且共有3个单元格。
图2.19 九九乘法
（2）找规律，假设最上面的一层作为第1层，乘法运算的规律如下：
① 被乘数的取值范围在“1～每行中的列数”之间。如表格第3行中被乘数的值在1～3之间。
②乘数的值=表格的行数。如表格第3行中乘数的值就为3。
本章总结
➢ JavaScript的基本数据类型，包括undefined、null、string、number和boolean类型。
➢ JavaScript不同类型之间的转换方法，包括转换成字符串、数字和强制类型转换。
➢ 根据运算符的不同功能分别介绍了赋值运算符、算术运算符、逻辑运算符、关系运算符、相等性运算符以及条件运算符。
➢ 在JavaScript条件语句部分介绍了if和switch语句的用法。
➢ 在JavaScript循环语句部分介绍了for、for-in、while、do-while循环语句的用法。
本章作业
一、选择题
1．下面哪一个不是JavaScript运算符？（ ）
A. =
B. ==
C. &&
D. $#
2．下面哪一个表达式的返回值为true？（ ）
A. !(3<=1)
B. (1!=2)&&(2<0)
C. !(20>3)
D. (5!=3)&&(50<10)
3．下面关于运算符的说法错误的是（ ）。
A. 逗号运算符的优先级别最低
B. 同一表达式中&的级别高于&&
C. 表达式中赋值运算符总是最后执行的
D. 表达式中圆括号的优先级别最高
4．语句for(k=0;k=1;k++){}和语句for(k=0;k==1;k++){}的执行次数分别为（ ）。
A. 无限次和0
B. 0和无限次
C. 都是无限次
D. 都是0
5．下列选项中，与0相等（==）的是（ ）。
A. null
B. undefined
C. NaN
D. ''
6．表达式Number('12age')&&parseFloat('160height')的运行结果为（ ）。
A. 1920
B. 160
C. 12
D. NaN
7．下面关于逻辑运算符的说法错误的是（ ）。
A. 逻辑运算有时会出现短路的情况
B. ！a表示若a为false则结果为true，否则相反
C. 逻辑运算的返回值是布尔型
D. a||b表示a与b中只要有一个为true，则结果为true
8．下面关于赋值运算符的说法正确的是（ ）。
A. 运算符“=”在JavaScript中可表示相等
B. 赋值运算符都是从左向右进行运算的
C. 运算符“+=”表示相加并赋值
D. 运算符“-=”表示相减并赋值
9．下列选项中，与三元运算符的功能相同的是（ ）。
A. if语句
B. if else语句
C. if-else if-else语句
D. 以上答案皆正确
10．以下会出现死循环的是（ ）。（选择2项。）
A. for(;;){break;}
B. for(;;){continue;}
C. while(1){break;}
D. while(1){continue;}
二、综合题
1．请简述变量名定义时需要遵循的规则。
2．JavaScript的基本数据类型有哪些？
3．请分别说出下列内容中变量x的运算结果。
(1) var x=9+9;
(2) var x=9+"9";
(3) var x="9"+"9";
4．请分别说出下列数据类型转换的结果。
(1) parseInt("100plus101")
(2) parseInt("010")
(3) parseInt("3.99")
(4) parseFloat("3.14.15.926")
(5) parseFloat("A",16)
5．请分别说出下列布尔表达式的返回值。
(1) ("100">"99")&&("100">99)
(2) ("100"==100)&&("100"===100)
(3) (!0)&&(!100)
(4) ("hello">"javascript")||("hello">"HELLO")
6．转义字符\n的作用是什么？如何使用转义字符输出双引号？
7．while循环与do-while循环的区别是什么？
8．break和continue的区别是什么？
9．有红、白、黑三种球若干个，其中红、白球共25个，白、黑球共31个，红、黑球共28个，求这三种球各有多少个？
10．请编写代码生成指定行列的表格。