非零基础自学前端最后一遍二 JavaScript基础 6 JavaScript循环语句 6.7 循环的嵌套-理解和案例练习

红太狼 2024-03-24 12:40 41阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  6 JavaScript循环语句
         *   *  6.7 循环的嵌套-理解和案例练习
             *   *  6.7.1 for循环的嵌套

![在这里插入图片描述][89d7a6da70d04b2c88586d83c924de86.png_pic_center]

#### 二 JavaScript基础 ####

#### 6 JavaScript循环语句 ####

##### 6.7 循环的嵌套-理解和案例练习 #####

###### 6.7.1 for循环的嵌套 ######

*  什么是循环的嵌套呢？（日常开发使用不算多，在一些算法中比较常见）
    
     *  在开发中，某些情况下一次循环是无法达到目的的，我们需要循环中嵌套循环；
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        
        <body>
        
          <script>
        
            // for循环的嵌套: 循环中执行体, 里面又嵌套了循环
            for (var i = 0; i < 10; i++) {
                
        
              console.log("i开始执行:", i)
        
              for (var j = 0; j < 3; j++) {
                
                console.log("执行j循环")
              }
        
              console.log("i结束执行:", i)
            }
        
          </script>
        
        </body>
        
        </html>
    
    渲染结果
    
    ![在这里插入图片描述][b83ae6da3b184d498f3a37cedd90cfb2.png_pic_center]
 *  我们通过for循环的嵌套来完成一些案例：
    
     *  案例一：在屏幕上显示包含很多❤的矩形
        
        ![在这里插入图片描述][c4ba9e5f6f2c483e874b7c4fe878cd36.png_pic_center]
        
        实现代码：
        
            <!DOCTYPE html>
            <html lang="en">
            
            <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Document</title>
              <style>
                div {
                      
                  color: red;
                }
              </style>
            </head>
            
            <body>
              <script>
            
                // 在屏幕上显示一个❤
                // document.write("❤")
            
                // 案例一: 
                for (var i = 0; i < 9; i++) {
                      
                  document.write("<div>")
            
                  for (var m = 0; m < 10; m++) {
                      
                    document.write("❤ ")
                  }
            
                  document.write("</div>")
                }
            
              </script>
            
            </body>
            
            </html>
        
        运行结果
        
        ![在这里插入图片描述][3791215bb5ed4f01acf8416072b91c41.png_pic_center]
     *  案例二：在屏幕上显示一个三角的❤图像
        
        ![在这里插入图片描述][f85daf42fba642e1a189c3097580e4e2.png_pic_center]
        
        实现代码：
        
            <!DOCTYPE html>
            <html lang="en">
            
            <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Document</title>
            </head>
            
            <body>
            
              <script>
            
                for (var i = 0; i < 6; i++) {
                      
                  document.write("<div>")
            
                  for (var m = 0; m < i + 1; m++) {
                      
                    document.write("❤ ")
                  }
            
                  document.write("</div>")
                }
            
              </script>
            
            </body>
            
            </html>
        
        运行结果
        
        ![在这里插入图片描述][47bf2bb105d844199520d03764af94a1.png_pic_center]
     *  案例三：在屏幕上显示一个九九乘法表
        
        ![在这里插入图片描述][d4a140b134dc46f3aeac7c9b3cbbf91f.png_pic_center]
        
        实现代码【美化版本】
        
            <!DOCTYPE html>
            <html lang="en">
            
            <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Document</title>
              <style>
                table {
                      
                  border-collapse: collapse;
                }
            
                td {
                      
                  padding: 8px 16px;
                  border: 1px solid orange;
                  color: red;
                }
              </style>
            </head>
            
            <body>
            
              <script>
            
                document.write("<table>")
            
                for (var i = 0; i < 9; i++) {
                      
                  document.write("<tr>")
            
                  for (var m = 0; m < i + 1; m++) {
                      
                    var a = m + 1
                    var b = i + 1
                    var result = (m + 1) * (i + 1)
                    document.write(`<td>${ a}*${ b}=${ result}</td>`)
                  }
            
                  document.write("</tr>")
                }
            
                document.write("</table>")
              </script>
            
            </body>
            
            </html>
        
        运行结果
        
        ![在这里插入图片描述][b345a8eb91b847f9848c175653c6de6e.png_pic_center]

[89d7a6da70d04b2c88586d83c924de86.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b678939388434d5fbb84515de861163c.png
[b83ae6da3b184d498f3a37cedd90cfb2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/421f32665f074798905f559cd57e3deb.png
[c4ba9e5f6f2c483e874b7c4fe878cd36.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d9d1fd8be4de40328e1f5c2fefb84e6a.png
[3791215bb5ed4f01acf8416072b91c41.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/dd5753701bfa4c68b5619b5a08f66a74.png
[f85daf42fba642e1a189c3097580e4e2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7c661f557fad40b38cd31cbaf5916682.png
[47bf2bb105d844199520d03764af94a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e6f16718713443e39b01aae23566590c.png
[d4a140b134dc46f3aeac7c9b3cbbf91f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/360cc66742a84978b2d6afa422848994.png
[b345a8eb91b847f9848c175653c6de6e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8428256c479f42b8a47ba39e302b7b52.png