JavaScript 小學 — for 迴圈

Jordan Tseng

Published in

JordanTTCDesign

7 min readDec 8, 2020

為什麼要用迴圈呢？

一般資料是以陣列方式儲存，而在陣列就會有很多筆資料，舉例來說要顯示一整個工廠員工名單一百人，那要單獨寫到什麼時候？超級無敵累人的啊，效率也不高～

console.log(factory.worker[0].name);
console.log(factory.worker[1].name);
console.log(factory.worker[2].name);
console.log(factory.worker[3].name);
...

這時候就是要用迴圈讓電腦自己幫我們寫摟，所以讓我們來學迴圈吧！

迴圈有很多種，我們先以最基本的 for 迴圈開始～

for迴圈的架構是：for ()中有三個值依序為：1. 初始狀態 2.條件 3.程式跑完執行之變動

for(let i=0 ; i<3 ; i++){
//重複程式碼
}

迴圈可以重複執行固定程式碼，迴圈會先檢測條件，如果條件為 true，便會執行程式碼；接著條件繼續被檢測、程式碼繼續執行，直到條件為 false 為止，所以搭配上面範例是這樣：

迴圈一開始將 i 變數指定為數字 0
定義當條件 i<3 條件滿足時，才會執行 {} 程式碼
每次當執行 for中區塊的語句執行後，即會執行最後 i++，又輪迴一次

記得之前講到 var 和 let 時，有提到在 for 迴圈中，用 var 是會產生全域變數的喔，而且如果有用到 setTimeout() 或是其他像需要觸發的功能，也會讓變數累積最後一次產生結果，所以再次強調用 let 比較好喔～可以看看下面網址用兩種宣告的差異

陣列與for迴圈的交流

搭配 for迴圈快速檢查陣列資訊，可以先宣告一個變數= 陣列.length 得知陣列有多少筆資料，再把 i<陣列長度 就可以把所有資料全部run過一遍拉🤟～

var factory = [
  {
    worker: "Jordan",
    salary: 88000
  },
  {
    worker: "Zoe",
    salary: 80000
  },
	{
    worker: "Yui",
    salary: 10000
  },
	{
    worker: "Alan",
    salary: 10000
  }
];var total=factory.length;
for(let i =0 ; i<total;i++){
  if(factory[i].salary>40000){
    console.log(factory[i].worker)
  }
}

會不會很疑惑剛剛的 i++ 是什麼？😅

這就是一種縮寫拉～來看看例子就很容易懂：

i++ → i=i+1

i+=2 → i=i+2

i-=2 → i=i-2

For迴圈和Break的使用

有時候我們並不需要把全部程式碼都跑完，可能我們只是需要找到符合資格的第一筆資料即可，例如我想買 10瓶可樂，我只要去離我最近並且有超過10瓶可樂庫存的店家，並不用每一家都去。這時候我們就會用 break 來讓指令停止並跳出迴圈。

var storesTotal= stores.length;
for(var i=0; i<storesTotal;i++){
  if(stores[i].coke>10){
    console.log(stores[i].name+'可樂夠多，我可以買!');
    stores[i].coke-=10;
    console.log(stores[i].name+'的可樂剩下'stores[i].coke+'瓶');
    break;
  }
}

JSON格式

輕量級的資料交換格式，前面說到資料傳遞，就是可以利用JSON來傳，可以把它想成就是👉js的物件，不同情況時也有可能直接是陣列呈現：

var obj = {
    name : 'TaipeiGoverment',
    workersNumber : 10,
    workers : [ { name : 'Jordan', age : 28},{ name : 'Zoe', age : 25},{ name : 'Yui', age : 3}... ]
};

我們要練習 JSON 可以找一些政府的 openData 資料庫，要記得找 🤩JSON格式，其他像是CSV就要另外轉(這裡附上網址)。

我們一開始打開JSON網址會是長這樣 → 超難看懂。

這時候我們先安裝一個google外掛 JSON VIEW ，就會轉變成我們比較容易閱讀的格式摟🤓🤓～

{
    "PRGID": 31642,
    "PRGNAME": "藝術市集",
    "PRGACT": "高雄市政府文化局",
    "PRGDATE": "2021/04/25",
    "PRGSTIME": "1600",
    "PRGETIME": "2130",
    "ORGNAME": "高雄市文化中心",
    "PRGPLACE": "藝術大道",
    "PRGAG": "通過高雄街頭藝人認證者",
    "PRGCONT": "2225136轉8911",
    "PRGTICKET": "免票",
    "TICKETSYSURL": "",
    "ITEMDESC": "藝術市集目前每週於週六、日16:00-21:30舉行，平約一天約吸引2-3千人前來觀賞，活動集結全國各地的手工創意好手，展示的內容多樣，包括麵包花藝、彩繪皮件、時尚金工創作、玻璃藝術、手工創作藝品、鋁線藝術、軟陶飾品、陶製品、布飾品、手工皂&hellip;等。「藝術市集」除了希望提供手工創意家有一個恣意展演的空間及與民眾對話的平台，也藉此鼓勵市民走出戶外接觸藝文活動，豐富市民精神生活。",
    "IMAGE1": "",
    "IMAGE2": ""
  },

先說一下其實在拿資料時最好是用原本沒整理過的型態會比較好，避免外掛轉換時漏掉什麼東西，外掛只是用來閱讀資料用的。

那接下來要怎麼把 open data 資料撈到 js 中呢？

我們先用簡單的方式來做，就是直接宣告一個變數把他們都裝起來，可以看到下圖中 kaoPlayData 變數共有1780行😅，裡面裝著就是所有高雄藝文活動資料。

然後我們就可以使用這個變數去跑程式了！我們先來查查看裡面有幾筆資料呢？99筆！！😙

我們再拿JSON物件裡面資料來玩玩看，例如裡面有一個屬性 "PRGTICKET": "免票" ，透過這個束性試著找出所有免票的表演活動吧～～

先宣告一個空陣列 kaoPlayFree 等著裝入所有免費活動😍。
然後就用 for迴圈跑所有 kaoPlayData 裡面資料，如果 PRGTICKET == "免票" 就丟去 kaoPlayFree 陣列中。
最後在console.log kaoPlayFree 的長度即可🤭！！

var kaoPlayData =[...全部資料];
var kaoPlayFree = [];
for(i=0;i<kaoPlayData.length;i++){
 if (kaoPlayData[i].PRGTICKET == "免票") {
    kaoPlayFree.push(kaoPlayData[i]);
  }
}
console.log("高雄在暑假舉辦了" + kaoPlayFree.length + "場活動");

這個連結中還有在寫利用邏輯運算子 || 找到在暑假免費參加的活動唷～有興趣可以看看💁🙇🙇🙇：