1.循环

（1）循环目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

（2）JS 中的循环

在Js 中，主要有三种类型的循环语句：

• for 循环

• while 循环

• do…while 循环

2.for循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

（1）语法结构

for(初始化变量; 条件表达式; 操作表达式 ){//循环体
}

• 初始化变量 就是用var 声明一个普通变量，通常用于作为计数器使用
• 条件表达式 就是用来决定每一次循环是否执行 就是终止的条件
• 操作表达式 是每次循环最后执行的代码，经常用于我们计数器变量进行更新（递增或者递减）

for (var i = 1; i <= 100; i++) {console.log('你好！');
}

执行过程

• 首先执行里面的计数器变量 var i= 1 但是这句话在for里面只执行一次
• 去 i <= 100 来判断是否满足条件，如果满足条件 就去执行 循环体 不满足条件 则退出循环
• 最后去执行i++ i++是单独写的代码 递增 第一轮结束
• 接着去执行i<= 100 如果满足条件 就去执行循环体 不满足条件 退出循环 第二轮

断点调试：

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

断点调试可以帮我们观察程序的运行过程

浏览器中按 F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。

F11: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，

知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。

（2） for 循环重复相同的代码

for (var i =1; i <= 10; i++) {console.log('浩瀚宇宙');
}// 可以让用户控制输出次数
var num = prompt('请输入数字：');
for (var i = 1; i <= num; i++) {console.log('无尽虚空');
}

（3） for 循环重复不相同的代码

求输出一个人1到100岁

     for (var i = 1; i <= 100 ; i++) {console.log('这个人今年'+i+'岁了');}

     // for 里面是可以添加其他语句的for (var i = 1; i <= 100; i++) {if(i == 1) {console.log('今年你1岁了，你出生了');} else if(i ==100) {console.log('今年你100岁了，O了，穿越去了异界！');} else {console.log('今年你' + i + '岁了');}}

（4） for 循环重复某些相同操作

for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算

案例： 求1-100之间所有整数的累加和

 <script>// ① 需要循环100次，我们需要一个计数器 i // ② 我们需要一个存储结果的变量 sum ，但是初始值一定是 0 // ③ 核心算法：1 + 2 + 3 + 4 .... ，sum = sum + i;var num = 0;//求和的变量for (var i = 1; i <= 100; i++) {num = num + i;}console.log(num);</script>

求1-100之间所有数的平均值

求1-100之间所有偶数和 奇数的和

求1-100之间所有能被3整除的数字的和

 <script>// 1.求1-100之间所有数的平均值var sum = 0;//和变量var average = 0;//积变量for(var i = 1; i <= 100;i++ ) {sum = sum + i;}average = sum / 100;console.log(average);// 2.求1-100之间所有 偶数和 奇数和var even = 0;var odd = 0;for(var i = 1; i <= 100; i++) {if (i % 2 == 0) {even = even + i;} else {odd = odd + i;}}console.log('1-100之间所有偶数和' + even);console.log('1-100之间所有奇数和' + odd);var even1 = 0;var odd1 = 0;for(var i = 1; i <= 100; i++) {i % 2 ==0 ? even1 += i :odd1 += i;}console.log('1-100之间所有偶数和' + even1);console.log('1-100之间所有奇数和' + odd1);// 3.求1-100之间所有能被3整除的数字的和var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 ==0) {result += i;}}console.log('1-100之间所有能被3整除的数字的和为：' + result);</script>

案例： 求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。

 <script>// ① 弹出输入框输入总的班级人数 ( num )// ② 依次输入学生的成绩（保存起来 score），此时我们需要用到 for 循环，弹出的次数跟班级总人数有关系 条件表达式 i <= num// ③ 进行业务处理: 计算成绩。 先求总成绩（sum），之后求平均（average） // ④ 弹出结果var num = prompt('请输入班级的总人数');var sum = 0;//求和的变量var average = 0;//求平均数的变量for(var i = 1; i <= num; i++) {var score = prompt('请输入第'+i+'个学生的成绩');// 因为从prompt取过来的数据是 字符串型的 需要转换为数字型sum = sum + parseInt(score);}average = sum / num;alert('班级的总成绩是' + sum);alert('班级的总平均分是' + average);</script>

一行打印五个星星

     <script>console.log('★★★★★');for (var i = 1; i <= 10; i++) {console.log('★');}var str = '';for (var i = 1; i <= 10; i++) {str = str + '★';}console.log(str);var num = prompt('请输入打印星星的数量');var str1 = '';for (var i = 1; i <= num; i++) {str1 = str1 + '★';}console.log(str1);</script>

3.双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

（1）双重 for 循环语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {for (内循环的初始; 内循环的条件; 内循环的操作表达式) { 需执行的代码;}
}

• 我们把里面的循环看做是外层循环的语句
• 内层循环执行的顺序也要遵循 for 循环的执行顺序
• 外层循环循环一次，里面的循环执行全部

for (var i = 1; i <= 3; i++) {console.log('    这是外层循环第'+i+'次');for (var j = 1; j <= 3; j++) {console.log('这是外层循环第'+j+'次');}
}

（2）打印五行五列星星

var str = '';
// 2. 外层循环负责打印五行
for (var i = 1; i <= 5; i++) {// 1. 内层循环负责一行打印五个星星for (var j = 1; j <= 5; j++) {str = str + '★';}
// 每次满 5个星星 就 加一次换行str = str + '\n';
}
console.log(str);

案例： 打印 n 行 n 列的星星

要求用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。

var rows = prompt('请输入行数：');
var cols = prompt('请输入列数：');
var str = '';
for (var i = 1; i <= rows; i++) {for (var j = 1; j <= cols; j++) {str = str + '★';}str = str + '\n';
}
console.log(str);

案例 ：打印倒三角形

//① 一共有10行，但是每行的星星个数不一样，因此需要用到双重 for 循环
//② 外层的 for 控制行数 i ，循环10次可以打印10行 ③ 内层的 for 控制每行的星星个数 j
//④ 核心算法： 每一行星星的个数 j = i ; j <= 10; j++
//⑤ 每行打印完毕后，都需要重新换一行
// 打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) {for (var j = i; j <= 10; j++) {str = str + '★';}str += '\n';
}
console.log(str);

案例 ：打印正三角形

var str = '';
for (var i = 1; i <= 10; i++) {for (var j = 1; j <= i; j++) {str = str + '★';}str += '\n';
}
console.log(str);

//控制输入的行列数量 ，打印倒三角形
var rows = prompt('请输入行数');
var cols = prompt('请输入列数');
var str = '';
if (rows == cols) {for (var i = 1; i <= rows; i++) {for (var j = i; j <= cols; j++) {str = str + '★';}str += '\n';}console.log(str);
} else {alert('请再次输入，行数和列数必须相等！');
}

案例： 打印九九乘法表

黑马pink JavaScript笔记（7）-流程控制-循环相关推荐

1. JavaScript流程控制-循环（循环（for 循环，双重 for 循环，while 循环，do while 循环，continue break））

   目录 JavaScript流程控制-循环 循环 for 循环 执行过程: 断点调试: 案例一:求1-100之间所有整数的累加和 案例二:求1-100之间所有数的平均值 案例三:求1-100之间所有偶数 ...

2. web前端学习584-610（JavaScript流程控制-循环---for循环 while循环 do...while循环 continue break）

   文章目录 JavaScript流程控制-循环 1 循环 2 for 循环 案例1:求1-100之间所有的整数的累加和 案例2:求学生成绩 案例3:一行打印五个星星 3 双重for 循环 案例:打印五行 ...

3. 黑马 程序员——Java基础---流程控制

   黑马程序员--Java基础---流程控制 ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------ 一．概述 Java提供了两种基本的流程控制结构:分支结构 ...

4. c语言循环次数控制,3 C语言 流程控制 循环 跳转

   3 C语言 流程控制 循环 跳转 选择: if switch 循环   while,do while ,for ,嵌套 跳转 break goto continue 第3章流程控制 学习目标 u掌握选 ...

5. JavaScript基础第02天—运算符（操作符）—流程控制—循环—代码规范

   JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...

6. JavaScript入门(part7)--流程控制

   学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 流程控制 流程控制概念 顺序流程控制 分支流程控制 三元表达式 switch分支流程控制 for循环 双重f ...

7. 狂神说学习笔记 Java流程控制

   目录 Java流程控制 1.用户交互Scanner Scanner对象 next() nextLine(): 2.顺序结构 3.选择结构 4.循环结构 5.Break & Continue 6 ...

8. Oldboy_day01 Python的历史,变量\常量\数据类型\用户交互\流程控制\循环while

   ###学前动员###:老男孩IT培训的师资力量 讲师:邱彦涛: 项目经理:春生: 班主任:任安安; 银角大王:武sir: 金角大王:Alex: 肖锋:Python web 框架: 马老师:数据库+框架 ...

9. Javascript知识分享——流程控制

   目录 前言 一.流程控制 二.顺序流程控制 三.分支流程控制 1.if语句 2.if else 语句 3.三元表达式 4.if else if语句 5.switch语句 四.循环流程控制 1.for循 ...

最新文章

1. 一、cocos2dx之如何优化内存使用（高级篇）
2. canvas高度问题_Android的drawText的坐标问题
3. oracle 存储过程挂起,library cache pin与PROCEDURE的重建
4. http服务详解（1）——一次完整的http服务请求处理过程
5. BUAA OO 2019 第三单元作业总结
6. 百度商桥放在php网站哪里_网站优化的几个重要技巧，你知道吗？
7. python怎么引入thrift文件_python使用thrift教程的方法示例
8. linux内核中task_struct与thread_info及stack三者的关系
9. kali安装loic
10. 用友T3如何反结账,反记账
11. 在web服务器上运行html文件，再调用cgi打开txt文件
12. redux的原理、工作流程及其应用
13. 小曾WRF自学日记(3)渐入佳境 ——WRF实例-数据下载与WPS前处理
14. js计算两个时间相差的年、月、日、时、分、秒。
15. 苹果6plus一直没信号服务器,苹果6sPlus信号弱或者无服务解决方法
16. Linux 挂载Samba 设置777权限及取消挂载
17. h3c服务器增加硬盘,H3C服务器硬盘配置Raid
18. 浅谈 FFT （终于懂一点了~~）
19. 游戏设计之基于高程图的三维地形绘制
20. 安卓aab包安装方式

热门文章

1. 使用JS取得焦点(focus)元素
2. mysql的ace什么概念_ACE(03)：努力了，总会有收获
3. 纵横杯2020 web wp
4. 【NOIP2015模拟10.28B组】终章-剑之魂题解
5. arcgis api for JavaScript学习-Scalebar(比例尺)
6. python如何定义正整数_Python如何将一个正整数分解为质因数相乘
7. QPixmap显示图片
8. 广东九联UNT402H-3798-mv300-uwe5621wifi-爱家TV新魔百和刷机固件
9. 2018-3-25至2018-8-9的日语笔记
10. 每天盯着桌面，送你几个4k、8k壁纸资源的网站，请收好