JS基礎入門篇（三）— for循環，取餘，取整。

時間 2019-12-06

原文原文鏈接

1.for循環

1.for的基本簡介html

做用:
        根據必定的條件，重複地執行一行或多行代碼

    語法:
        for( 初始化 ; 判斷條件 ; 條件改變 ){
            代碼塊
        }

2.for循環的執行順序性能

<body>
    <script>    
        for( var a = 0;a < 5;a++ ){        
            alert(1);            
        }
        alert(2);
//------------------------------------------
//        1-初始化:                         var a = 0;
//        2-判斷條件:                         a < 5
//        3-若是條件成立,執行 代碼塊 :         alert(1);
//            條件不成立,跳出 for 循環(for循環結束)
//        4-條件改變:                         a++

//        1- (2-3-4-)( 2-3-4-)(2-3-4-)...2-判斷不成立 -結束for，執行alert(2);
//------------------------------------------

    </script>
</body>

2.利用for循環生成html內容的性能問題

如下代碼做用，利用for循環生成1000個lispa

<script>
        console.time("a");
        var list = document.getElementById("list");
        for( var i = 0;i < 1000;i++ ){
            list.innerHTML = list.innerHTML+ "<li>"+ i +"</li>";
        }
        console.timeEnd("a");//計算生成1000個li所需時間。
    </script>

所需時間：是大約1177毫秒。
code

分析：須要這麼長時間的緣由是，如下代碼形成的，由於每次都要從新讀list中的內容，而後增添一個li。這形成性能太低。若是要添加100000個li，須要耗時更長時間。htm

list.innerHTML = list.innerHTML+ "<li>"+ i +"</li>";

性能改進：圖片

<body>
    <ul id="list"></ul>
    <script>
        console.time("a");
        var list = document.getElementById("list");
        var str = "";//聲明並賦值一個空字符串
        
        for( var i = 0;i < 1000;i++ ){
            str = str+ "<li>"+ i +"</li>";//統一往str塞完了li
        }
        list.innerHTML = str;//在給list
        
        console.timeEnd("a");
    </script>
</body>

所用時長：只用了2毫秒。
ip

3.取餘

1. % 這個運算符主要用來取到兩數相除的餘數。字符串

<body>
        <script>
            //打印兩數相除結果
            console.log( 7/3 );//2.3333333333
            //打印餘數
            console.log( 7%3 );//1
            console.log( 4%2 );//0
            console.log( 11%7 );//4
            console.log( 3%7 );//3
        </script>
</body>

2. % 的重要使用
總結規律：%後的結果，取餘都會小於除數。get

<body>
        <script>
            for( var i=0;i<20;i++ ){
                console.log( i%5 );
            }
        </script>
</body>

結果爲：都小於5，以後for循環條件的判斷有時候會須要。
it

4./ 和Math.floor（）；

/，就是加減乘除中的除法在計算機中的符號。
Math.floor(); 是向下取整，取到的數總比原始值小。

<body>
        <script>
            console.log( 7/3 );//2.333333333
            console.log( Math.floor( 7/3 ) );//2
            
            console.log( Math.floor( 3.3333 ) );//3
            console.log( Math.floor( 3.9 ) );//3
            console.log( Math.floor( 3.0 ) );//3

            console.log( Math.floor( -1.2 ) );//-2
            console.log( Math.floor( -1.6 ) );//-2
            
            
        </script>
</body>

5.V字型變換練習

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。