前面學習了陣列與物件的組合用法，在資料存取相對方便，但如果是大筆資料去做存取時，使用迴圈就可以避免大量的程式碼，比如說今天的專案是小專案，是做兩間養雞場的母雞資料，那這時候只要使用陣列跟物件就可以快速地取得兩間的母雞資料，可是今天如果是要做全台灣的養雞場，假如說有 100 間以上，光是陣列跟資料要取得的寫法就會看到滿滿的 console.log...
這時候 for 迴圈就可以幫助在同性質的條件中，存取母雞的資料。
基本寫法：
for (var i = 0; i < array.length; i++) {
//使用 for 迴圈 (初始狀態；條件;更新內容)
console.log(i); //執行內容
}
- 初始狀態：可以自訂任何數字。
- 條件：設定要跑的條件長度或範圍。
- 更新內容：會依照給予的條件去跑該次數。
- for 後面的變數條件內容要用分號
";"隔開。
迴圈會判斷條件相符時開始執行，若條件不符就不會執行，如果跑完了也會停止執行。
來做一個綜合練習，會使用以下方法：
變數
innerHTML
for 迴圈
計算功能
建立一個 HTML 環境，這邊的 container 目的是讓畫面居中，為了讓九九乘法表呈現在 box 內，所以有設定了九個 box，
<body>
<div class="container">
<h1>九九乘法表</h1>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
設定兩個變數，a 為乘數， b 為被乘數，用陣列呈現資料，a 的乘數只有八個，原因是九九乘法表從 2 開始，
var a = [2, 3, 4, 5, 6, 7, 8, 9]; //乘數
var b = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //被乘數
var el = document.querySelectorAll(".box"); //選取全部的 box
var aLen = a.length;
// console.log(aLen); 結果為 8
var bLen = b.length;
// console.log(bLen); 結果為 9
在來使用 for 迴圈來計算乘數與被乘數，
for (var i = 0; i < aLen; i++) {
//乘數迴圈
var str = ""; // 預計將結果填入 str
for (var j = 0; j < bLen; j++) {
//被乘數迴圈
}
因為是要用 a*b，讓 b 在 a 裡面跑九次，創造出九九乘法表的效果，因為要兩者相乘後要有一個數值，所以設定 var str = ""，在計算結果後要丟進 str。
這個觀念很重要，要記起來。
再來就是要呈現九九乘法了，這時候來組標籤(變數加字串)，a 陣列乘上 b 陣列，等於 a、b 陣列相乘，當中相乘與等於的符號是為了在網頁上呈現的，所以標示為字串。
var count = a[i] + "*" + b[j] + "=" + a[i] * b[j]; //組字串
// console.log(count); 結果為九九乘法表
為了讓 str 完整呈現 從 2*1=1 計算到 2*9=18 ，這時候就使用 str 加總的功能，把所有的組合完成後，變成 <p> 標籤，丟回 str 裡面
str += "<div>" + count + "</div>"; //將結果套回 str
最後，就在 b 的迴圈裡呈現所有 a 變數中九九乘法表跑完的結果，並把這個結果透過剛剛變數 str 的設定，渲染到網頁上。
el[i].innerHTML = str; // 將 box 裡的乘數，透過 innerHTML 渲染於網頁
這樣就透過 JavaScript 的語法，完成了九九乘法表了！
codepen: https://codepen.io/hnzxewqw/pen/rNVWRdR
但是這樣會是一整排的數列，頁面會太長，為了讓畫面更好看，在 CSS 的 .box 中加入下方語法：
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 70px 40px;
使數列橫向排列，並且垂直對齊，斷行的部分也按照寬度做斷行，在 padding 到喜歡的效果即可！
iThome鐵人賽
看影片追技術