iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0
Modern Web

網頁技術探索:30天的前端學習系列 第 29

DAY29 JS for迴圈及其應用(array 及 if)

  • 分享至 

  • xImage
  •  

for 迴圈的寫法

基本寫法:

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

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

九九乘法表

學 JavaScript 必寫「九九乘法表」
來做一個綜合練習,會使用以下方法:

  • 變數
  • 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++) {
    //被乘數迴圈
    }

為什麼 b 的迴圈會包在 a 裡面呢?
因為是要用 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 完整呈現 從 21=1 計算到 29=18 ,這時候就使用 str 加總的功能,把所有的組合完成後,變成<p>標籤,丟回 str 裡面

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

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

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

這樣就透過 JavaScript 的語法,完成了九九乘法表了!

透過迴圈來取得陣列裡的資料

當得到龐大的陣列資料時,透過迴圈來存取資料會輕鬆又省事,所以陣列跟迴圈常常會搭配使用。

倘若今天要查詢兩間店家的老闆姓名,拿到兩個陣列資料,程式碼如下:

var shops = [
  {
    captain: "Tim",
    coke: 10,
    cookie: 25,
    egg: 170,
  },
  {
    captain: "Min",
    coke: 77,
    cookie: 44,
    egg: 58,
  },
];
//陣列資料

之前學過透過陣列存取資料的方法為:

console.log(shops.length); //結果會得到 2

不過有時候在工作上得到資料無法預期有多少的資料,可以用下方寫法找出有多少筆資料:

var captainTotal = shops.length;
console.log(captainTotal); //結果會得到 2

使用迴圈存取陣列資料
透過迴圈存取陣列資料,程式碼如下:

var shops = [
  {
    captain: "Tim",
    coke: 10,
    cookie: 25,
    egg: 170,
  },
  {
    captain: "Min",
    coke: 77,
    cookie: 44,
    egg: 58,
  },
];
//陣列資料

for (i = 0; i < captainTotal; i++) {
  console.log(shops[0].captain);
  //帶入陣列長度的變數。
}

但迴圈這樣帶會有一個問題,上面得知 captainsTotal 的資料長度是 2,但是這樣迴圈會直接抓兩次第一個陣列的 captain 兩次,如下圖:

https://ithelp.ithome.com.tw/upload/images/20251013/201785164b3puvBsOa.png

但今天的目標是要把兩個物件內的店長姓名找出來,所以會變成下方程式碼:

for (i = 0; i < captainTotal; i++) {
  console.log(shops[i].captain);
  //帶入陣列長度的變數。
  //陣列裡改成 i
}

因為 captainTotal 資料有兩筆,所以迴圈會跑兩次,要記得在陣列中起始的數字為 0,不是 1,所以會跑兩次的原因是這樣。
這樣就會找到兩個物件中店長的名字,如下方畫面:
https://ithelp.ithome.com.tw/upload/images/20251013/20178516nOtUWQ7xZL.png

使用if在多樣本取得限定條件的值

假設有三間賣炸雞的餐廳要被評鑑銷售量,套餐要超過 100 筆訂單的就可獲得獎品。
三家炸雞店的資料如下:

var shops = [
  {
    captain: "Tim",
    chicken: 150,
    coke: 200,
    fries: 70,
    set: 99,
  },
  {
    captain: "Min",
    chicken: 99,
    coke: 77,
    fries: 55,
    set: 101,
  },
  {
    captain: "Mike",
    chicken: 105,
    coke: 111,
    fries: 75,
    set: 130,
  },
];
//陣列資料

因為只有三筆資料,可以很輕易地用眼睛看出來誰的套餐超過 100 套,但如果資料一多,就要使用迴圈了。
先用 length 查一下資料長度:

var setTotal = shops.length;
console.log(setTotal); //結果會得到 3

使用迴圈來找超過一百套的店家吧!

for (i = 0; i < setTotal; i++) {
  if (shops[i].set > 100) {
    console.log(shops[i].captain + "的套餐在本月賣超過 100 套,以資鼓勵");
  }
  1. 建立迴圈,從第一筆資料找起,條件為當變數小於 setTotal 資料數
  2. 使用 if,在 shops 中,找到 set 套餐大於 100 套的店家。
  3. 找到這些店長的名字。

畫面結果如下:
https://ithelp.ithome.com.tw/upload/images/20251013/20178516GJIsjTmBfk.png


上一篇
DAY28 JS 控制判斷
下一篇
DAY30 JS for 迴圈,i++、加總、break 的使用
系列文
網頁技術探索:30天的前端學習30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言