js的循环语句(遍历对象)

「爱情、让人受尽委屈。」 2022-09-09 12:44 370阅读 0赞

<!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>
        <button onclick="getElementById('demo').innerHTML=Date()">
          现在的时间是?
        </button>
        <p id="demo"></p>
        <button onclick="test()">点我</button>
        <span id="two" onmouseover="test2()">nihao</span>
        <h1>你好世界</h1>
        <input type="text" onkeydown="keydown()" />
        <img src="../img/1.jpg" alt="" width="120px" id="img" />
        <script>
          function test() {
            alert("说你爱我");
          }
    
          function test2() {
            console.log((document.getElementById("two").innerHTML = "世界"));
          }
          //   test2();
          function keydown() {
            var o = document.getElementById("img");
            o.style.width = "240px";
            alert("这个世界还好嘛");
          }
        </script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_19_color_FFFFFF_t_70_g_se_x_16]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]

<!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>
        <script>
          var i;
          person = { age: "23", name: "zhangsan", heigth: "187cm" };
          //这里输出的i是键
          for (i in person) {
            console.log(i);
            console.log(person[i]);
          }
        </script>
      </head>
      <body></body>
    </html>

<!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>
        <script>
          var size = [1, 2, 3, 4, 5, 6, 7]; //申明一个数组
    
          //for循环
          for (var i = 0; i < size.length; i++) {
            document.write(size[i] + " "); //数组元素
          }
          //遍历数组的长度就是和小于数组的个数是一样的效果，因为索引是从0开始，然后通过索引去取值。
          for (var i = 0; i < 7; i++) {
            document.write(size[i] + " "); //数组元素
          }
        </script>
      </head>
      <body></body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
![在这里插入图片描述][6bd273b9995646049389602fc9fe05d8.png]

<p>点击下面的按钮，循环遍历</p>
    <button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
    	var array = new Array();
    	var x;
    	var txt=""
    	array[0] = 1;
    	array[3] = 2;
    	array[4] = 3;
    	array[10] = 4;
    	for( x in array ){
    		alert(array[x]);     // 依次显示出 1 2 3 4
    	} 
    	alert(array.length);    // 结果是11
    	for( var i=0 ; i<4 ; i++){
    		alert(array[i]);     // 依次显示出 1 undefined undefined 2 
    	}
    	document.getElementById("demo").innerHTML = txt;
    }
    </script>

![在这里插入图片描述][e9f2b755af6648699dc88a3461c5c9bf.png]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
而且它不会继续遍历。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 10]

<!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>
        <script>
          var i;
          for (i = 0; i < 5; i++) {
            console.log(i);
            alert("我希望我可以活得久一点");
            list: {
              if (i == 3) {
                console.log("加油奥里给");
                break list;
              }
            }
          }
        </script>
      </head>
      <body></body>
    </html>

![在这里插入图片描述][d0eacb7f1353484abb40f2ad46e96c73.png]  
意思就是continue带和不带都只能在循环中，break带了标签以后还可以跳出代码块的循环。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 11]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_19_color_FFFFFF_t_70_g_se_x_16 1]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 12]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/66cd5adb0ba243f498fd275de5ef55aa.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGl1bGFuZzY4,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/44d01cc209d84194aba73877c6c1456b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/267c34072a9943bb9f1dc50f71472492.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/30d25b44df83421ab4765fd560d40776.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/32c00cec8dd949d9aa6302f4f7f47de6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGl1bGFuZzY4,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/ee651d8cb5a14bb7a44674c9885d2bb4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/76cb553252b64deab1cb70533e78af8d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/a2f969411a254fdba5cc8c140ecb9d5b.png
[6bd273b9995646049389602fc9fe05d8.png]: /images/20220829/f75d5d148889485c8287264e05a314d1.png
[e9f2b755af6648699dc88a3461c5c9bf.png]: https://img-blog.csdnimg.cn/e9f2b755af6648699dc88a3461c5c9bf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220829/8011d5c68012430698018925fd698d64.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220829/93a6903689bd4aa49fc49c0e083aa9bb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220829/742a764c63a1484089953079c681bdde.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220829/17eff9091dc44e92b25e1711f9eb585e.png
[d0eacb7f1353484abb40f2ad46e96c73.png]: /images/20220829/64c979cb84934579a4b44a1896692a94.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/89a227210b4a445a9625fa5f6619d196.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGl1bGFuZzY4,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_19_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/99900bfefbcb4ffc9c6a93bf3d318bb5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220829/7794b238631349efa4469cf99c45120c.png