共计 5556 个字符，预计需要花费 14 分钟才能阅读完成。
js 中的循环语句
- for 循环
- while 循环
- do while 循环
何为循环？
在程序中，重复被执行的语句叫做循环体，循环体是否能被反复执行，却决于循环的终止条件。由循环体及循环的终止条件等组成的语句叫做循环语句。
循环的目标
能够反复执行某些代码
for 循环
目标：能够反复执行某些代码，通常跟计数无关.
语法
for(初始化变量；条件表达式；操作表达式) {// 循环体}
- 初始化变量：通常被用来计数，应用 var 来申明变量
- 条件表达式：取决于循环体的终止条件
- 操作表达式：用来更新初始化变量
for 循环的执行过程
<script>
for (var i = 1; i <= 100; i++) {
// 在控制台打印 100 遍的 "hello 尧子陌"
console.log("hello 尧子陌")
}
</script>
执行原理
var i = 1 最终能被执行一次，初始化变量执行结束后，执行 i <=100, 满足则进入循环体执行循环里的语句，不满足则跳出循环体，若满足条件执行循环体的代码之后，再执行操作表达式，满足执行循环体代码，不满足跳出循环。for 循环的非凡用途
断点调试
断点调试：在程序的某一行设置断点，以便于察看程序是怎么的运行过程。
步骤:
- 按 f12 键进入 sources(本源)，在须要设置断点的以后行设置断点操作，刷新浏览器
- 按 F11 进行下一步操作
通过 watch 能够更好的察看变量的值的变动
通过变量来管制循环的次数
在 js 中，能够通过 prompt 输出的值保留成变量来管制循环的次数
<script>
/*
*1. 弹出一个输入框，用户输出值，把这个数值保留成变量
2. 通过变量名来管制循环的次数
*/
var userName = parseInt(prompt("请输出任意正整数"));
for (var i = 1; i <= userName; i++) {console.log('Hello')
}
</script>
通过 for 循环可执行不同的代码
输出一个人的 1 岁~100 岁，并提醒出世及死亡。
<script>
for (var i = 1; i <= 100; i++) {if (i == 1) {console.log('往年一岁了，你出世了')
} else if (i == 100) {console.log('往年 100 岁了，你曾经死亡了')
} else {console.log('往年' + i + '岁了')
}
}
</script>
for 循环能够执行某些雷同的操作
例如：求 1~100 累加的和
<script>
// 求 1~100 之间累加的和
var sum = 0;
for (var i = 1; i <= 100; i++) {sum += i;}
console.log('sum 最终的值', sum); //5050
</script>
思路如下
- 要循环 100 次，须要一个计数器 i
- 须要一个存储后果的值为 sum
- 公式 sum= sum+i
案例
求 1~100 之间的平均数
<script>
// 须要申明一个求和的变量及求平均数的变量
var sum = 0,
average = 0
for (var i = 0; i <= 100; i++) {sum += i;}
// 平均值为
var average = sum / 100;
console.log('1~100 之间的平均数:' + average) //50.5
</script>
</head>
求 1~100 之间所有偶数和奇数的和
思路如下
如何判断一个数为偶数呢？
答案：能被 2 整除且余数为 0，则代表为偶数，反之则为奇数
<script>
// 须要申明一个偶数及奇数的变量
var even = 0,
odd = 0;
for (var i = 0; i <= 100; i++) {if (i % 2 == 0) {even += i;} else {odd += i;}
}
console.log('1~100 之间所有偶数的和:', even)
console.log('1~100 之间所有奇数的和:', odd)
</script>
求 1~100 之间能被 3 整除的和
<script>
// 须要申明一个变量来保留能被 3 整出的和的后果
var result = 0;
for (var i = 1; i <= 100; i++) {if (i % 3 == 0) {result += i}
}
console.log('1~100 之间能被 3 整除的和:', result)
</script>
</head>
学生案例
弹出输入框，输出班级总人数，求出总成绩及均匀问题 sum
剖析
1. 弹出输入框，用户输出班级的总人数 (userName)
2. 顺次输出学生的问题（保存起来为 sorce）,，须要用到 for 循环，弹出的输入框的次数跟班级总人数无关. 条件表达式 i <=userName
3. 程序外部解决，计算总成绩 (sum)，之后再计算平均值 (average)
<script>
// 要求：计算学生的总成绩及平均数
var userName = Number(prompt("输出班级的总人数"));
var sum = 0;
var average = 0;、for (var i = 1; i <= userName; i++) {var sorce = Number(prompt('请输出第' + i + "个学生问题"));
sum += sorce;
}
// 学生的总成绩
console.log("班级的总成绩", sum);
// 学生的均匀问题
var average = sum / userName;
console.log('班级的均匀问题：', average)
</script>
打印 N 行的星星案例
注意事项
- 通过 prompt 输出的值可管制打印星星的个数
- 采纳字符串追加的形式，在控制台打印星星。
<script>
var userName = prompt('请输出星星的个数');
var str = "" // 申明一个变量来存储空字符串
for (var i = 1; i <= userName; i++) {str += "★";};
console.log(str)
</script>
双重 for 循环
在 for 循环的根底上嵌套一个 for 循环，称为双重 for 循环
语法
for(外循环初始化变量；外循环条件表达式；外循环操作表达式) {for( 内循环初始化变量；内循环条件表达式，内循环操作表达式) {// 执行的语句}
}
注意事项
- 内循环能够看作外循环执行的语句
- 外循环执行一次，内循环执行全副
<script>
// 外层循环
for (var i = 1; i <= 3; i++) {console.log('外层循环执行的:' + i + '次')
for (var j = 1; j <= 3; j++) {console.log('内层循环执行的:' + j + '次')
}
}
</script>
打印 5 行 5 列的星星
<script>
var str = "";
for (var i = 1; i <= 5; i++) {for (var j = 1; j <= 5; j++) {str += "★"}
str += "\n"
}
console.log(str)
</script>
输出 N 行 N 列的♥
<script>
// 用户输出的行数
var rows = prompt("请输出行数");
// 用户输出的个数
var cols = prompt('请输出个数');
// 申明一个空字符串
var str = '';
// 进行 for 循环
for (var i = 1; i <= rows; i++) {for (var j = 1; j < cols; j++) {str = str + "♥"}
str = str + '\n'
}
console.log(str)
</script>
打印倒三角形
外围算法 j = i; j <= 10; j++
<script>
var str = ''
for (var i = 1; i <= 10; i++) {for (var j = i; j <= 10; j++) {str = str + "★"}
str = str + "\n"
}
console.log(str)
</script>
打印正三角形
外围思路：j = 1; j <= i; j++
<script>
var str = ''
for (var i = 1; i <= 10; i++) {for (var j = 1; j <= i; j++) {str = str + "★"}
str = str + "\n"
}
console.log(str)
</script>
打印九九乘法表
<script>
var str = ""
for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {str = str + j + "*" + i + "=" + i * j + "\t"}
str = str + "\n"
}
console.log(str)
</script>
for 循环总结
- for 循环能够反复某些代码的操作
- for 循环能够反复执行某些不同的代码的操作，因为有计数器
- for 循环能够反复执行某些操作，比方算数运算符加法操作
- 双重 for 循环，外循环执行一次，内循环全副执行
while 循环
语法
while(条件表达式) {
// 循环体代码
操作表达式
}
留神
- 当 while 的参数的条件表达式为 true 的时侯，则执行循环体代码。当条件为 false 的时候, 则退出循环体。- 当执行完循环体代码之后，操作表达式会自增或自减操作。会持续判断条件表达式是否为虚实，若为真，则继续执行循环体的代码，若为 false，则退出循环体，反复执行
- while 能够做更简单的条件判断。案例
控制台打印 100 遍 hello word
<script>
var i = 1;
while (i <= 100) {console.log('hello word');
i++
}
</script>
打印人的毕生 从 1 岁到 100 岁 并提醒出世 死亡的信息。
<script>
var i = 1;
while (i <= 100) {if (i == 1) {console.log('祝贺你，你出世了')
} else if (i == 100) {console.log('祝贺你，你死亡了')
} else {console.log('你往年' + i + '岁')
}
i++
}
</script>
计算 1~100 之间所有整数的和
<script>
// 求和的变量
var sum = 0;
var i = 1;
while (i <= 100) {
sum = sum + i;
i++
}
console.log(sum)
</script>
‘ 你爱我吗 ’ 之循环案例
要求：弹出输入框，显示 '你爱我吗'。用户输出我爱你，则提醒询问，否则会始终询问上来。
<script>
var message = prompt('你爱我吗');
while (message !== '我爱你') {message = prompt('你爱我吗')
};
alert('我也爱你 小颖')
</script>
do while 循环
- do while 循环能够看作 while 循环的变体，do while 循环的代码至多会执行一次，再进行自增或自减操作去判断条件表达式是否为真，若为 true, 则执行循环体，若为 false，则退出循环体
复制代码 语法
var i =1;
do {
// 循环体语句
操作表达式
}while(条件表达式)
复制代码 do while 案例
打印人的一声，从 1 岁到 100 岁，并提醒出世 死亡的信息.
<script>
var i = 1;
do {if (i == 1) {console.log('祝贺你，你出世了')
} else if (i == 100) {console.log('很遗憾，你曾经死亡了')
} else {console.log('你曾经' + i + '岁')
}
i++
} while (i <= 100);
</script>
打印 1~100 所有整数的和
<script>
// 申明一个求和的变量
var sum = 0,
i = 1;
do {
sum = sum + i;
i++
} while (i <= 100);
console.log(sum)
</script>
“ 你爱我吗 ” 之循环案例
要求：弹出输入框，显示 ’ 你爱我吗 ’。用户输出我爱你，则提醒询问，否则会始终询问上来。
<script>
do {var message = prompt('你爱我吗')
} while (message !== '我爱你')
alert("我也爱你")
</script>
循环的总结
- JS 中的循环：for 循环 while 循环 di while 循环
- 在非凡状况下，三者能够互相替换
- do while 是 while 的变体，和 while 的区别是执行程序不一样，while 循环先判断后执行，do while 循环至多执行一次
- 重点放在 for 循环
continue break 的区别
continue
continue: 跳出本次循环 继续执行下次循环
求 1~100 能被 7 整除的和
如何判断能被 7 整除，余数等于 0 即可
<script>
var sum = 0;
for (var i = 0; i <= 100; i++) {if (i % 7== 0) {continue}
sum = sum + i;
}
console.log(sum)
</script>
break
立即跳出整个循环，不再执行前面的语句
i 等于 3 的时候，跳出整个循环
<script>
for (var i = 1; i <= 10; i++) {if (i == 3) {break}
console.log(i)
}
</script>
繁难 ATM 机
要求
在这个案例中，我应用的是最简略的 switch 语句
<script>
// 繁难 ATM 机
var corpus = 100; // 本金
var userName = Number(prompt('请输出你要的操作 \n1. 存钱 \n2. 取钱 \n3. 显示余额 \n4. 退出'))
switch (userName) {
case 1:
var depvar = Number(prompt("请问须要存多少钱？"));
corpus = corpus + depvar;
alert('余额为' + corpus)
break;
case 2:
var taken = Number(prompt("请问须要取多少钱？"));
if (taken > corpus) {alert('余额有余')
} else if (taken < corpus) {
corpus = corpus - taken;
alert('余额为' + corpus)
}
break;
case 3:
alert(corpus);
break
case 4:
if (userName == 4) {alert('退出胜利')
}
break
default:
alert("输出谬误");
break;
}
</script>
正文完