JS-循环

目录

• 循环
• for循环
• 双重for循环
• while循环
• do while循环
• continue break

一、循环

1.1、循环目的

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

1.2、JS中的循环

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

• for 循环
• while 循环
• do...while 循环

二、for 循环

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

2.1、语法结构

for 循环主要用于吧某些代码循环若干次，通常跟计数有关系。其语法结构如下：

// 1. for 重复执行某些代码， 通常跟计数有关系
// 2. for 语法结构
// for (初始化变量；条件表达式；操作表达式）{
	// 循环体
// }
// 3. 初始化变量 就是用 var 声明的一个普通变量， 通常用于作为计算器使用
// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
// 6. 代码体验 我们重复打印100局 你好
for （var i = 1;i <=100; i++）{
	console.log('你好吗');
}

// for 循环的执行过程
for （var i = 1; i <= 100;i++）{
      console.log('你好吗');
}
// 1. 首先执行里面的计数器变量 var i = 1 但是这句话在for 里面执行一次 index
// 2. 去 i <=100 来判断是否满足条件， 如果满足条件 就去执行 循环体 不满足条件退出循环
// 3. 最后去执行 i++  i++是单独写的代码  递增  第一轮结束
// 4. 接着去执行 i <= 100 如果满足条件 就去执行 循环体 不满足条件退出循环  第二轮

2.2、断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。 断点调试可以帮我们观察程序的运行过程 浏览器中按F12 ->sources -> 找到需要调试的文件 -> 在程序的某一行设置断点 Watch：监视，通过watch可以监视变量的值得变化 F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值得变化

2.3、for 循环重复不相同的代码

for 循环 还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

// for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在 i 每次循环值都会变化
// 我们想要输出1个人 1~100岁
// for （var  i=1；i <=100; i++){
// 	console.log('这个人今年' + i +'岁了'）;
// }
for (var i =1; i <= 100; i++){
      if ( i == 1){
	console.log('这个人今年1岁了');
      }else if ( i ==100){ 
	console.log('这个人今年100岁了');
      }else {
	console.log('这个人今年' + i +'岁了');
       }
}

2.4、for 循环重复某些相同操作

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

// for 循环可以执行相同的代码
for (var i =1; i <=10; i++){
	console.log('媳妇我错了');
}
// 我们可以让用户控制输出的次数
var num = prompt('请输入次数');
for (var i = 1; i <= num; i++){
	console.log('媳妇我错了');
}

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

// for 循环重复执行某些操作 比如说我们做了100次加法运算
// 求1~100 直接的整数累加和
// 需要循环100次，我们需要一个计数器 i
// 我们需要一个存储结果的变量 sum，但是初始值一定是0
// 核心算法：1 + 2 + 3 + 4 ....，sum = sum + i;
var sum = 0; // 求和 的变量
for (var i = 0; i <= 100; i++){
     // sum = sum + i;
     sum += i;
}
console.log(sum);

1. 求1~100之间所有数的平均值   需要一个 sum 的变量  还需要一个平均值 average 变量
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之间所有偶数和奇数的和    我们需要一个偶数的和变量 even  还需要一个奇数 odd
var even = 0;
var odd = 0;
for (var i = 1; i <=100; i++){
      if ( i % 2 ==0){
	even = even + i;
      } else {
	odd = odd +i;
}
}

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

var result = 0;
for (var i = 1; i <= 100; i++){
      if ( i % 3 == 0){
          result = result +i
}
}
console.log('1~100之间所有能被3整除的数字的和是:' + result);

2.6、案例2：求学生成绩

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

// 弹出输入框输入总的班级人数（num)
// 依次输入学生的成绩（保存起来score），此时我们需要用到
// for 循环， 弹出的次数跟班级总人数有关系 条件表达式 i <= num
// 进行业务处理：计算成绩。先求总成绩（sum），之后求平均成绩（average）
// 弹出结果
var num = prompt('请输入班级人数');
var average = 0;
var sum = 0;
for ( var i = 1; i <= num ;i++) {
        var score = ('请输入第' + i +'个学生成绩')；
         sum = sum + parseFloat(score);
}
average = sum / num;
alert('班级总的成绩是：' + sum);
alert('班级平均分是：	' + average);

2.7、一行打印五个星星

⭐⭐⭐⭐⭐ 我们采取追加字符串的方式，这样可以打印到控制台上

// var str = '';
// for (var i = 1; i <= 5; i++){
//      str = str + '⭐' ;
// }
console.log(str);
var num = ('请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++){
      str = str +'⭐';
}
console.log(str);

三、双重for循环

3.1、双重for循环概述

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个五行五列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现

⭐⭐⭐⭐⭐           ⭐⭐⭐⭐⭐
⭐⭐⭐⭐⭐           ⭐⭐⭐⭐
⭐⭐⭐⭐⭐           ⭐⭐⭐
⭐⭐⭐⭐⭐           ⭐⭐
⭐⭐⭐⭐⭐           ⭐

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

// 1. 双重for循环 语法结构
// for（外层的初始化变量；外层的条件表达式；外出的操作表达式）{
//       for（里层的初始化变量；里层的条件表达式；里层的操作表达式）{
//               执行语句；
//        }
// }
// 2. 我们可以吧里面的循环看作是外层循环的语句
// 3. 外层循环一次，  里面的循环执行全部
// 4. 代码验证
for ( var i = 1, i <= 3; i++){
      console.log('这是外层循环第' + i + '次');
       for (var j = 1; j <= 3; j++){
             console.log('这是外层循环第' + j + '次');
       }
}

3.2、打印五行五列星星

⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 核心： 1、内存循环负责一行打印五个星星 2、外层循环负责打印五行

// 打印五行五列星星
var str = '';
for (var i =1; i<=5;i++){ // 外层循环负责打印五行
    for ( var j = 1; j <= 5; j++){ // 里层循环负责一行打印五个星星
           str = str + '⭐'；
    }
           // 打印完毕五个星星就要另起一行  加 \n
           str = str + '\n';
}
console.log(str);

3.3、打印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 += '\n';
      }
      console.log(str);

3.4、打印倒三角形

var str = '';
for (var i = 1;i <= 10; i++）{ // 外层循环控制行数
     for (var j = 1; j <= 10; j++){ // 里层循环打印的个数不一样  j = 1
	str = str + '⭐';
      }
       str += '\n';
      }
      console.log(str);

3.5、打印九九乘法表

// 九九乘法表
// 一共有9行，但是每行的个数不一样，因此需要用到双重 for循环
// 外层的 for 循环 控制行数 i ，循环9次， 可以打印 9 行
// 内层的 for 循环 控制每行公式 j
// 核心算法：每一行 公式的个数正好和行数一致， j <= i ;
// 每行打印完毕，都需要重新换一行
var str = '';
for (var i = 1; i <= 9; i++){ // 外层循环控制行数
     for (var j = 1; j <= i ; j++){ // 里层循环控制每一行的个数  j <= i
          // 1 x 2 = 2
         //  str = str + '⭐';
         str += j + 'x' + i + '=' + i * j + '\t';
      }
      str += '\n';
}
console.log(str)

3.6 for 循环小结

• for 循环可以重复执行某些相同代码
• for 循环可以重复执行些许不同的代码，因为我们又计数器
• for 循环可以重复执行某些操作，比如算数运算符加法操作
• 随着需求增加，双重for循环可以做更多、更好看的效果
• 双重 for 循环，外层循环一次，内存 for 循环 全部执行
• for 循环是循环条件和数字直接相关的循环
• 分析要比写代码更重要
• 一些核心算法想不到，但是要学会，分析它执行过程
• 举一反三，自己经常总结，做一些相似的案例

四、while循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，知道表达式不为真时结束循环。

// 1. while 循环语法结构  while 当...的时候
// while (条件表达式）{
//      循环体
// }
// 2. 执行思路 当条件表达式结果为true 则执行循环体  否则 退出循环
// 3. 代码验证
var num = 1;
while ( num <= 100){
          console.log('你好');
          num++;
}
// 4. 里面应该也有计数器  初始化变量
// 5. 里面应该也有操作表达式  完成计数器的更新 防止死循环

4.1、案例

// 1. 打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
       console.log('这个人今年' + i +'岁了');
       i++;
}

// 2. 计算1~100之间所有整数的和
var sum = 0;
var j = 1;
while ( j <= 100) {
         sum += j;
         j++
}
console.log(sum);

// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一致询问
var message = prompt('你爱我吗?');
while ( message !== '我爱你'){
         message = prompt('你爱我吗？');
}
alert('我也爱你啊');

五、do...while

// 1.do while 循环 语法结构
do {
    // 循环体
} while (条件表达式)
// 2, 执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环
// 3. 代码验证
var i =1;
do {
     console.log(' how are you?');
     i++;
}while (i <=100)
// 4.我们的do while 循环体至少执行一次

// 1. 打印人的一生，从1岁到100岁
var i = 1;
do {
        console.log('这个人今年' + i + '岁了');
        i++;
} while ( i <= 100)

// 2. 计算 1~100 之间所有整数的和
var sum = 0;
var j =1;
do {
       sum += j;
        j++;
} while ( j<= 100)
console.log(sum);

// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一致询问
do {
         var message = prompt('你爱我吗?');
}  while ( message !== '我爱你')
alert('我也爱你啊');

5.1、循环小结

• JS中循环有 for 、while、do while
• 三个循环很多情况下都可以相互替代使用
• 如果是用来及次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
• while 和 do while 可以做更复杂的判断条件，比for循环灵活一些
• while 和 do while 执行顺序不一样，while 先判断后执行，do while 先执行一次，在判断执行
• while 和 do while 执行次数不一样，do while 至少会执行一次循环体，而while 可能一次也不执行

六、continue break

6.1、continue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue之后的代码就会少执行一次

// continue 关键字  退出本次 （当前次的循环）  继续执行剩余次数循环
for (var i= 1; i <=5; i++)  {
      if (i ==3) {
         continue; // 只要遇见 continue 就退出本次循环  直接跳到 i++
      }
      console.log('我正在吃第' + i + '个包子' );
}
 
// 1. 求1~100 之间，除了能被7整除之外的整数和
var sum = 0;
for (var i =1; i <=100 ; i++) {
      if ( i %7 == 0) {
          continue;
       }
       sum += i;
}
console.log(sum);

6.2、break 关键字

break 关键字用于 立即 跳出整个循环（循环结束）

// break 退出整个循环
for ( var i = 1; i <= 5; i++) {
      if ( i ==3) {
         break;
      }
      console.log('我正在吃第' + i + '个包子');
}