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毫秒。
JS基础入门篇(三)— for循环,取余,取整。

分析:需要这么长时间的原因是,以下代码造成的,因为每次都要重新读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毫秒。
JS基础入门篇(三)— for循环,取余,取整。

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循环条件的判断有时候会需要。
JS基础入门篇(三)— 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字型变换练习

上一篇:Ext.Net 布局


下一篇:day04 一个简单的代码优化案例