零基础入门前端--JavaScript 循环结构语句

循环控制

控制程序重复执行若干次相同或似的逻辑,理解并正确使用循环控制,需要搞清楚循环的3个要素:起始值、变化量、终止条件。

起始值循环的起点,可以是【任意数据类型值】

变化量是指【改变起始值的方式】

终止条件【布尔类型值】,它是循环停止的边界

while 循环

while,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了

语法 :

1. while (条件) { 满足条件就执行 }

因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了

// 1. 初始值(初始化条件)
var num = 0; // 
2. 终止条件 while (num < 10) {
    
     
              // 3. 要执行的代码 console.log('当前的 num 的值是 ' + num)
              // 4. 变化量 num = num + 1 
}

案例1: 输出1 ~100之间的所有偶数

// 起始条件 
var n = 1 
    // 终止条件 
while (n <= 100) {
    
     
    // 逻辑代码 if (n % 2 === 0) { 
                  console.log(n);
               } 
               // 变化量 
               n++ 
}

案例2: 求 1 ~ 100 以内所有 3 的倍数的和

// 求 1 ~ 100 以内所有 3 的倍数的和 

// 声明一个变量用于接收和 
var sum = 0 
// 初始值 
var num = 1 
    // 终止条件 
while (num <= 100) {
    
     
   if (num % 3 === 0) {
    
     
       sum += num 
   } 
   // 变化量 
   num++ 
} 
console.log(sum);

案例3: 求三次自幂数(水仙花数)

自幂数是指一个三位数,它的每个位上的数字的三次幂之和等于它本身

例如 : 153

○三个位上分别是 1 和 5 和 3

○三次幂只和就是 1的三次方 + 5的三次方 + 3的三次方

○结果是 153 和原始数字一样

○153 就是一个三次自幂数

// 求三次自幂数 
// 初始值 
var m = 100 
// 终止条件 
while (m <= 999) {
    
     
   // 获取百位数 
   var a = parseInt(m / 100) 
   // 获取10位数 
   var b = parseInt(m % 100 / 10) 
   // 获取个位数 var c = m % 10 
   // 求个十百三位数的3次幂的和 
   var res = a ** 3 + b ** 3 + c ** 3 
   if (res === m) {
    
     
       console.log(m + '是三次自幂数'); 
   } 
   // 变化量 
   m++ 
}

do while 循环

是一个和 while 循环类似的循环,while 会先进行条件判断,满足就执行,不满足直接就不执行了

但是 do while 循环是,先不管条件,先执行一回,然后在开始进行条件判断

语法:

do { 要执行的代码 } while (条件)

// 定义一个变量 
var n = 1 
// 设定我们的循环条件,n要小于等于3 
while (n <= 3) {
    
     
   console.log('我执行了' + n + '次'); 
   // 这里我们要让我们的变量向着我们设定的值前进 
   n = n + 1

do while 和 while 循环的区别

/* 
while 循环和do while循环的区别 
    => 通过对比我们发现,do while循环不管条件是不是满足都会执行一次 
    => while 循环在条件不满足的情况下一次都不执行 
    => 因为while是先判断条件后执行代码,如果条件不满足就一次也不执行了 
    => 也就说 在条件都满足的情况下 while循环和do while循环是一样的 
    => 在条件不满足的情况的下do while循环要比while循环多执行一次 
       -> 因为do while循环是先执行后判断 
       -> while 循环是先判断后执行 
*/ 
// do while 循环 
// 定义一个其实变量 
var n = 10 
do {
    
     
   console.log('我执行了一次'); 
   n++ 
} while (n <= 3) 
// while循环 
while (n <= 3) {
    
     
    console.log('我执行了一次'); 
    n++ 
}

案例1: 求 1 ~ 100 以内所有整数的和

// 定义我们的初始值 
var num = 1 
// 我们要求和,需要需要定义一个变量接收我们最后的结果 
var sum = 0 
do {
    
     
    // 计算我们的结果 
    sum += num 
    // 让我们的初始值执行++操作 
    num++ 
} while (num <= 100) // 设定我们的结束条件 
// 打印一下我们的结果 
console.log(sum);

for 循环

和 while 和 do while 循环都不太一样的一种循环结构,道理是和其他两种一样的,都是循环执行代码的

语法:

for (初始值; 结束条件; 变化量) { 要执行的代码 }
for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始值,终止条件,变化量,写在了一起 
for (var i = 1; i <= 10; i++) {
    
     
    // 这里写的是要执行的代码 
    console.log(i) 
} 
// 控制台会依次输出 1 ~ 10

案例1: 求 1 ~ 100 以内所有 3 的倍数的和

// 求 1 ~ 100 以内所有 3 的倍数的 和 
// 声明一个变量用于接收和 
var sum = 0 // i = 1 初始值 
// i <= 100 终止条件 
// i++ 变化量 
for (var i = 1; i <= 100; i++) {
    
     
    if (i % 3 === 0) {
    
     
        sum += i 
    }
}

案例2: 求1000 ~ 2000 之间所有的闰年

// 求1000 ~ 2000 之间所有的闰年 
// 公历闰年的简单计算方法 1.能被4整除而不能被100整除。2.能被400整除。 
// 开始循环 
for (var i = 1000; i <= 2000; i = i + 4) {
    
     
    //判断是不是闰年 
    if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) {
    
     
        console.log(i + '是闰年'); 
     }
}

案例3: 求两个数字的最大公约数

// 求两个数字的最大公约数 
// 公约数:能同时被两个数整除的数就是公约数 
// 声明两个数 
var min = 12 
var max = 30 
// 定一个变量用于接收公约数 
var res = 1 // 公约数最小是1 
for (var i = 1; i <= min; i++) {
    
     // 终止条件是最小的那个数字 
    if (min % i === 0 && max % i === 0) {
    
     
        console.log(i); 
    } 
}

循环控制语句

break 终止循环

在循环没有进行完毕的时候,因为我设置的条件已满足,提前终止整个循环,不会再有下一次循环

比如: 我要吃五个包子,吃到三个的时候,不能在吃了,我就停止吃包子这个事情,要终止循环,就可以直接使用 break 关键字

for (var i = 1; i <= 5; i++) {
    
     
    // 每循环一次,吃一个包子 
    console.log('我吃了一个包子') 
    // 当 i 的值为 3 的时候,条件为 true,执行 {} 里面的代码终止循环 
    // 循环就不会继续向下执行了,也就没有 4 和 5 了 
    if (i === 3) {
    
     
        break 
     }
 }
 

continue 结束本次循环

在循环中,把循环的本次跳过去,继续执行后续的循环,也就是结束本次循环,直接进入下次循环

比如: 吃五个包子,到第三个的时候,第三个掉地下了,不吃了。跳过第三个,继续吃第四个和第五个。跳过循环的本次,就可以使用 continue 关键字

for (var i = 1; i <= 5; i++) {
    
     
     // 当 i 的值为 3 的时候,执行 {} 里面的代码 
     // {} 里面有 continue,那么本次循环后面的代码就都不执行了 
     // 自动算作 i 为 3 的这一次结束了,去继续执行 i = 4 的那次循环了 
     if (i === 3) {
    
     
         console.log('这个是第三女朋友') 
         continue 
         } console.log('我的女朋友') 
}

案例1: 求最大公约数

// 最大公约数 
// 找最大的xxx数字, 从大向小循环最好 
var res = 1 
// 声明两个变量 
var min = 12 
var max = 24 

// 开始循环, 从大向小循环 
for (var i = min; i >= 1; i--) {
    
     
     // 判断是否是公约数 
     if (min % i === 0 && max % i === 0) {
    
     
         // 把i的值赋值给 res 
         res = i 
         // 只要找到一个公约数, 就肯定是最大公约数。可以直接结束循环了 
         break 
      } 
} 
// 循环结束 
console.log(min + ' 和 ' + max + ' 的最大公约数是 : ' + res)

案例2: 最小公倍数

// 最小公倍数 
// 因为是找 最小xxx的数字, 所以从小向大循环最好 
var res = 0 
var min = 10 
var max = 15 

// 从小到大循环 
for (var i = max; i <= min * max; i += max) {
    
     
     // 只要判断还是 min 的倍数 
     if (i % min === 0) {
    
     
     console.log('公倍数是 : ' + i) 
     // 给 res 赋值 
     res = i 
     // 找到的第一个公倍数就是最小公倍数 
     // 直接结束循环了 
     break 
     } 
}

循环嵌套

利用循环的知识来对比一个简单的天文知识,我们知道地球在自转的同时也在围绕太阳公转,如果把自转和公转都看成是循环的话,就相当于是循环中又嵌套了另一个循环。

image.png

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套,如下代码所示:

for (var i = 1; i <= 3; i++) {
    
     
     // 在一个循环内, 再次书写一个循环 
     for (var j = 1; j <= 3; j++) {
    
     
         console.log('i 是 ' + i + ' , j 是 ' + j) 
         } 
}

外层的循环每执行1次,内部循环执行 3 次,然后外层重复下一次循环…

注意:外层循环和内层循环不能使用同一个变量

案例1: 在页面上使用 (☆) 出现一个正方形

// 分析: 
// 出现一个☆ 
// document.write('☆') 
// 要出现9个,是不是要执行同样的代码9次,是不是可以用到循环 
// for (var i = 0; i <= 9; i++) { 
// document.write('☆ ') // } 

// 控制行数 
for (var j = 1; j <= 9; j++) {
    
     
     // 控制列数 
     for (var i = 1; i <= 9; i++) {
    
     
          document.write('☆ ') 
     } 
     // 为了出现正方形需要换行 document.write('</br>') 
}

案例2: 在页面上使用 (☆) 出现一个三角形

// 控制行数 
for (var j = 1; j <= 9; j++) {
    
     
     // 控制列数 
     for (var i = 1; i <= j; i++) {
    
     
          document.write('☆ ') 
     } 
     // 为了出现正方形需要换行 
     document.write('</br>') 
}

案例3: 在页面上使用 (☆) 出现一个倒三角形

// 控制行数 
for (var j = 1; j <= 9; j++) {
    
     
     // 控制列数 
     for (var i = j; i <= 9; i++) {
    
     
         document.write('☆ ') 
     } 
     // 为了出现正方形需要换行 
     document.write('</br>') 
}

案例4: 页面上打印出九九乘法表

// 控制行数 
for (var j = 1; j <= 9; j++) {
    
     
    // 控制列数 
    for (var i = 1; i <= j; i++) {
    
     
        document.write(i + '*' + j + '=' + j * i) 
    } 
    // 为了出现正方形需要换行 
    document.write('</br>') 
}

猜你喜欢

转载自blog.csdn.net/sdasadasds/article/details/130270971