forEach, 顧名思義，他就是 for each。與前面幾天介紹的不同之處就在於，map, reduce, 以及 filter 除了針對一個集合做操作之外，會把結果放到一個新的集合裡面，也就是會有回傳值。但是，雖然 forEach 也是針對一個集合做操作，但他不會有回傳值，就只是單純對他操作而已。

// 我們的測試資料
interface Student {
    name : string;
    height :number;
}

let students = [
    { name:"Love",    height : 164 },
    { name: "Andrew", height : 178 },
    { name: "Marie",  height : 165 },
    { name: "Faith",  height : 180 },
    { name: "Kayla",  height : 160 },
]

在開始介紹 forEach 之前，我們先來看看，如果要在 TypeScript 中使用 for 迴圈，可以怎麼做呢？

單純的 for 迴圈

單純的 for 迴圈相信前面看過很多次了，就是

// 語法
// for( 宣告index; 中止條件; 步進值) {
//     內容
// }

// 範例
for (let i = 0; i < students.length; i++){
    console.log(students[i]);
}

// 範例結果
// { name: 'Love', height: 164 }
// { name: 'Andrew', height: 178 }
// { name: 'Marie', height: 165 }
// { name: 'Faith', height: 180 }
// { name: 'Kayla', height: 160 }

for ... of

如果你沒有需要知道每個元素的 index 為何的話，使用 for ... of 會是一個很不錯的選擇，而且也可以避免不小心 Out of index 這個問題。

for ... of 是針對每一個在集合裡的元素，他的語法為：

// 語法
//for (let element in collection) {
//    // 內容
//}

// 範例
console.log("for .. of:");
for (let s of students) {
    console.log(s);
}

// 範例結果
// { name: 'Love', height: 164 }
// { name: 'Andrew', height: 178 }
// { name: 'Marie', height: 165 }
// { name: 'Faith', height: 180 }
// { name: 'Kayla', height: 160 }

for ... in

與 for .. of 不同的是，for ... of 拿取的是集合裡面的值，而for..in拿的卻是集合裡的 index 或 key，他的使用方式如下：

// 語法
// for (let index in collectino) {
//     內容
// }

// 範例
for (let s in students) {
    console.log(s);
}

// 範例結果
// 0
// 1
// 2
// 4
// 5
// 5

到這邊或許有人會覺的奇怪，那這樣看起來 for .. in 好像沒什麼用阿。沒錯，for .. in 在 Array 裡面看起來或許會怪怪的，但如果是其他類型的集合，就會變得很有道理了，例如 Map() ，他的 key 就不會像是 Array 這樣是有順序的數字了，這個我們會在之後在介紹。

forEach

forEach 的屬性比較接近前幾天介紹的 map, filter, 或 reduce，但與之不同的是，雖然他與他們一樣是對一個集合做操作，但 forEach 是沒有回傳值的。而相同的是一樣不用去跑迴圈，直接告訴 forEach 要做的事情即可。我們來看個範例吧！

// 語法
someArray.forEach(callback_function);

// 範例
students.forEach(console.log);
// 結果
// { name: 'Love', height: 164 }
// { name: 'Andrew', height: 178 }
// { name: 'Marie', height: 165 }
// { name: 'Faith', height: 180 }
// { name: 'Kayla', height: 160 }