[JavaScript] 六角學院鼠年全馬鐵人挑戰 API 查詢介面(下) — 搞清楚 for 家族：for/forEach/for…in/ for…of

Photo by Paweł Czerwiński on Unsplash

因為這次的查詢介面練習，發現自己對於 for/forEach 的觀念不是很熟悉，趁這次機會再來研究研究

for

for 的 Syntax 共有三種：

for (statement 1; statement 2; statement 3) {
   // code block to be executed
}

• Statement 1 在 code block 執行之前，會執行一次
• Statement 2 執行 code block 的條件
• Statement 3 在每次 code block 執行後執行

通常我們會這樣用：

for (var i = 0; i < cars.length; i++) {
  // code block
}

也可以這樣用：

var i = 0;
var len = cars.length;
for (; i < len; ) {
  // code block
  i++;
}

• Statement1 是 optional 的，如果已經提前定義好了，for 的括弧裡面就可以忽略(如上範例)
• Statement2 也是 optional 的，但是要小心不要寫成無窮迴圈讓你的電腦毀滅
• Statement3 也是 optional 的，如果你把最後要執行的動作已經寫在 for 的 code block 裡面 (如上範例的 i++)

forEach

forEach 會對陣列裡的每一個元素執行指定的動作，不會回傳值

Basic Usage:

var aa = [
 { name: "emma", age: 18 },
 { name: "ann", age: 20 }
];
aa.forEach(el => {
 el.age = el.age + 1;
});
console.log(aa);

小撇步：直接打開f12 Devtool 的 console，複製以上程式碼，可以自己看到結果，會更清楚

result: 兩個人的年齡 +1

[{
  age: 19,
  name: "emma"
}, {
  age: 21,
  name: "ann"
}]

Syntax:

array.forEach(function(currentValue, index, arr), thisValue)

currenValue ：物件 (required)

index ：索引 (optional)

arr ：整個陣列本人 (optional)

thisValue ：若有指定值，將會成為這個 function 的 this，如果沒有指定，就會是 window (optional)

舉例：

for/in

for/in 可以 loop 物件，舉例：

var person = {name:"emma", age:18};
for (x in person) {
  console.log(x, person[x])
}

result:

for/of

for/of 可以處理迭代型物件如陣列、 Maps、NodeLists…等，迭代型物件是什麼意思呢？簡單說如果一個陣列可以用 for 迴圈去把每一個值跑出來，就可以說陣列是一個可迭代的型別，物件則非迭代型物件。

整理：

for

result

for…in

for…in — Object

for…in — Array

result

for…of

for…of — Array

for…of — String

result

後記：

這次在寫搜尋器的時候，可能因為是第一次寫了公開出去的 side project，有一點點緊張，擔心是不是真的有人來用我的系統，也會有了需要維護的壓力，每天上去搜尋器檢查之下才發現，真的有很多細節沒有注意到，同時也加強了很多時間和資料的處理觀念。JavaScript 的 Date() 是一個需要花一點時間搞清楚的觀念，再找一篇再整理起來。