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字型变换练习

V字型变换练习