JavaScript - For...in Loop: A Beginner's Guide

您好，有志於成為程序員的朋友！今天，我們將要深入JavaScript的一個方便的工具：for...in循環。別擔心如果你之前從未編過程序 - 我會一步步地帶你了解，就像我這些年來對無數學生所做的那樣。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

What is the for...in Loop?

在我們深入了解之前，讓我們先了解for...in循環是什麼。想像你有一個裡面裝滿玩具的大盒子（在JavaScript中，我們稱這個盒子為"物件"）。for...in循環就像一隻神奇的手，伸進盒子里一次拿出一個玩具，讓你逐個查看每個玩具。

在編程術語中，for...in循環讓我們能夠迭代一個物件的屬性。這是一種檢查物件中儲存的每個數據的方法，一次一個。

Syntax of the for...in Loop

現在，讓我們看看如何寫一個for...in循環。別擔心起初看起來會有些奇怪 - 我們會一起拆解！

for (let key in object) {
// 要執行的代碼
}

讓我們剖析一下：

• for：這個關鍵字告訴JavaScript我們正在開始一個循環。
• let key：這會創建一個變量（我們這裡稱之為key），它將在遍歷物件時保存每個屬性的名稱。
• in：這個關鍵字將變量名與我們正在遍歷的物件分開。
• object：這是我們想要檢查的物件。
• 花括號{}包含對物件中的每個屬性都要運行的代碼。

Examples of the for...in Loop in Action

Example 1: Exploring a Simple Object

讓我們從一個簡單的例子開始。想像我們有一個表示一本書的物件：

let book = {
title: "The Great Gatsby",
author: "F. Scott Fitzgerald",
year: 1925
};

for (let property in book) {
console.log(property + ": " + book[property]);
}

如果我們運行這段代碼，這是我們將在控制台看到的内容：

title: The Great Gatsby
author: F. Scott Fitzgerald
year: 1925

這裡發生了什麼？我們的for...in循環正在遍歷book物件的每個屬性。在每次迭代中：

• property保存當前屬性的名稱（"title"、"author"或"year"）。
• book[property]給我們那個屬性的值。
• 我們使用console.log()來打印出屬性名稱和它的值。

Example 2: Counting Properties

讓我們說我們想要計算一個物件有多少個屬性：

let car = {
make: "Toyota",
model: "Corolla",
year: 2020,
color: "blue"
};

let propertyCount = 0;

for (let prop in car) {
propertyCount++;
}

console.log("The car object has " + propertyCount + " properties.");

這將輸出："The car object has 4 properties."

在這個例子中，我們使用for...in循環來遍歷car物件的每個屬性。我們沒有對屬性本身做任何事情，而只是每次循環時增加一個計數器。這給我們物件中的屬性總數。

Example 3: Filtering Properties

有時候，你可能只想對某些屬性進行操作。讓我們看一個例子：

let person = {
name: "Alice",
age: 30,
city: "New York",
job: "Engineer",
hobby: "painting"
};

console.log("Properties that start with 'j':");
for (let prop in person) {
if (prop.startsWith('j')) {
console.log(prop + ": " + person[prop]);
}
}

這將輸出：

Properties that start with 'j':
job: Engineer

在這個例子中，我們使用for...in循環來遍歷person物件的全部屬性，但我們只打印出以字母'j'開頭的屬性。我們使用startsWith()方法來檢查這個條件。

Common Methods Used with for...in Loops

這裡有一些與for...in循環一起使用的常用方法：

方法	描述	示例
hasOwnProperty()	檢查屬性是否直接在物件上（不是繼承的）	if (object.hasOwnProperty(property))
Object.keys()	返回一個包含物件自身可枚舉屬性名的數組	Object.keys(object)
Object.values()	返回一個包含物件自身可枚舉屬性值的數組	Object.values(object)
Object.entries()	返回一個包含物件自身可枚舉字符串鍵屬性的[key, value]對的數組	Object.entries(object)

Wrapping Up

這就是全部了！你剛剛踏入了for...in循環的世界。記住，就像學騎自行車一樣，編程需要練習。如果它立刻不能引起你的共鳴 - 不要氣餒 - 繼續嘗試不同的物件，看看你能用for...in循環做些什麼。

像我們在編程界所說的，"學習編程的唯一方法是編程！" 所以，為什麼不嘗試創建自己的物件並用for...in循環來探索它們？也許創建一個表示你喜歡的電影或書的物件，看看你能對它做些什麼。

快樂編程，記住 - 每個專家都曾經是初學者。堅持下去，在你意識到之前，你會像專家一樣循環遍歷物件！

Credits: Image by storyset