JS基础入门篇(三)— for循环,取余,取整。

1.for循环

1.for的基本简介

    作用:
        根据一定的条件,重复地执行一行或多行代码

    语法:
        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个li

<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毫秒。
图片描述

分析:需要这么长时间的原因是,以下代码造成的,因为每次都要重新读list中的内容,然后增添一个li。这造成性能过低。如果要添加100000个li,需要耗时更长时间。

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毫秒。
图片描述

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. % 的重要使用
总结规律:%后的结果,取余都会小于除数。

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

结果为:都小于5,之后for循环条件的判断有时候会需要。
图片描述

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

猜你喜欢

转载自www.cnblogs.com/jlfw/p/11921620.html