目录
一.循环的目的
二.循环的种类
1.for循环
1.1for循环语法结构
1.2for循环重复执行相同或不同的代码
2.双重for循环
2.1双重for语法结构
2.2双重for循环典型案例
3.while循环
3.1while循环语法结构
3.2while循环典型案例
4.do-while循环
4.1do-while语法结构
4.2do-while循环典型案例
5.continue关键字和break关键字
5.1continue关键字
5.2break关键字
三.循环小结
1.for循环小结
2.while do-while循环小结
3.总结
一.循环的目的
在实际问题中，有许多具有规律性的重复操作，因此程序中要完成这类操作就需要重复执行这些语句。而循环可以让我们在实际操作中重复执行某些代码，循环便让我们的程序变得更加简单高效。
二.循环的种类
1.for循环 （JS中最主要的循环）
在程序中，一组被重复执行的语句称之为循环体，能否继续执行，取决于循环的终止条件，由循环体及循环的终止条件组成的语句，循环语句。
1.1for循环语法结构
for循环主要用于把某些代码循环若干次，通常与计数有关，其语法结构如下：
for(初始化变量;条件表达式;操作表达式){
//循环体
}
1）初始化变量 用var声明一个普通变量，通常用于作为计数器使用
2）条件表达式 用于决定每一次循环是否执行，就是终止条件
3）操作表达式 是每次循环最后执行的代码，常用于我们计数器变量
代码体验：重复打印100句Hello！
for (var i = 1; i < 100; i++) {
console.log('Hello！');
}
代码执行过程分析：
a.首先执行里面的计数器变量 var i = 1; 但是这句话在for循环里面只执行一次
b.根据i <= 100，判断是否满足条件，如果满足条件则执行循环体，不满足则退出循环
c.最后执行 i++ ，i++是单独执行的代码 递增 第一轮结束
d.接着去执行i <= 100 如果满足条件，则执行循环体，否则退出循环
1.2for循环重复执行相同或不同的代码
1)for循环可以执行相同的代码
var num=promopt('请输入次数');
for(var i = 1; i <= num; i++){
console.log('加油咯');
}
2)for循环可以执行不同的代码
因为有计数器变量i的存在，i每次循环值都会发生变化
for(var i = 1;i <= 100;i++){
console.log('我今年'+i+'岁啦');
}
3)for循环执行算术运算操作
案例 1：求1-100之间所有整数的累加和
案例分析：
a.需要循环100次，我们需要一个计数器 i
b.我们需要一个存储结果的变量sum，但初始值一定是0
c.核心算法：1+2+3...+100，sum=sum+i;
var sum = 0;
for (var i = 1; i < 100; i++) {
sum = sum + i;
sum += i;
}
console.log(sum);
案例2：求1-100之间所有整数的累加和的平均值
案例分析：相较于案例1的基础上我们将变量sum替换为求平均值的变量average ，并添加了一个average =sum/100;的运算过程
var sum = 0;
var average = 0;
for (var i = 0; i <= 100; i++) {
sum += i;
}
average = sum / 100;
console.log(average);
案例3：求1-100之间能被三整除的数的和
案例分析：此案例我们相较于之上案例，多了一个if语句来筛选出1-100之间能被3整除的数，在对其进行整数求和
var sum = 0;
for (var i = 0; i < 100; i++) {
if (i % 3 == 0) {
sum += i;
}
}
console.log(sum);
2.双重for循环
很多情况下，单层for循环并不能满足我们的需求，比如打印一个五行五列的的图形，打印一个倒得直角三角形，这些都要通过循环嵌套来实现。
循环嵌套是在一个循环语句中在定义一个循环语句的语法结构，例如在一个for循环语句中在嵌套一个for循环，我们将其称为双重for循环。
2.1双重for语法结构
语法结构如下：
for(外层的初始化变量;外层的条件表达式;外层的操作表达式) {
for(内层的初始化变量;内层的条件表达式;内层的操作表达式){
//执行语句;
}
}
我们可以将里面的循环看做是内层循环的语句，外面循环执行一次，里面循环执行全部。
代码体验：
for (var i = 1; i < 3; i++) {
console.log('这是第' + i + '外层for循环');
for (var j = 1; j < 3; j++) {
console.log('这是第' + j + '层内层for循环');
}
}
运行结果：
2.2双重for循环典型案例
案例1：打印5行5列的星星
案例分析：
a.for循环内层负责打印1行5个星星
b.for循环外层负责打印5行星星
var str = '';
for (var i = 1; i <= 5; i++) {
// 外层负责打印5行
for (var j = 1; j <= 5; j++) {
str = str + '*';
}
// 如果一行打印完成5个星星后便另起一行
str = str + '\n'
}
console.log(str);
案例2：打印倒三角的星星
案例分析：
a.一共有n行，但每行行数不一样，所以利用双层for循环，
b.外层循环控制行数i，循环n次可以打印n行
c.内层循环控制星星个数
d.核心算法：var j = i; j <= n; j++
var str = '';
var n = prompt('请输入n的值');
for (var i = 1; i <= n; i++) {//外层循环控制行数
for (var j = i; j <= n; j++) {//里层循环控制个数
str = str + '*';
}
str = str + '\n';
}
console.log(str);
案例3：打印九九乘法表(重要案例)
案例分析：
a.一共有九行但每行个数不同，使用双层for循环
b.外层for循环控制i，循环9次，打印9行
c.内层for循环控制每行公式j
d.核心算法：每一行公式的个数恰好与行数相等
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
// 注意注意使用j*i的话会更符合常规所见的99乘法表 记得末尾加一个'\t'让乘法与乘法之间空开来
str += j + '*' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
3.while循环
while循环可以在表达式为真的前提下，循环执行特定的代码，知道表达式不为真的时候结束循环。
3.1while循环语法结构
语法结构如下：
while (条件表达式) {
//循环体
}
执行思路：
a.先执行条件表达式，如果为ture，则执行循环体代码，如果为false，则退出循环，执行后面的代码
b.执行循环体代码
c.循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为ture，则会继续执行循环体，知道循环条件为false，退出整个循环
3.2while循环典型案例
案例：弹出一个提示框，你爱我吗？ 除非输入我爱你，否则一直询问
案例分析：
a.弹出输入框，要求用户输入
b.判断条件较复杂，我们使用while循环
c.while循环的语句中只要输入的不是我爱你，就一直循环
var str = prompt('你爱我吗？');
while (str != '我爱你') {
// 这里前面那记得加str
str = prompt('你爱我吗？');
}
alert('我爱你啊！')
4.do-while循环
do-while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断， 如果条件为真就会重复执行循环体，否则退出循环。
4.1do-while语法结构
语法结构如下：
do {
//循环体
} while (条件表达式)
执行思路：
a.先执行一次循环体代码
b.在执行条件表达式如果为ture，则执行循环体代码，如果为false，则退出循环，执行后面的代码
注意：先执行循环体，在判断，我们会发现do-while循环语句至少会执行一次循环体代码
4.2do-while循环典型案例
案例：计算1-100间的所有整数和
var sum = 0;
var i = 1;
do {
console.log(sum);
sum += i;
} while (i <= 100)
5.continue关键字和break关键字
5.1continue关键字
continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中，continue之后的代码会少执行一次）
案例：输出1-100除了能被7整除外的所有整数和
案例分析：当遇到i=7时，利用countine退出当前循环执行下一次循环
var sum = 0;
for (var j = 1; j <= 100; j++) {
if (j % 7 == 0) {
continue;
}
sum += i;
}
5.2break关键字
break关键字用于立即跳出整个循环（循环结束）
案例：利用break关键字输出5以内小于3的数字
案例分析：利用if语句结合break使i=3时跳出整个循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('这是第' + i + '个');
}
三.循环小结
1.for循环小结
1）for循化可以重复执行某些相同的代码
2）for循环可以重复执行些许不同的代码，因为我们有计数器
3）for循环可以重复执行某些操作，比如算术运算符加法操作
4）随着需求的增加，双重for循环可以做更多更有益的效果
5）双层for循环外层循环一次，内层for循环全部执行
6）for循环是循环条件和数字直接相关的循环
2.while do-while循环小结
1）while和do-while可以做更加复杂的判断条件
2）while和do-while执行顺序不同，while先判断后执行，do-while先执行一次后判断
3）while和do-while执行次数不一样，do-while至少执行一次循环体，而while可能一次也不执行
3.总结
JS中三个循环，for，while，do-while，三个循环很多情况下都是可以交替使用的，如果是用来计数次，和数字有关的，三者都可以使用，但我们更喜欢使用for循环，while循环和do-while循环可以做更复杂一些的判断条件，比for循环更加灵活一些，但在实际工作中，我们更常用for循环语句，它的写法更加的简洁直观。
