2.4 JavaScript循环语句

在JavaScript中有四种类型的循环语句。

➢ for：在指定的次数中循环执行代码块。

➢ for-in：循环遍历对象的属性。

➢ while：当条件为true时循环执行代码块。

➢ do-while：与while循环类似，只是先执行代码块再检测条件是否为true。

2.4.1 for循环

for循环的语法结构如下：

语法

流程结构如图2.10所示，其中：

➢ 语句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.4.2 for-in循环

在JavaScript中，for-in循环可以用于遍历对象的所有属性和方法。其语法结构如下：

其中x是变量，每次循环将按照顺序获取对象中的一个属性或方法名；Object指的是被遍历的对象。例如：

其中变量x指的是people对象中的属性名称，而people[x]指的是对应的属性值。

【示例5】 JavaScript for-in循环的简单应用

示例5在浏览器中的运行效果如图2.12所示。

2.4.3 while循环

while循环又称为前测试循环，必须先检测表达式的条件是否满足，如果符合条件才开始执行循环内部的代码块。其语法结构如下：

语法

例如：

上述代码表示将初始值为1的变量i进行自增，在没有超过10的情况下每次自增1。流程结构如图2.13所示。

【示例6】 JavaScript while循环的简单应用

示例6在浏览器中的运行效果如图2.14所示。

2.4.4 do-while循环

do-while循环又称为后测试循环，不论是否符合条件都先执行一次循环内的代码块，然后再判断是否满足表达式的条件，如果符合条件则进入下一次循环，否则将终止循环。其语法结构如下：

语法

例如：

流程结构如图2.15所示。

【示例7】 JavaScript do-while循环的简单应用

示例7在浏览器中的运行效果如图2.16所示。

2.4.5 break和continue

跳转语句用于实现程序执行过程中的流程跳转，常用的跳转语句有break和continue语句。

break语句可以用于终止全部循环，continue语句用于中断本次循环，但是会继续运行下一次循环语句。

【示例8】 JavaScript break的简单应用

示例8在浏览器中的运行效果如图2.17所示。

【示例9】 JavaScript continue的简单应用

示例9在浏览器中的运行效果如图2.18所示。

说明

break与continue的区别：break语句可应用在switch和循环语句中，其作用是终止当前语句的执行，跳出switch选择结构或循环语句，执行后面的代码。而continue语句用于结束本次循环的执行，开始下一轮循环的执行操作。

2.4.6 技能训练

上机练习5 九九乘法表

需求说明

➢ 使用JavaScript中的循环语句实现九九乘法内容显示，如图2.19所示。

代码实现思路

（1）找规律，假设最上面的一层作为第1层，表格的分布规律如下：

①九九乘法表的表格是由9行、每行最多9列的单元格组成的。

②乘法表的层数=表格的行数=每行中的列数。如乘法表的第3层，是表格的第3行，且共有3个单元格。

（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．请编写代码生成指定行列的表格。