iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
Modern Web

JavaScript 從零開始系列 第 22

JavaScript 從零開始 - Day22- for 迴圈 + if 的使用練習

JavaScript Note

之前學過 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/20191204/20119300EXa4P0aumU.png


改寫

感謝 Kuro 老師的提點,最後篩選出來的改成 ES6 的 方式來寫會更有可讀性,先透過 filter 篩選出超過 100 套的店家,再用 forEach 取出這些店家的店長!

shops.filter( shops => shops.set > 100)
     .forEach(shops => console.log(shops.captain + "的套餐在本月賣超過 100 套,以資鼓勵") )

結語

  1. 練習 JS 至今,要建立一些情境才能更明確的來練習該內容,會比較有方向,也練習如果未來面對開發的需求,會遇到的條件,滿有意思的!
  2. 陣列與物件很常被使用,要多多練習。

上一篇
JavaScript - 從零開始 - Day21 - for 迴圈 + array 陣列的使用方法
下一篇
JavaScript - 從零開始 - Day23 - for 迴圈,i++、加總、break 的使用
系列文
JavaScript 從零開始40

1 則留言

0
Kuro Hsu
iT邦新手 3 級 ‧ 2020-09-22 13:32:27

以你的情境來說,先用 filter 過濾陣列,再用 forEach 逐一輸出可讀性會更好

shops.filter( s => s.set > 100)
     .forEach(s => console.log(s.captain + "的套餐在本月賣超過 100 套,以資鼓勵") )
Tim Hsu iT邦新手 4 級 ‧ 2020-09-23 11:13:15 檢舉

感謝老師回覆!!

我要留言

立即登入留言