JavaScript中的for循环你用对了吗?

​🌈个人主页：前端青山
🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-for循环

目录

循环结构

循环思想（三要素）

实现循环的语句

当型循环

直到型循环

多功能循环

案例

输出10个HelloWorld

输出1~100的奇数

输出m~n的整数

i. 求5！(阶乘：从1 乘到它本身)

解决猴子吃桃的问题（有一只猴子，还有一堆桃子，第一天的时候，吃了一堆桃子中的一半，没忍住，又多吃了一个；第二天的时候，又吃了剩下桃子中的一半，没忍住，又多吃了一个，以后每天如此，直到第10天的时候，只剩下了一个桃子，问第一天的时候有多少个桃子）

求1+2+3+……+100的和

输出1-100中(7的倍数和带7的数除外）的数。

输出m至n的自然数中的偶数和与奇数和并统计偶数与奇数的个数分别是多少？

入职薪水10K，每年涨幅5%，50年后工资多少？

流程控制关键字

循环的区别

      while:

   do while:

    for

循环结构

循环结构 ： 满足一定条件，重复执行一个动作或一段代码。

循环思想（三要素）

1. 从哪里开始

2. 到哪里结束

3. 步长（步进）

实现循环的语句

1. while

2. do while

3. for

当型循环

循环初值;
while(循环条件){语句组;步长;
}

直到型循环

循环初值;
do{语句组;步长;
}while(循环条件);

多功能循环

for(循环初值;循环条件;步长){语句组;
}

案例

• 输出10个HelloWorld

<script>输出10个HelloWorld输出:  alert()  document.write()  console.log()10个：重复 循环  三要素：i = 1;  i < 11   i ++循环语法：whiledo whilefor//while//循环初值var i = 1;while(i < 11){console.log('HelloWorld');i ++;// i += 2;}//do whilevar j = 1;do{console.log('HelloWorld');j ++;}while(j < 11);//forfor(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(){}whilevar 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 = 12. 每天是怎么吃的？  第9天：  (sum + 1) * 2   43.                    8      (4 + 1) * 2   107  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 < nif(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 < nif(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 = 10i = 2     i < 51  i ++sum = sum + sum * 0.05   sum += sum * 0.05for(var sum = 10,i  = 2;i < 51;i ++){sum += sum * 0.05;}alert(sum);</script>

流程控制关键字

1. continue : 跳出本次循环，直接进入一下次循环。

2. 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;} }//上面的循环结束后，才能执行到下面的语句，那么 什么时候结束的？3console.log(i); //3</script>

循环的区别

      while:

•   1. 当型循环，先判断条件，后执行语句
•   2. 当条件第一次为假时，一次也不执行。
•   3. 常用于循环次数不确定时

   do while:

•   1. 直到型循环，先执行语句，后判断条件
•   2. 当 条件第一次为假时，至少执行一次循环
•   3. 常用于循环次数不确定时

    for

•   1. 多功能循环（当型循环），先判断条件，后执行语句
•   2. 当条件第一次为假时，一次也不执行
•   3. 常用于循环次数确定时