提姆寫程式

0%

JS 筆記 - 認識 for 迴圈

發表於 更新於 分類於 Disqus：
for 迴圈的基本認識與一定要寫的九九乘法表

JavaScript Note

為什麼要用 for 迴圈

前面學習了陣列與物件的組合用法，在資料存取相對方便，但如果是大筆資料去做存取時，使用迴圈就可以避免大量的程式碼，比如說今天的專案是小專案，是做兩間養雞場的母雞資料，那這時候只要使用陣列跟物件就可以快速地取得兩間的母雞資料，可是今天如果是要做全台灣的養雞場，假如說有 100 間以上，光是陣列跟資料要取得的寫法就會看到滿滿的 console.log…

這時候 for 迴圈就可以幫助在同性質的條件中，存取母雞的資料。

for 迴圈的寫法

基本寫法：

1
2
3
4
for (var i = 0; i < array.length; i++) {
  //使用 for 迴圈 (初始狀態；條件;更新內容)
  console.log(i); //執行內容
}
  1. 初始狀態：可以自訂任何數字。
  2. 條件：設定要跑的條件長度或範圍。
  3. 更新內容：會依照給予的條件去跑該次數。
  4. for 後面的變數條件內容要用分號 ";" 隔開。

迴圈會判斷條件相符時開始執行，若條件不符就不會執行，如果跑完了也會停止執行。

學 JavaScript 必寫「九九乘法表」

來做一個綜合練習，會使用以下方法：

變數
innerHTML
for 迴圈
計算功能

建立一個 HTML 環境，這邊的 container 目的是讓畫面居中，為了讓九九乘法表呈現在 box 內，所以有設定了九個 box，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 開始，

1
2
3
4
5
6
7
8
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 迴圈來計算乘數與被乘數，

1
2
3
4
5
6
for (var i = 0; i < aLen; i++) {
  //乘數迴圈
  var str = ""; // 預計將結果填入 str
  for (var j = 0; j < bLen; j++) {
    //被乘數迴圈
    }

為什麼 b 的迴圈會包在 a 裡面呢?

因為是要用 a*b，讓 b 在 a 裡面跑九次，創造出九九乘法表的效果，因為要兩者相乘後要有一個數值，所以設定 var str = ""，在計算結果後要丟進 str。

這個觀念很重要，要記起來。

再來就是要呈現九九乘法了，這時候來組標籤(變數加字串)，a 陣列乘上 b 陣列，等於 a、b 陣列相乘，當中相乘與等於的符號是為了在網頁上呈現的，所以標示為字串。

1
2
var count = a[i] + "*" + b[j] + "=" + a[i] * b[j]; //組字串
// console.log(count); 結果為九九乘法表

為了讓 str 完整呈現 從 2*1=1 計算到 2*9=18 ，這時候就使用 str 加總的功能，把所有的組合完成後，變成 <p> 標籤，丟回 str 裡面

1
str += "<div>" + count + "</div>"; //將結果套回 str

最後，就在 b 的迴圈裡呈現所有 a 變數中九九乘法表跑完的結果，並把這個結果透過剛剛變數 str 的設定，渲染到網頁上。

1
el[i].innerHTML = str; // 將 box 裡的乘數，透過 innerHTML 渲染於網頁

這樣就透過 JavaScript 的語法，完成了九九乘法表了！

codepen: https://codepen.io/hnzxewqw/pen/rNVWRdR

優化

但是這樣會是一整排的數列，頁面會太長，為了讓畫面更好看，在 CSS 的 .box 中加入下方語法：

1
2
3
4
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 70px 40px;

使數列橫向排列，並且垂直對齊，斷行的部分也按照寬度做斷行，在 padding 到喜歡的效果即可！