Ⅲ JavaScript循环结构

最新推荐文章于 2023-01-30 22:04:25 发布

丶满满

最新推荐文章于 2023-01-30 22:04:25 发布

阅读量299

点赞数

分类专栏： JavaScript 文章标签： javascript html5 开发语言 css 前端

本文链接：https://blog.csdn.net/m0_61748249/article/details/121553738

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（一）程序三大结构

程序的三种结构：顺序结构，选择结构，循环结构

（二）循环结构

循环结构就是根据某些给出的条件，重复的执行同一段代码，直到条件不成立。

循环必须要有某些固定的内容组成

①初始化

②条件判断

③要执行的代码

④自身改变

1.while 循环

概念：

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

语法：

while（条件）{循环体，即满足条件时执行的代码}

注意：

因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值（即初始值），且要有自身的改变，不然就会一直循环下去。

示例：

//控制台倒序输出5，4，3，2，1

<script>
    //1.初始化条件
    var num = 5
    //2.条件判断
    while(num > 0){
    //3.要执行的代码
    console.log(num)
    //4.自身改变
    num-- 
            }
   console.log('结束循环')
</script>

2.do while 循环

概念：

do while 是一个和 while循环类似的循环。while 循环会先进行条件判断，满足就执行，不满足直接就不执行了；但是do while 循环是，先不管条件，执行一回，然后再开始进行条件判断。

//下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 { }内部的代码

<script>
var num = 10
do {
    console.log('我执行了一次')
    num ++
}while(num < 10)
</script>

语法:

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

示例：

// 控制台倒序输出 5 4 3 2 1 

<script>
        var num = 5
        do{
            console.log(num) 
            num--  
        }while(num > 0)
</script>

3.for 循环

概念：

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

语法：

for(var i = 0（初始化） ;i <= 10（条件判断）; i++（自身改变）){ 要执行的代码 }

示例：

//控制台输出1~10

<script>
//把初始化，条件判断，自身改变写在了一起
for ( var i = 1; i <= 10; i++){
//这里写的是要执行的代码
    console.log(i)
}
//控制台会依次输出1~10
</script>

（三）累加求和

//求1+2+3+4+...100的和
分析：
    第一次循环
      1
    第二次循环
      1+2
    第三次循环
      1+2+3
    ...
    第n次循环
      1 + 2 + 3 + ... + n   得到前n个数的和
  
    var sum = 0 //总和
    for(var i = 1; i<=100; i++){  // i :1 2 3
        i // 1 2 3 4 ... 99 100    
        sum = sum + i   // sum: 1, 3, 6
    }
    
<script>
       var sum = 0 // 和
       for (var i = 1; i <= 100; i++) {
           sum = sum + i
       }
       console.log('和是 ' + sum)
</script>

（四）跳转语句

1.break关键字

概念：

在循环没有进行完毕的时候，因为设置的条件满足，提前终止循环。比如：我要吃5个包子，吃到第三个的时候不能再吃了，我就停止吃包子这个事情。

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

作用：

①循环语句中，终止循环。

②switch-case中，跳出分支。

示例：

<script>
        // 当i=4时，结束循环

        for (var i = 0; i < 10; i++) {
            console.log(i)
            if(i === 4){
                break   //结束循环
            }
        }
        console.log('结束>>>>')
</script>

2.continue 关键字

概念：

在循环中，把循环的本次跳过去，继续执行后续的循环。比如：吃5个包子，吃到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个。

<script>
for(var i = 1; i <= 5; i++){
    //当i的值为3时，执行{}里面的代码
    //{}里面又continue,那么本次循环后面的代码就都不执行了
    if（ i===3 ）{
        console.log('这是第三个包子，掉地下了，我不吃了')
        continue
    }
    console.log('我吃了一个包子')
}
</script>

作用：

结束本次循环。遇到continue语句，结束本次循环，contiune后面的代码不会执行，继续执行下一次循环

页面输出语句

document.write('内容显示到页面上')

⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

<script>
        document.write('hello')
        document.write('<br>')
        document.write('world')
        document.write('<br>')
        document.write('javascript')
</script>

（五）双重for循环

1.概念

for循环可以重复执行一个操作，当然也可以重复执行另一个循环，即for循环里面嵌套for循环，即双重for循环。

循环的嵌套：外层循环循环一次，内层就要循环完

2.示例1

*            1
**           2
***          3
****         4
*****        5 
//页面打印出上面图形
分析：
外层循环打印行
内层循环打印*

<script>
//外层循环打印行
     for (var i = 1; i <= 5; i++) {
         //内层循环打印星号
         for (var j = 1; j <= i; j++) {  //j:1,2
             document.write('*') 
         }
         document.write('<br>') //换行   
     }
</script>

3.示例2

 *
   ***
  *****
 *******
*********
//页面打印出上面图形
<script>
    for (var i = 1; i <= 5; i++) {
        //打印空格
        for (var j = 1; j <= 5 - i; j++) {
            document.write('&nbsp;')
        }
        //打印星号
        for (var k = 1; k <= 2 * i - 1; k++) {
            document.write('*')
        }
        document.write('<br>') //换行
    }
</script>

（六）练习

1.打印出1~100里所有的偶数，所有的奇数

<script>
//偶数
for(var i = 1; i <= 100; i++){
    if(i%2 == 0){
        document.write(i)
    }    
}

//奇数
for(var i = 1; i <= 100; i++){
    if(i%2 != 0){
        document.write(i)
    }    
}
</script>

2.打印出100以内7的倍数

<script>
for(var i = 1; i <= 100; i++){
    if(i%7 == 0){
        document.write(i)
    }    
}
</script>

3.打印出100以内能被4整除的数

<script>
for(var i = 1; i <= 100; i++){
    if(i%4 == 0){
        document.write(i)
    }    
}
</script>

4.1+2+3+4+5+6+...+100的和

<script>
var sum = 0 
     for (var i = 1; i <= 100; i++) {
         sum = sum + i
     }
     document.write('和是 ' + sum)
</script>

5.打印出100~200之间能被6整除的前三个数

<script>
var count = 0 //计数器
for(var i = 100; i <= 200; i++){
    if(i%6 == 0){
        count++
        document.write(i)
    }  
    if(count == 3){
        break
    }
}
</script>

6.入职年薪10K，每年涨幅5%，50年后工资多少？该员工50年总共拿了多少工资 ?

//分析
第一年:  salary = 10000         //入职薪水
第二年:  salary + salary*0.05
第三年:  (salary + salary*0.05)  * 0.05 
...
第50年:   .....
<script>
var a = 10000 //入职薪水   
var sum = 0
for(var i = 2; i <= 50; i++){
  var item = a * 0.05  //累加项:涨幅5%
  a = a + item   //原来工资加涨幅
  sum = sum + a
  if(i == 50){
    document.write( "50年后工资为" + a.toFixed(2) + '元')
    document.write('<br>')
    document.write('50年总共拿了工资' + sum.toFixed(2) + '元')
    }
}
</script>

7.输出20~80之间能被3整除的整数，每5个一行（使用document.write()打印）。

<script>
var count = 0 //计数器
for(var i = 20; i <= 80; i++){
    if(i%3 == 0){
        count++
        document.write(i)
    }  
    if(count%5 == 0){
        document.write('<br>')
    }
}
</script>

8.打印出1000~2000年中所有的闰年，并以每行4个数的形式输出（使用document.write()打印）。

<script>
var count = 0
for(var year = 1000; year <= 2000; year++){
   if((year % 4 ==0 && year % 100 != 0)||(year % 400 == 0)){
        count++
        document.write(year + "&emsp;")
    }
   if(count == 4){
        document.write("<br>")
        count = 0
    }
}
</script>

9.打印出菱形

    *     
   ***    
  *****   
 *******  
********* 
 ******* 
  *****
   ***
    *
<script>
        //上半部分
        for (var i = 1; i <= 5; i++) {
            //打印空格
            for (var j = 1; j <= 5 - i; j++) {
                document.write('&nbsp;')
            }
            //打印星号
            for (var k = 1; k <= 2 * i - 1; k++) {
                document.write('*')
            }
            document.write('<br>') //换行
        }
        //下半部分
        for (var i = 1; i <= 4; i++) {
            //打印空格
            for (var j = 1; j <=  i; j++) {
                document.write('&nbsp;')
            }
            //打印星号
            for (var k = 7; k >= 2 * i - 1; k--) {
                document.write('*')
            }
            document.write('<br>') //换行
        }
</script>

10.打印出九九乘法表

<script>
//外层循环
for (var i = 1; i <= 9; i++) {
    //内层循环
    for (var j = 1; j <= i; j++) {
        document.write(i + 'x' + j + '=' + i * j + '&emsp;')
    }
    document.write('<br>')
}
</script>

丶满满

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ⅲ JavaScript循环结构

目录（一）程序三大结构（二）循环结构1.while 循环2.do while 循环3.for 循环（三）累加求和（四）跳转语句1.break关键字2.continue 关键字（五）双重for循环1.概念2.示例13.示例2（六）练习
复制链接

扫一扫