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>