JavaScript迴圈語句++
JavaScript迴圈語句++
1迴圈巢狀
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
console.log(i,j);
}
}
for迴圈執行過程：1.變數初始化；2.條件判斷；3.執行程式碼；4.變數更新。上述程式碼中，外部的for迴圈1次，內部的for迴圈10次。
2迴圈跳轉
2.1 break
break：//退出當前整個迴圈
1.只能在迴圈語句中使用；
2.迴圈體中位於break後的語句不會被執行；
3.在多層迴圈巢狀中，一個break語句只向外跳一層；
2.2 continue
continue：//跳過本次迴圈，繼續下一次迴圈
1.只能在迴圈語句中使用，
2.結束本次迴圈（即跳過迴圈體中下面尚未執行的程式碼），接著執行下次迴圈。
2.3 label標識
label：給迴圈程式碼新增標識。
break和continue後如果帶標識，則跳到標識所在迴圈。
例： wrap: for(){
for(){
If(){
break wrap;
}
}
}
則終止的為for迴圈。
3 案例
3.1 生成動態表格
<label for="row">行：</label>
<input type="text" id="row">
<label for="col">列：</label>
<input type="text" id="col">
<button onclick="createTable()">生成表格</button>
<div id="output"></div>
<!-- <table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table> -->
<script>
/*
思路：
1) 獲取元素
2）點選按鈕生成表格
* 獲取輸入的值
* 根據輸入的行數拼接表格html結構
* 把拼接的html解構寫入#output
*/
// 1) 獲取元素
var row = document.getElementById('row');
var col = document.getElementById('col');
var output = document.getElementById('output');
// 宣告一個函式
// 用於生成表格程式碼
function createTable(){
// * 獲取輸入的值
var _row = row.value;
var _col = col.value;
// 用儲存table的html結構
var tableHtml = '<table><tbody>';
// 外層迴圈控制行
for(var i=1;i<=_row;i++){
tableHtml += '<tr>';
// 顯示行號
tableHtml+='<td>'+i+'</td>';
// 內層迴圈控制列
for(var j=1;j<=_col;j++){
tableHtml+='<td>單元格'+i+j+'</td>';
}
// 編輯/刪除
tableHtml+='<td><button>編輯</button><button>刪除</button></td>';
// 閉合tr
tableHtml += '</tr>';
}
// 閉合table,tbody標籤
tableHtml += '</tbody></table>';
console.log(tableHtml);
output.innerHTML=tableHtml;
}
</script>
</body>
</html>
3.2 字串拼接、轉換數字
var number1 = document.getElementById('number1');
var number2 = document.getElementById('number2');
function count(){
// 提取到input中的值，賦給a,n，不加Number是要a,n的值為字串
var a = number1.value;
var n = number2.value;
// 給總和 total賦予初始值為轉換為數字的a
var total = Number(a);
// 給j賦予初始值a，為字串；j為每次相加時數位最多的那個數
var j = a;
// i<n會進行隱式轉換，將n從字串轉換為數字
for(var i = 1;i < n;i++){
// 因為j與a都為字串，所以此處為拼接，而非相加
j += a;
// 將j從字串轉換為數字進行疊加
total += Number(j);
// console.log(j);
}
// console.log(total);
output.innerHTML = total;
}