循环语句

循环的作用

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

js中的循环方法：
1.while
2.do…while
3.for
它们的相同之处，都能够实现循环。 不同的地方，格式不一样，使用的场景略有不同。

while循环

什么是：while循环

while是计算机的一种基本循环模式。当满足条件时进入循环，进入循环后，当条件不满足时，跳出循环。
——
while语句的一般表达式为：while（表达式）{循环体}。
——
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

语法格式：

//while循环
//循环变量初始化
while(条件){
    //条件体语句块
    //改变循环的变量
}
//后续变量

基本使用：

//在页面中输出5次'我是最棒的'
var i = 0;//循环的初始值，在开始的时候被执行一次
while(i < 5){//循环条件  如果满足循环条件，就进入大括号；进行执行
    document.write('我是最棒的');//循环体，重复执行代码
    i++;//增量
}
document.write('后续代码')；//当循环体结束后，继续执行代码

’注意：while循环的使用细节:

1.在循环体中，一定要修改循环变量的值，否则会进入死循环
2.循环变量的初始化一定放在while之前
3.while之后，有一个（），表示要判断的条件，里面就是一个条件表达式
4.循环体，可以使用{}，也可以不使用{}，但是如果不使用，循环体就只有一条语句，建议大家任何情况下都加上{}。

do…while循环

什么是：do…while循环

do-while循环将先运行一次，因为经过第一次do循环后，当检查条件表达式的值时，其值为 不成立时而会退出循环。保证了至少执行do{ }内的语句一次。

使用场景：

基本上和while是一致的。
格式：
 //循环变量初始化
do{
    // 循环体语句块
     // 修改循环变量
} while(条件表达式)

基本用法:

// 在页面中输出5次你真好
        var i =0;
        do{
            document.write('我是最棒的');//循环体，重复执行的代码块
            i++;//增加
        }while('后续代码')//循环条件
        // 注意：先执行循环体，然后判断

注意：

需要注意的事项和while是一致的
1.循环变量初始化要放在do之前
2.在循环体中，需要修改循环变量，
3.循环体要使用{}，形成语句块

While循环和do…while循环的区别：

 var i = 0;
while(i < 10){//初始值不满足条件，所以不会被执行
      console.log('我不会被执行');
      i++;
}
//注意：while循环是先判断后执行；

var a = 10;
do{ 
   console.log('我会被执行一次');
}while(i < 10)//先执行后判断
//注意/: do...while循环无论初始条件满不满足，至少都会被执行一次
    
实际上，在开发的时候，while使用频率要远远高于do...while

for循环

什么是：for循环

for循环是编程语言中一种循环语句，而循环语句由循环体及循环的判定条件两部分组成
表达为：for（单次表达式;条件表达式;末尾循环体）{中间循环体；}。

语法结构:

for 循环主要用于把某些代码循环若干次，通常跟计数有关系。
其语法结构如下：
for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

执行过程：

1. 初始化变量，初始化操作在整个 for 循环只会执行一次。
2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
3. 执行操作表达式，此时第一轮结束。
4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
5. 继续执行操作表达式，第二轮结束。
6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

基本使用：

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

说明：

1.表达式1,只执行了一次，表达式2执行了n次，表达式3页执行了n次
2.循环体语句块执行了n次。由于表达式1只执行了一次，所以经常将变量的定义及初始化工作放在表达式中。

for循环使用细节说明:

1.for关键字后面有一个小括号，小括号中有三个表达式，必须要有三个表达式，表达式之间需要使用；隔开。所以，必须有两个分号
2.三个表达式，都是可以省略的，可以不写，但是分号不能少

		//省略表达式1
 		var i = 0;
        var sum  = '我是最棒的';//定义一个变量
        for(; i < 5; i++){
            console.log(sum);//输出打印结果
        }
 		//省略表达式3
        var i = 0;
        var sum  = '我是最棒的';
        for(; i <= 5;){
            console.log(sum);//输出打印结果
            i++;
        }
		
注意：尽管可以省略，一般不建议这么做

for循环和while如何选用？

1.大部分情况，它们之间是一样的。
2.for循环通常针对循环次数确定的循环，while循环可以实现循环次数不确定的循环。
3.for循环写法更加简洁。

小结：

1.while循环：先判断再执行
2.do…while循环：先执行再判断
3.for括号里面必须有且仅有两个分号

循环语句-2

跳转语句

在js中，有如下两种跳转语句：
1.break
2.continue
break：结束本层循环
continue：跳过（结束）本次循环，继续进入下一次循环

// continue:跳过（结束）本次循环，继续进入下一次循环
// break:结束本层循环
        for(var i =1;i<=5;i++){
            if(i === 3){
                continue;
            }
            console.log(i);//1 2 3 4 5
        }
        // 注意：
        // 当 i=1 判断为假 执行 console.log(i) 1
        // 当 i=2 判断为假 执行 console.log(i) 2
        // 当 i=3 判断为真 执行 执行 continue 之后的语句不执行，执行i++
        // 当 i=4 判断为假 执行 console.log(i) 4
        // 当 i=5 判断为假 执行 console.log(i) 5
        // 当 i=6 循环结束


        for(var i =1;i<=5;i++){
            if(i === 3){
                break;
            }
            console.log(i);//1, 2 
        }
        // 当 i=1 判断为假 执行 console.log(i) 1
        // 当 i=2 判断为假 执行 console.log(i) 2
        // 当 i=3 判断为真 执行 break;
        // 结束整个循环

//就是两个关键字

多重循环

为什么会有多重循环

因为我们在平时写功能的时候会，出现一种情况我们使用一层循环是做不出来的，所以这是就出现了多层的循环。

在实际的开发中，经常需要用到多重循环，尤其是二重循环。 不管是while还是for都可以实现二重循环，但是一般使用for比较多。

很多情况下，单层 for 循环并不能满足我们的需求，比如我们要打印一个 5 行 5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

双重 for 循环语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}
1.内层循环可以看做外层循环的语句
2.内层循环执行的顺序也要遵循 for 循环的执行顺序 
3.外层循环执行一次，内层循环要执行全部次数打印五行五列星星

核心： 
内层循环负责一行打印五个星星
外层循环负责打印五行


打印五行五列星星：
var star = '';
for (var j = 1; j <= 3; j++) {
    for (var i = 1; i <= 3; i++) {
      star += '☆'
    }
    // 每次满 3个星星 就 加一次换行
    star += '\n'
}
console.log(star);

打印表格：

//只有一个表格，所以table标签不需要循环
        document.write("<table border='1'>");
            for(var i =1;i<=5;i++){
                // 每执行一次外层循环，输出一次tr
                document.write("<tr>")
                    for(var j =1;j<=5;j++){
                        // 每执行一次tr，循环输出5次td
                        document.write("<td>上海</td>")
                    }
                document.write("</tr>")
            }
            document.write("</table>");

正三角

// 打印正三角
        for(var i = 1;i<=5;i++){
            for(var j =1;j<=i;j++){
                document.write("+")
            }
            document.write("<br> ")
        }

倒三角

for(var i = 5;i >=1;i--){
            for(var j =1;j<=i;j++){
                document.write("+")
            }
            document.write("<br> ")
        }

打印 n 行 n 列的星星

要求用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。
var row = prompt('请输入您打印几行星星:');
var col = prompt('请输入您打印几列星星:');
var str = '';
for (var i = 1; i <= row; i++) {
   for (j = 1; j <= col; j++) {
       str += '☆';
   }
   str += '\n';
}
 console.log(str);