1. 面试题
1.1 for循环执行的顺序
1.2 break和continue的作用
1.3 分别说明每种循环的特点
2. 上次内容回顾
上一章学习了js中的分支结构：while和do-while循环
3.本章内容
本章主要讲解js中的for循环
4. 具体内容
4.1 for 循环
循环可以将代码块执行指定的次数
for循环的语法： for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
执行顺序解析：
- 语句 1:初值表达式 定义一个变量并赋初始值 let i=0，在循环（代码块）开始前执
- 语句 2: 条件表达式 对初值进行条件判断i<10,定义运行循环（代码块）的条件
- 语句 3 步长表达式 每次循环执行完 初值的自增或自减 i–在循环（代码块）已被执行之后执行
即：for(<初始化循环变量> ; <循环条件> ; <修改循环变量的值>) { <循环体语句>; } 表达式1省略，循环变量的初始值在for语句之前由赋值语句取得也可以，但是两个“；”不能省略
for循环的执行流程:
案例 3.1.1:
<script>
for (let i=0; i<5; i++){
document.write("你好 哈哈哈"+i+"<br>");
}
</script>
与以下效果相同
<script>
let i=0;
for (; i<5; ){
document.write("你好 哈哈哈"+i+"<br>");
i++;
}
//注意for后面小括号中的两个“；”不允许省略
</script>
如果将上述代码修改成i=5,观察结果执行几次，
<script>
for (let i=5; i<5; i++){
document.write("你好 哈哈哈"+i+"<br>");
}
</script>
我们可以观察到一次都没执行，因为for循环是先判断，再执行 如果再修改：将i++i或者i<5去掉，发现浏览器崩溃了，因为i的值始终不变，造成死循环了
<script>
for (let i=5; i<5; ){
document.write("你好 哈哈哈"+i+"<br>")
}
/*for (let i=5; ; i++){
document.write("你好 哈哈哈"+i+"<br>");
}*/
</script>
案例：实现如图所示效果
分析： 按照上述语法结构
1、表达式1：循环初始化：i = 0；j = 6 2、表达式2：循环条件：i<=6 3、循环操作：计算i+j 4、表达式3：循环变 量的改变：i++，j-
代码：
<script>
for(let i = 0,j = 6;i<=6;i++,j-- ){
document.write(i+"+"+j+"="+(i+j)+"<br>");
}
</script>
案例3.1.2：请输出100次 我愿意
<script>
for (let i=0; i<100; i++){
document.write("我愿意"+i+"<br>");
}
</script>
案例3.1.3：请输出0-99之间的偶数
<script>
for (let i=0; i<100; i++){
//对2求余数为0就是偶数
if(i%2==0){
document.write(i+"<br>");
}
}
</script>
案例3.1.4：请帮助高斯解决一个问题 0-100之间所有数的和为多少？
分析：实现1-100的累加，根本原理就是0+1的结果加2，所得结果加3，依次加到99.
<script>
let sum=0;
sum+=1;
sum+=2;
sum+=3;
...
sum+=100;
/*我们不难发现之间存在着某种规律，可以加sum+=i通过for循环
* 执行100次 */
</script>
通过for循环实现:
<script>
let sum=0;
for(let i=0;i<=100;i++){
sum+=i;
}
document.write(sum);
</script>
结果：5050
温馨提示：我们可能在解决问题的时候 一开始不知道如何使用for循环处理，此时，可以先将功能实现，再去观察是 否可以有优化的地方 ，此时容易完成。
案例3.1.5：输入五次学生成绩 求平均值
<script>
let sum=0;
sum+= Number(prompt("请输入 第 1 次 成绩"));
sum+= Number(prompt("请输入 第 2 次 成绩"));
sum+= Number(prompt("请输入 第 3 次 成绩"));
sum+= Number(prompt("请输入 第 4 次 成绩"));
sum+= Number(prompt("请输入 第 5次 成绩"));
document.write(""+sum/5);
</script>
我们不难发现 获取成绩并累加的操作 出现了 重复代码。
重复代码可以通过for 循环执行
<script>
let sum=0;
let score=0;
for (let i=1;i<6;i++) {
score=prompt("请输入 第"+i+"次 成绩");
//将输入的字符串转为数字再累加
sum+=Number(score);
}
document.write(""+sum/5);
</script>
思考：在上面案例基础上求最大值，最小值
<script>
let sum=0;//总和
let score=0;
let max;//最大值
let min;//最小值
for (let i=1;i<6;i++) {
score=prompt("请输入 第"+i+"次 成绩");
//将输入的字符串转为数字再累加
sum+=Number(score);
if(i==1){//将第一次的分数作为最大值，最小值的初始值
min=max=score;
}
//每次都让最小值赋值给min
if(min>score){
min=score;
}
//每次都让最大值赋值给min
if(max<score){
max=score;
}
}
document.write("平均值："+sum/5+"最小值："+min+"最大值："+max);
</script>
for循环嵌套
//打印三行五列
for(let i=0;i<3;i++){
for(let j=0;j<5;j++){
document.write(i+"--"+j+" ");
}
document.write("<br />");
}
案例3.1.6：打印九九乘法表
<script>
//控制行数
for(let i=1;i<=9;i++){
//控制列数
for(let j=1;j<=i;j++){
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<br>");
}
</script>
案例3.1.7：羽毛球拍15元，球3元，水2元。200元每种至少一个，有多少可能。羽毛球拍最多买13个 球最多买66个 水最多买100个
<script type="text/javascript">
//可能结果数量
let n = 0;
//羽毛球拍最多买13个
for(i=1;i<=13;i++){
//球最多买66个
for(x=1;x<=66;x++){
//水最多买100个
for(y=1;y<=100;y++){
//总钱数
let money=i*15+x*3+y*2;
if(money==200){
document.write("球拍"+i+"球"+x+"水"+y+"<br>");
n++;
}
}
}
}
document.write("总共有"+n+"中结果");;
</script>
结果：
案例3.1.8：括号里面只能放加或减，如果要使等式成立，括号里面应该放什么运算符 12（）34（）56（）78（）9 = 59；
分析：括号里面只能放加减，此时如果括号里面放+看成乘以1，如果放-看成乘以-1，以此让1到-1两个数字循环
<script>
//第1个符号
for (a=-1;a<2;a=a+2) {
//第2个符号
for (b=-1;b<2;b=b+2) {
//第3个符号
for (c=-1;c<2;c=c+2) {
//第4个符号
for (d=-1;d<2;d=d+2) {
//判断结果等于59满足条件
if (12+a*34+b*56+c*78+d*9==59) {
alert(a+","+b+","+c+","+d);
}
}
}
}
}
</script>
所以结果是+，-，+，
4.2 for in循环
案例 4.2.1 ：对象属性的遍历
<script type="text/javascript">
var obj = {
w: "wen",
j: "jian",
b: "bao"
}
for(var v in obj){
document.write("property:"+v+":"+obj[v]+"<br>");
}
</script>
结果分析：v取对象的属性名，通过属性名可以取属性值
4.2.2 程序调试
设置断点-----单步调试-----观察变量
4.3 break 关键字
break 语句用于跳出循环。
案例4.3.1:
<script type="text/javascript">
for (i=0;i<10;i++){
if (i==3){
break;
}
document.write(i+"<br />");
}
</script>
案例4.3.2：循环录入五次学生成绩并求平均值 如果成绩为负 则停止录入并提示 录入错误
<script>
let sum=0;//总和
let score=0;
for (let i=1;i<6;i++) {
score=prompt("请输入 第"+i+"次 成绩");
if(score<0){
document.write("成绩不能为负");
break;//分数小于0结束循环
}
//将输入的字符串转为数字再累加
sum+=Number(score);
if(i==5){
document.write("平均值："+sum/5);
}
}
</script>
案例4.3.3：折纸：折多少次和珠穆朗玛峰一样高，一张纸的厚度是0.0001米，将纸对折，对折多少次厚度超过珠峰 高度8848米
<script type="text/javascript">
//纸的厚度
let depth = 0.0001;
//无循环条件
for(i=1;;i++){
//折一次厚度是原来2倍
depth=depth*2;
//循环到珠峰的高度结束循环
if(depth>8848){
alert(i);
break;
}
}
</script>
for循环标签的用法，请看案例
案例4.3.4：要求打印九九乘法表时只打印到第四行。
<script>
//控制行数
for(let i=1;i<=9;i++){
//控制列数
for(let j=1;j<=i;j++){
//遇到i=5第五行时中断循环
if(i==5){
break ;
}
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<br>");
}
</script>
从结果可以看出，break只能中端内层循环，不能终止外层循环，所以我们有两种解决方案，第一种：
将中断操作放在外层，中断外层循环：
<script>
//控制行数
for(let i=1;i<=9;i++){
if(i==5){
break ;
}
//控制列数
for(let j=1;j<=i;j++){
//遇到i=5第五行时中断循环
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<br>");
}
</script>
第二种方案使用标签:
<script>
//控制行数，设置外层循环标签名，标签名称随意
waiceng:for(let i=1;i<=9;i++){
//控制列数
for(let j=1;j<=i;j++){
if(i==5){
//按照标签名中断循环
break waiceng;
}
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<br>");
}
</script>
4.4、 continue
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
案例4.4.1：