JavaScript基础13 for循环 2 break与co
2018-01-12 本文已影响63人
0说
for循环的其他写法
1、
var i = 0;
for( ; i < 5 ; i++ ){ alert ( 5 )};
这里要空着 且 ；也要写
2、
var i = 0;
for( ; i < 5 ; ) {
这是里变化语句可以写在下面 要空着放着
alert( i );
i++;
}
可改写：
var i = 0;
while( i < 10 ){
alert ( i );
i++;
}
3、循环体保有一句的时候大括号可以不写
for( var i=0 ; i<5 ; i++) console.log( i );
while 在…期间
语法：
var i = 0;
while( 条件 ){
事件;
变化语句;
}
var i = 0;
while( i < 10 ){
alert ( i );
i++;
}
do{ } while() 先做什么再判断
语法：
var i = 0 ;
do{
事件;
}while( x<5 );
先执行代码：至少会执行一次再做判断；
例：
var x = 10;
do{
alert( x );
x++;
} while( x < 5 );
只弹一次 10 会先执行再来判断；
var x = 10;
while ( x < 5 ){
alert ( x );
x++;
}
不执行；
for里的break与continue
switch里的break，作用是表明这种情况结束；
for里的break作用是阻断该层for的执行（跳出循环）
continue跳过该次循环（也就是下面的代码不执行了），进入下一次的循环；
例：
break：
for( var x = 0 ; i < 10 ; i++){
docuement.write( x + '<br>');
if( x === 5 ){ 1
break; 2
} 3
} 4
5
就跳出循环了，就结束
continue:
for( var x = 0 ; i < 10 ; i++){
if( x === 5 ){ 1
continue; 2
} 3
docuement.write( x + '<br>'); 4
} 6
7
8
9
执行到5的时候跳过，执行再下来的循环
注意：用continue变化语句一定要放在for的括号里；
如果放在下面执行语句时会出现死循环；
例：
for( var i = 0 ; i < 10; ){
if( i === 5 ){
continue;
}
document.write( i + '<br>' );
i++;
}
按for的执行顺序执行到5的时候先执行 var 再执行 下面循环体 到 i = 5 的时候会跳循环体，执行括号里的 变化语句 （这里没有变化） i 一直是 5 一直做这循环，进入死循环；
双层for
例：
for( var i = 0; i < 5; i++ ){
for( var j = 0 ; j < 4 ; j++){
alert( '阿里' );
}
}
当 i = 0 时，里面的j执行 4次 0 1 2 3；
当 i = 1 时，里面的j执行 4次 0 1 2 3；
当 i = 2 时，里面的j执行 4次 0 1 2 3；
当 i = 3 时，里面的j执行 4次 0 1 2 3；
当 i = 4 时，里面的j执行 4次 0 1 2 3；
会弹出 20次的 阿里
利用打印日志形式： （ie8用以下不兼容，调试后记得删掉）
for( var i = 0; i < 5; i++ ){
for( var j = 0 ; j < 4 ; j++){
console.log( 'i = ' + i + ' j = '+j )
}
}
1
for循环的优化
for 最消耗性能
给50个LI设置背景
<script>
aLi = document.getElementsByTagName( 'li' );
console.time( 1 );
for(var i=0 ; i<aLi.length ; i++ ){ //这里每循环一次都要去 访问 aLi.length 总的访问了50次 就是与标签打了50次交道
aLi[i].style.backgroundColor = 'red';
}
console.timeEnd( 1 );//测试一下代码执行多少时间
console.time( 2 );
var length = aLi.length; //用一个变量把length存起来
for(var i=0 ; i<length ; i++ ){//这里只要访问上面的
aLi[i].style.backgroundColor = 'red';
}
console.timeEnd( 2 );//测试一下代码执行多少时间
</script>
下面执行时间秒杀上面
实例：
点击生成100个div
<style type="text/css">
ul li{
float: left;
list-style: none;
width: 20px;
height: 20px;
background: red;
margin: 10px 10px 0 0;
}
</style>
<button>点击生成100个</button>
<ul></ul>
<script>
var aBtn = document.getElementsByTagName ( 'button' );
var aUl = document.getElementsByTagName ( 'ul' );
aBtn[0].onclick = function (){
console.time(1) //测试时间
for( var i=0 ; i<100 ; i++){
aUl[ 0 ].innerHTML += '<li></li>';
}
console.timeEnd(1) //测试时间 可以测试出绘制100个盒子用了多久
}
</script>
2
可以看出浏览器绘制100个盒子用了 8ms
这个执行过程是一个绘制等于浏览器绘制了100次，最好的方法先把所有的li放在js里的变量存起放起来，再统一一次性绘制；
<script>
var aBtn = document.getElementsByTagName ( 'button' );
var aUl = document.getElementsByTagName ( 'ul' );
aBtn[0].onclick = function (){
var str = ''; //定义一个空字符串
console.time(1) //测试时间
for( var i=0 ; i<100 ; i++){
str += '<li></li>';
}
aUl[ 0 ].innerHTML += '<li></li>';
console.timeEnd(1) //测试时间 可以测试出绘制100个盒子用了多久
}
2
从而看出：最好放在在js里的变量然后再统一一次性绘制出来，减少一直修改页面的东西；消耗性能；
实例：
绘制出下面的图片
3
<style type="text/css">
ul li{
list-style: none;
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
font-weight: bold;
color: white;
}
ul{
padding: 0;
border: 1px dashed #000;
}
</style>
</head>
<body>
<button>点击生成100个</button>
<ul></ul>
<script type="text/javascript">
var aBtn = document.getElementsByTagName ( 'button' );
var aUl = document.getElementsByTagName ( 'ul' );
aBtn[0].onclick = function (){
console.time(1);
var str = '';
var num = 9; //这里用定义长度 为了扩展 这个是奇数的算法
for( var i=0 ; i<num ; i++){
var mLeft = i <=num/2 ? i*50 : ( num-i-1 )*50; //判断中间折回来用哪个计算方法
str += '<li style="margin-left:' + mLeft +'px">' + i + '</li>'; //利用margin-left来改变盒子的位置
}
aUl[0].innerHTML = str;
console.timeEnd(1);
}
</script>
上面margin-left的算法
margin-left算法
<style type="text/css">
ul{
position: relative;
padding: 0;
margin: auto;
border: 1px dashed #000;
}
ul li{
position: absolute;
list-style: none;
width: 50px;
height: 50px;
background: red;
line-height: 50px;
text-align: center;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<button>点击生成100个</button>
<ul>
<!-- <li></li>
<li></li>
<li></li> -->
</ul>
<script type="text/javascript">
var aBtn = document.getElementsByTagName ( 'button' );
var aUl = document.getElementsByTagName ( 'ul' );
aBtn[0].onclick = function (){
console.time(1);
var str = '';
var num = 5; //这里用定义长度 为了扩展 这个是奇数的算法
aUl[0].style.width = (num/2+0.5)*50 + 'px';
aUl[0].style.height = num*50 + 'px';
for( var i=0 ; i<num ; i++){
var mLeft = i <=num/2 ? i*50 : ( num-i-1 )*50; //判断中间折回来用哪个计算方法
str += '<li style="right:' + mLeft +'px;'+ 'top:' + i*50 +'px;">' + i + '</li>'; //利用定位right top来改变盒子的位置
}
aUl[0].innerHTML = str;
console.timeEnd(1);
}
</script>
效果
image.png
