前言

昨天介紹了好幾個跟陣列有關的咒語，今天要講解的 forEach 也是陣列中的一種方法。但因為能玩的比較廣，所以單獨抽出來聊聊。廢話不多說，趕緊跟我一起來學習吧！

forEach

記得我們前面叉出去講的 for 迴圈嗎？ forEach 跟它有點像，我可以利用它依序跑我要它跑的東西。舉凡我要把所有陣列裡的數字都加一，或讓所有資料依序出現等等，都可使用。寫法為：
陣列名 + .forEach(function(item,index,array){抓到後要執行的行為}

這個函式預設為不執行，但如果它發現資料，就會依序執行幾次函式。抓到的資料即是 item ， index 是資料在第幾個位置， array 則是完整的陣列長怎樣。如果不會使用到 index 和 array ，也可以不寫。

let ary = ["A","B","C","D"];
ary.forEach(function(item,index,array){
  console.log(item); //依序印出"A" "B" "C" "D"
})

上面的例題會印出什麼應該不難，如果我把它改成這樣，你覺得會依序印出什麼呢？

let ary = ["A","B","C","D"];
ary.forEach(function(item,index,array){
  console.log(item);
  console.log(index);
  console.log(array);
})

想到了嗎？答案是會分別印出 "A" 、 0 、 ["A", "B", "C", "D"] ，然後才印 "B" 並依此類推，直到印完 D 的資料。

實際練習與應用

單純講概念可能會不知道要怎麼應用在實際狀況中，讓我們趕緊來現學現賣看看！

例題一：累加

假設今天有一個陣列 [1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1] ，我想讓陣列裡的數字累加，最後用 console.log 顯示結果。請問我要怎麼寫？

首先當然是先宣告陣列，然後去思考 forEach 代表發現幾筆資料執行幾次，所以我可以讓它發現幾筆資料就把幾筆依序累加上去。那我就會需要去宣告一個總數 total ，然後讓 forEach 依序取出的 item 累加到 total 上，最後用 console.log 印出。

想好的話我要公布答案囉！

let ary = [1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1];
let total = 0;
ary.forEach(function(item){
  total += item;
});

console.log(total);

不知道上面的寫法，跟你的一樣嗎？要注意喔，如果把 let total = 0; 這句放在 forEach 大括號中，得到的答案會因為每次跑函式都重新宣告，而覆蓋掉前一次的結果，導致印出的反而是 1 2 3 4 5 等等陣列裡的數。同樣的，如果把 console.log(total) 放在大括號中，雖然就結果而言還是能得到答案，但會依序印出所有數字依序加上的結果，讓效率變差哩！

歡迎大家用 codepen 故意寫成錯的，看看 console 面板會印出怎樣的答案唷！

例題二：依序顯示資料

如果今天後端工程師給我一筆房型資料，讓我把它秀在前端畫面，當然不用刻苦耐勞的一筆筆打囉！我可以直接使用 forEach ，把資料推進所有我想要推的地方。假設資料是這樣的：

rooms = [
    {
        "name": "Single Room",
        "price": "1500"
    },{
        "name": "Double Room",
        "price": "2500"
    }
]

我要怎麼寫 html 和 js 呢？沒錯，又要複習一次 innerHTML 和 doucument.querySelector 啦！ html 的部分可以這樣寫：

<div class = "word">
</div>
<div class = "word2">
</div>

js 的部分如果你寫：

let rooms = [
    {
        "name": "Single Room",
        "price": "1500"
    },{
        "name": "Double Room",
        "price": "2500"
    }
]

let word = document.querySelector(".word");
let word2 = document.querySelector(".word2");

rooms.forEach(function(item,index){
  word.innerHTML = "第"+(index+1)+"筆房型的名稱是"+item.name; //用+來串起字串與其它資料
  word2.innerHTML = "第"+(index+1)+"筆房型的價格是"+item.price;
});

那麼只會出現最後一筆資料(在這個狀況裡，只出現 double room 的資料)。所以你需要改良一下，首先可以把 html 簡化成這樣：

<div class = "word">
</div>

js 可以改成這樣：

let rooms = [
    {
        "name": "Single Room",
        "price": "1500"
    },{
        "name": "Double Room",
        "price": "2500"
    }
]

let word = document.querySelector(".word");
let str = "";

rooms.forEach(function(item,index){
  let content = "第"+(index+1)+"筆房型的名稱是"+item.name+'</br>'+"第"+(index+1)+"筆房型的價格是"+item.price+'</br>';
  str += content;
});

word.innerHTML = str;

讓我解釋一下上面在幹嘛。讓我們反著回去想，我必須把 innerHTML 提出來放到大括號外面，但是又需要讓 "第"+(index+1)+"筆房型的名稱是"+item.name; 放在 forEach 大括號{}裡，那我乾脆在括號外宣告一個空的字串 str ，讓它來當這兩句的橋樑！

另外你可能會注意到在 let content 裡還多了一個'</br>'。是的，如果想把 html 標籤放進來也是沒問題的！用雙引號或單引號包起來就可以囉！也歡迎分享你的寫法給我唷~

學習與參考資料

JS 學徒特訓班教學影片及練習題 16-17 關