JS學習筆記#17 | for...of 和 for...in 迴圈

undefined on Tenor

for...of

核心概念

• 迭代「可迭代物件 (iterable objects)」的值 (values)。

可迭代物件 (Iterable)：具備 Symbol.iterator 方法，能夠逐一取出內部的值。一般物件 (plain object) 本身不是可迭代物件，除非你為它添加 Symbol.iterator 方法（較少見）。

• 適用於：陣列 (Array)、字串 (String)、Map、Set、NodeList 等。
• 直接取出物件中的每一個值。

語法

for (const element of iterable) {
  // element 代表可迭代物件中的每一個值
}

• 遍歷陣列:

const colors = ['red', 'green', 'blue'];
for (const color of colors) {
    console.log(color); // 依序印出 "red", "green", "blue"
}

• 遍歷字串:

const message = "Hello";
for (const char of message) {
    console.log(char);  // 依序印出 "H", "e", "l", "l", "o"
}

• 遍歷 Map:

const myMap = new Map([
    ['apple', 1],
    ['banana', 2],
    ['cherry', 3]
]);
for (const [key, value] of myMap) {
    console.log(key, value); // 依序印出 "apple 1", "banana 2", "cherry 3"
}

• 遍歷 Set:

const mySet = new Set([1, 2, 3, 2]); // Set 會自動移除重複值
for (const value of mySet) {
    console.log(value); // 依序印出 1, 2, 3
}

• 遍歷 NodeList:

const listItems = document.querySelectorAll('li');
for (const listItem of listItems) {
     console.log(listItem.textContent) // 印出每個li的文字內容
}

重點

• 取得的是「值」，非索引或鍵。
• 適用於任何可迭代物件。
• 可使用 break 和 continue。
• 不能直接迭代一般物件 (除非物件有定義迭代器)。

for...in

核心概念

• 迭代「物件 (object)」的可枚舉屬性 (enumerable properties)。
• 適用於：一般物件 (plain objects)。
• 取出物件中的每一個屬性名稱 (鍵/key)。

語法

for (const key in object) {
  // key 代表物件的屬性名稱 (鍵)
}

• 遍歷物件的屬性:

const person = {
    name: "John",
    age: 30,
    city: "New York"
};
for (const key in person) {
    console.log(key, person[key]); // 依序印出 "name John", "age 30", "city New York"
}

重點

• 取得的是「鍵 (key)」，而非值。
• 主要用於迭代一般物件 (plain objects)。
• 會遍歷原型鏈上的可枚舉屬性。
• 屬性遍歷順序不保證。
• 可使用 break 和 continue。
• 在處理物件屬性時，記得使用 hasOwnProperty() 檢查是否為物件自身屬性。

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
}

const person = new Person("Alice");

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log("Own property:", key, person[key]); // 只會印出 "Own property: name Alice"
  } else {
      console.log('Prototype property:',key,person[key]) // 會印出 "Prototype property: greet [Function (anonymous)]"
  }
}