JavaScript013，for循环和for in循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript 循环</title>
    </head>
    <body>
        <h3>for循环 和 for/in循环(circulate:循环)</h3>
        <p style="color: red;">用for循环输出99乘法表(用到了循环嵌套)</p>
        <button type="button" onclick="myFor()">点我</button><!-- 点击按钮执行函数 -->
        
        <p>----------------------------------</p>
        
        <p style="color: red;">for/in循环遍历对象属性和数组</p>
        <button type="button" onclick="myForIn()">点我</button><!-- 点击按钮执行函数 -->
        </br>
        对象属性：<p id="demo"></p>
        数组：<p id="demo1"></p>
        
        <script type="text/javascript">
            function myFor(){
                //定义三个变量用来存放乘数 被乘数 积
                var a,b,num;
                
                /* 1.首先初始化变量a,
                 * 2.a<=9满足条件，进入循环；*/
                for(a = 1; a <= 9; a++){/* 9.回来计算a++,得到a=2,判断a<=9条件满足，执行第4步(此时b的值为2)依次循环直至结束 */
                    
                    /* 3.初始化变量b；
                     * 4.b<=a(a的值由外循环带进来，初始为1)，条件满足；*/
                    for(b = 1; b <= a; b++){/* 7.返回来计算b++(等同于b+1),得到b=2,然后再判断b<=a;条件不成立，跳出内循环 */
                        
                        /* 5.执行计算公式计算结果 */
                        num = b *  a;
                        
                        /* 6.输出计算结果 */
                        document.write("<span>" + b + " * " + a + " = " +num + " | " + "</span>");
                    }
                    /* 8.内循环跳出后到这里执行换行标签，然后执行9 */
                    document.write("</br>");
                }
            }
            
            function myForIn(){
                var prt = "";//存放输出结果
                var prt1 = "";//存放输出结果
                var dog = {/* 创建一个对象 dog 并赋予属性 */
                    dName:"金毛",
                    dGender:"公",
                    dAge:2
                };
                var arr = [1,2,3,5,4];/* 创建一个数组 */
                
                for(var x in dog){//用for in去遍历对象中的每一个属性并输出
                    prt = prt + dog[x] + " ";//遍历第一次把dName的值赋给prt,
                    //第二次拿到dGender的值,prt此时等于"金毛",再加上"公",
                    //第三次把dAge也拿到; 注意:此时的+号是用作字符串连接符,而不是运算符
                    document.getElementById("demo").innerHTML = prt;//最后输出prt;
                }
                for(var y in arr){
                    prt1 = prt1 + arr[y] + " ";/* 遍历数组也是一样的道理，挨个遍历一遍，然后输出 */
                    document.getElementById("demo1").innerHTML = prt1;
                }
            }
            
            /* 遗留问题：for in是每遍历一个属性值就重头循环一次，还是只需要进入循环一次就输出结果？ */
        </script>
    </body>
</html>
JavaScript013，for循环和for in循环

猜你喜欢
