for循環(huán)的其他寫法
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枣察、循環(huán)體保有一句的時候大括號可以不寫
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 );
先執(zhí)行代碼：至少會執(zhí)行一次再做判斷；
例：
var x = 10;
do{
alert( x );
x++;
} while( x < 5 );
只彈一次 10 會先執(zhí)行再來判斷燃逻；
var x = 10;
while ( x < 5 ){
alert ( x );
x++;
}
不執(zhí)行序目；
for里的break與continue
switch里的break，作用是表明這種情況結(jié)束伯襟；
for里的break作用是阻斷該層for的執(zhí)行（跳出循環(huán)）
continue跳過該次循環(huán)（也就是下面的代碼不執(zhí)行了）猿涨，進入下一次的循環(huán)；
例：
break：
for( var x = 0 ; i < 10 ; i++){
docuement.write( x + '<br>');
if( x === 5 ){ 1
break; 2
} 3
} 4
5
就跳出循環(huán)了姆怪，就結(jié)束
continue:
for( var x = 0 ; i < 10 ; i++){
if( x === 5 ){ 1
continue; 2
} 3
docuement.write( x + '<br>'); 4
} 6
7
8
9
執(zhí)行到5的時候跳過叛赚，執(zhí)行再下來的循環(huán)
注意：用continue變化語句一定要放在for的括號里；
如果放在下面執(zhí)行語句時會出現(xiàn)死循環(huán)稽揭；
例：
for( var i = 0 ; i < 10; ){
if( i === 5 ){
continue;
}
document.write( i + '<br>' );
i++;
}
按for的執(zhí)行順序執(zhí)行到5的時候先執(zhí)行 var 再執(zhí)行 下面循環(huán)體 到 i = 5 的時候會跳循環(huán)體俺附，執(zhí)行括號里的 變化語句 （這里沒有變化） i 一直是 5 一直做這循環(huán)，進入死循環(huán)溪掀；
雙層for
例：
for( var i = 0; i < 5; i++ ){
for( var j = 0 ; j < 4 ; j++){
alert( '阿里' );
}
}
當 i = 0 時昙读，里面的j執(zhí)行 4次 0 1 2 3；
當 i = 1 時膨桥，里面的j執(zhí)行 4次 0 1 2 3；
當 i = 2 時唠叛，里面的j執(zhí)行 4次 0 1 2 3只嚣；
當 i = 3 時，里面的j執(zhí)行 4次 0 1 2 3艺沼；
當 i = 4 時册舞，里面的j執(zhí)行 4次 0 1 2 3；
會彈出 20次的 阿里
利用打印日志形式： （ie8用以下不兼容障般，調(diào)試后記得刪掉）
for( var i = 0; i < 5; i++ ){
for( var j = 0 ; j < 4 ; j++){
console.log( 'i = ' + i + ' j = '+j )
}
}
1
for循環(huán)的優(yōu)化
for 最消耗性能
給50個LI設置背景
<script>
aLi = document.getElementsByTagName( 'li' );
console.time( 1 );
for(var i=0 ; i<aLi.length ; i++ ){ //這里每循環(huán)一次都要去 訪問 aLi.length 總的訪問了50次 就是與標簽打了50次交道
aLi[i].style.backgroundColor = 'red';
}
console.timeEnd( 1 );//測試一下代碼執(zhí)行多少時間
console.time( 2 );
var length = aLi.length; //用一個變量把length存起來
for(var i=0 ; i<length ; i++ ){//這里只要訪問上面的
aLi[i].style.backgroundColor = 'red';
}
console.timeEnd( 2 );//測試一下代碼執(zhí)行多少時間
</script>
下面執(zhí)行時間秒殺上面
實例：
點擊生成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
這個執(zhí)行過程是一個繪制等于瀏覽器繪制了100次调鲸，最好的方法先把所有的li放在js里的變量存起放起來，再統(tǒng)一一次性繪制挽荡；
<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里的變量然后再統(tǒng)一一次性繪制出來藐石，減少一直修改頁面的東西；消耗性能定拟；
實例：
繪制出下面的圖片
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; //這里用定義長度 為了擴展 這個是奇數(shù)的算法
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; //這里用定義長度 為了擴展 這個是奇數(shù)的算法
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
