一、難道真的要一個一個處理?

昨天我們把很多資料放進Array，但如果今天我想要把這些技能都顯示出來，難道要一直寫consol.log(skills[0])然後依序寫下去嗎?目前看下來資料只有四組倒是還好，但如果今天有100筆資料改怎麼做?
這時候就需要JavaScript幫忙我們做重複的事情，在程式裡面想到重複第一直覺就是for迴圈!!!

let skills = ["HTML" , "CSS" , "GSAP" , "JavaScript"];
console.log(skills[0]);
console.log(skills[1]);
console.log(skills[2]);
console.log(skills[3]);

可以將上面這段改寫成:

let skills = ["HTML" , "CSS" , "GSAP" , "JavaScript"];
for (let i = 0; i < skills.length; i++) {
    console.log(skills[i]); 
}

這段程式可以理解成：

「從第一筆開始，一個一個拿出來處理，直到全部跑完。」

其中 skills.length 可以取得 Array 裡有幾筆資料。

二、還有更輕鬆的forEach

學習 Array後，會學到的語法forEach()，可以對陣列進行迴圈，寫起來比for迴圈精簡很多，這裡直接放兩個寫法，輸出都會是1 2 3。

const arr = [1, 2, 3];
// for loop
for(let i = 0; i < arr.length; i++){
  console.log(arr[i]); 
}
// forEach loop
arr.forEach(element => console.log(element)); 

forEach()的寫法感覺像

「把 Array 裡的每一個資料，都交給我處理一次。」

它會依序把 Array 裡的每一筆資料拿出來。而 element 就代表「目前拿到的資料」。
所以可以想像成以下，這樣就可以不用一直不斷的寫 console.log。

1 → element → console.log(1)
2 → element → console.log(2)
3 → element → console.log(3)

三、結論

今天這個觀念之後會經常使用到。例如未來從 API 拿到一大堆資料，我們就可以利用這種方式，把資料一筆一筆放進網頁裡。到這裡，JavaScript 開始真的有「程式在幫我做事」的感覺了，終於踏出好大一步了。

前面學的是變數、條件、函式、資料整理，現在要將它們全部串起來，開始做出有功能的網頁。

下一篇，就來將至今所學到的串接在一起吧!!!!