JavaScript中的for循环你用对了吗?-灵析社区
Ned循环结构
循环结构 ： 满足一定条件，重复执行一个动作或一段代码。
循环思想（三要素）
- 从哪里开始
- 到哪里结束
- 步长（步进）
实现循环的语句
- while
- do while
- for
当型循环
循环初值;
while(循环条件){
语句组;
步长;
}直到型循环
循环初值;
do{
语句组;
步长;
}while(循环条件);多功能循环
for(循环初值;循环条件;步长){
语句组;
}案例
- 输出10个HelloWorld
<script>
输出10个HelloWorld
输出: alert() document.write() console.log()
10个：重复 循环 三要素：i = 1; i < 11 i ++
循环语法：
while
do while
for
//while
//循环初值
var i = 1;
while(i < 11){
console.log('HelloWorld');
i ++;
// i += 2;
}
//do while
var j = 1;
do{
console.log('HelloWorld');
j ++;
}while(j < 11);
//for
for(var k = 1;k < 11;k ++){
console.log('HelloWorld');
}
</script>- 输出1~100的奇数
<script>
输出1~100的奇数
输出: alert() document.write() console.log()
1~100 : 重复 循环 三要素： i = 1 i < 101 i ++ (i += 2)
奇数: 不能被2整除 一个条件 一个结果 单分支 if(){}
while
var i = 1;
//准备一个变量，存放结果
var str = '';
while(i < 101){
if(i % 2){
// document.write(i + ' '); //满足一次条件，就和页面交互一次
//优化后的语句
str += i + ' '; //'' + 1 str = '1' + 3
}
i ++;
}
将str 一次性添加到页面中
document.write(str);
console.log(str);
alert(str);
var i = 1,str = '';
do{
str += i + ' ';
i += 2;
}while(i < 101);
document.write(str);
var i = 1,str = '';
do{
if(i % 2){
str += i + ' ';
}
i ++;
}while(i < 101);
document.write(str);
document.write('<br>');
for(var i = 1,str = '';i < 101;i += 2){
str += i + ',';
}
document.write(str);
</script>- 输出m~n的整数
<script>
输出m~n的整数
输出
m~n prompt() parseInt()
if(m < n){
如果m = 1,n = 5 重复-循环-三要素 i = m; i <= n;i ++
}else{
如果m = 5,n = 1 重复-循环-三要素 i = m; i >= n;i --
}
//1. 准备两个变量
var m = parseInt(prompt('请输入一个整数：'));
var n = parseInt(prompt('请输入一个整数：'));
//2. 判断谁大谁小
if(m < n){
for(var i = m,str = '';i <= n;i ++){
str += i + ' ';
}
//输出结果
document.write(str);
}else{
for(var i = m,str = '';i >= n;i --){
str += i + ' ';
}
//输出结果
document.write(str);
}
</script>- i. 求5！(阶乘：从1 乘到它本身)
<script>
求5！(阶乘：从1 乘到它本身) 1 * 2 * 3 * 4 * 5
1. 重复乘法的操作，所以使用循环 三要素 ： i = 1 i < 6 i ++
for(var i = 1,fac = 1;i < 6;i ++){
fac *= i; //fac = 1 * 1 * 2 * 3 * 4 * 5
}
alert(fac);
</script>- 解决猴子吃桃的问题（有一只猴子，还有一堆桃子，第一天的时候，吃了一堆桃子中的一半，没忍住，又多吃了一个；第二天的时候，又吃了剩下桃子中的一半，没忍住，又多吃了一个，以后每天如此，直到第10天的时候，只剩下了一个桃子，问第一天的时候有多少个桃子）
<script>
解决猴子吃桃的问题（有一只猴子，还有一堆桃子，第一天的时候，吃了一堆桃子中的一半，没忍住，又多吃了一个；第二天的时候，又吃了剩下桃子中的一半，没忍住，又多吃了一个，以后每天如此，直到第10天的时候，只剩下了一个桃子，问第一天的时候有多少个桃子）
1. 第10天： 1 sum = 1
2. 每天是怎么吃的？ 第9天： (sum + 1) * 2 4
3. 8 (4 + 1) * 2 10
7 6 5 4 3 2 1 天
重复天数， 循环 i = 9 i > 0 i --
for(var day = 9,sum = 1;day > 0;day --){
sum = (sum + 1) * 2
}
alert(sum);
</script>- 求1+2+3+……+100的和
<script>
求1+2+3+……+100的和
重复 + 循环 三要素 i = 1 i < 101 i ++
for(var i = 1,sum = 0;i < 5;i ++){
sum += i;
}
alert(sum);
</script>- 输出1-100中(7的倍数和带7的数除外）的数。
<script>
输出1-100中(7的倍数和带7的数除外）的数。
1-100 : 循环 i = 1; i < 101 i ++
7的倍数和带7的数除外:
!(i % 7 === 0 || parseInt(i / 10) === 7 || i % 10 === 7)
i % 7 && parseInt(i / 10) !== 7 && i % 10 !== 7
//result : 结果
for(var i = 1,result = '';i < 101;i ++){
if(!(i % 7 === 0 || parseInt(i / 10) === 7 || i % 10 === 7)){
result += i + ' ';
}
}
document.write(result);
</script>- 输出m至n的自然数中的偶数和与奇数和并统计偶数与奇数的个数分别是多少？
<script>
输出m至n的自然数中的偶数和与奇数和并统计偶数与奇数的个数分别是多少？
1. m 至 n 用户输入两个数
2. 确保 m < n
if(m > n){
交换两个值
}
3. 实现循环
三要素： i = m; i <= n; i ++
4. 是否能被2整除 奇数 偶数 双分支
偶数和
奇数和
偶数的数量
奇数的数量
//1. 准备两个变量
var m = parseInt(prompt('请输入一个整数：'));
var n = parseInt(prompt('请输入一个整数：'));
//1.1 准备放置结果的变量
// even : 偶数
// sum : 和
// odd : 奇数
//count: 统计
var even_sum = 0;
var odd_sum = 0;
var even_count = 0;
var odd_count = 0;
//2. 确保m < n
if(m > n){
var t = m;
m = n;
n = t;
}
//3. 实现循环
for(var i = m;i <= n;i ++){
//4. 判断奇偶
if(i % 2){
//true : 奇数
odd_sum += i;
odd_count ++;
}else{
//false : 偶数
even_sum += i;
even_count ++;
}
}
//5. 输出结果
console.log('偶数和：' + even_sum + '\n奇数和：' + odd_sum + '\n偶数数量：' + even_count + '\n奇数数量：' + odd_count);
</script>- 入职薪水10K，每年涨幅5%，50年后工资多少？
<script>
入职薪水10K，每年涨幅5%，50年后工资多少？
初值： sum = 10
i = 2 i < 51 i ++
sum = sum + sum * 0.05 sum += sum * 0.05
for(var sum = 10,i = 2;i < 51;i ++){
sum += sum * 0.05;
}
alert(sum);
</script>流程控制关键字
- continue : 跳出本次循环，直接进入一下次循环。
- break : 跳出循环。
<script>
for(var i = 1;i < 6;i ++){
// if(i == 2 || i == 4){
// continue; //当i = 2 或 i = 4 的时候，直接跑到下一次循环
// }
if(i !== 2 && i !== 4){
//console.log() : 每输出一次，自动换一行
console.log(i); // 1 3 5
}
}
//break : 退出循环
for(var i = 1;i < 6;i ++){
if(i === 3){
break;
}
}
//上面的循环结束后，才能执行到下面的语句，那么 什么时候结束的？3
console.log(i); //3
</script>循环的区别
while:
- 1. 当型循环，先判断条件，后执行语句
- 2. 当条件第一次为假时，一次也不执行。
- 3. 常用于循环次数不确定时
do while:
- 1. 直到型循环，先执行语句，后判断条件
- 2. 当 条件第一次为假时，至少执行一次循环
- 3. 常用于循环次数不确定时
for
- 1. 多功能循环（当型循环），先判断条件，后执行语句
- 2. 当条件第一次为假时，一次也不执行
- 3. 常用于循环次数确定时
阅读量：560
点赞量：0
收藏量:0