0%

【學習筆記】JavaScript 的陣列遍歷(ㄧ):for/for...of/for...in/forEach

這篇筆記整理幾種 JavaScript 遍歷陣列的方法,探討其使用時機與彼此的區別:

  • for (let i = 0; i < arr.length; i++)
  • arr.forEach((value, index) => { // todo... })
  • for (let i in arr)
  • for (let v of arr)

for:遍歷「陣列」的值

使用情境:

  • 用於執行迴圈次數「明確」的狀況
  • 例如:印出陣列 [0, 1, 2] 中的每一個數字

語法如下:

  • 初始值:i = 0
  • 邊界條件:i 小於 3
  • 結束時更新:i + 1
for(let i = 0; i < 3; i++){
    console.log(i);
}
// 0
// 1
// 2

接著以下方實作九九乘法表為例,使用了兩個 For Loop:

for (let i = 2; i < 10; i++) {
    for (let j = 1; j < 10; j++) {
        console.log(i + 'x' + j + '=' + i * j)
    }
}

i = 2i = 3 時的輸出結果如下:

arr.forEach:遍歷「陣列」的值

使用情境:

  • 用法與 for loop 類似,差別在於 forEach 不需設定索引的邊界條件
  • 缺點是無法使用 break 中斷迴圈,或 return 返回值等等

語法:

array.forEach(callback(currentValue, index, array){
    // TODO
})

使用範例:

let items = ['apple', 'banana', 'lemon']

items.forEach((item, i) => {
  console.log(i, item)
})
// 0 "apple"
// 1 "banana"
// 2 "lemon"

for…in:遍歷「物件」的 key

語法如下:

for (variable in object) {
  // 遍歷的是 key
}

使用時需注意:

  • 遍歷的 key,型態不是 number 而是 string
  • 會遍歷到自定義屬性名稱
  • 通常用來遍歷一般 object 屬性

以遍歷物件為例:

const user = {
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    age: 30,
};

for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}

// name: Jane Doe
// email: jane.doe@example.com
// age: 30

在上述程式碼中,我們建立一個物件名稱為 user。透過 for..in 語法,指定 key 為自訂變數,用來儲存物件的屬性,即可依序讀取物件中的所有屬性。

接著以遍歷陣列為例:

const items = ['apple', 'banana', 'cucumber'];
items.duck = 'milk';  // 自定義屬性

for (const index in items) {
  console.log(index);
}
// "0"
// "1"
// "2"
// "duck"

hasOwnProperty():回傳物件是否有該屬性的布林值

使用 for...in 時,需注意會遍歷包含繼承屬性的陣列,可能會產生預期外的結果。這時可使用 hasOwnProperty() 檢查是否為非繼承屬性。

將上方程式碼改寫如下,就不會印出繼承屬性:

Array.prototype.duck = 'milk';  // 原型鍊繼承屬性
const items = ['apple', 'banana', 'cucumber'];

for (const index in items) {
  if (items.hasOwnProperty(index)) {
      console.log(index);
  }
}
// "0"
// "1"
// "2"

for…of:遍歷「陣列」的 value

語法如下:

for (variable of array) {
  // 遍歷的是 value
}

以遍歷陣列為例:

const items = ['apple', 'banana', 'cucumber'];

for (const item of items) {
  console.log(item);
}
// apple
// banana
// cucumber

for…in vs for…of

  • for…in
    • 是 ES5 標準
    • 遍歷的是鍵(key)
    • 通常用來遍歷 object
    • 會遍歷繼承的屬性,可使用 hasOwnProperty() 檢查是否為非繼承的屬性
  • for…of
    • 是 ES6 標準,可解決 for…in 產生的問題
    • 遍歷的是值(value)
    • 不能遍歷 object
    • 可搭配 break、continue、return 語法使用

以下為使用範例:

let arr = [3, 5, 7];
arr.world = "hello";  // 自定義屬性

for (let index in arr) {
   console.log(index);  // "0", "1", "2", "world"
}

for (let value of arr) {
   console.log(value);  // 3, 5, 7
}

參考資料

  • [筆記] 談談 JavaScript 中 for … in 這個 function
  • JavaScript 的 4 種陣列遍歷方法: for VS forEach() VS for/in VS for/of
  • For vs forEach() vs for/in vs for/of in JavaScript
  • JavaScript中for of和for in的差別
  • JavaScript ES6 for…of 迴圈