JavaScript for...in VS for...of 迴圈

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 for..in 迴圈
  2. 在 JavaScript 中使用 for..of 迴圈
JavaScript for...in VS for...of 迴圈

本文比較了 JavaScript 中的 for..infor..of 迴圈。它識別了它們之間的區別並顯示了我們可以在哪裡使用它們。

for..in 迴圈物件的屬性。它在每次迭代時返回一個鍵,該鍵可用於獲取該特定鍵的值。for..of可迭代物件的值上建立迴圈,包括內建的 MapArraySetStringTypedArray

兩者都有一個 variable 和一個 iterable。對於這兩種情況,variable 可以是 constletvar。在 for..of 中,iterable 是一個物件,其可迭代屬性被迭代,而 for..initerable 是一個物件本身。

在 JavaScript 中使用 for..in 迴圈

const person = {
 firstname: "Delft",
 lastname: "Stack",
 age: 30,
 email: "Delft.Stack@gmail.com"
};

for(const prop in person)
 console.log(`${prop}: ${person[prop]}`)

輸出:

"firstname: Delft"
"lastname: Stack"
"age: 30"
"email: Delft.Stack@gmail.com"

在上面給出的程式碼中,for..in 正在迴圈一個名為 person 的物件的屬性。讓我們通過迭代其屬性來練習使用 for..in

請參閱下面的示例程式碼。

const person = {
 firstname: "Delft",
 lastname: "Stack",
 age: 30,
 email: "Delft.Stack@gmail.com"
};

function email() {
 this.email = 'maofficial@gmail.com';
}

email.prototype = person;
var obj = new email();

for (const prop in obj) {
 if (obj.hasOwnProperty(prop)) {
 console.log(`obj.${prop} = ${obj[prop]}`);
  }
}

輸出:

obj.email = maofficial@gmail.com

上面的程式碼使用 for..in 迴圈來檢查物件是否使用 .hasOwnProperty() 來檢查物件是否具有特定的屬性。如果指定的屬性確實是它自己的屬性,則 .hasOwnProperty() 返回 true

在 JavaScript 中使用 for..of 迴圈

讓我們開始用陣列練習 for..of 迴圈。

const array = ['apple', 'banana', 'orange'];

for (const value of array) {
 console.log(value);
}

輸出:

apple
banana
orange

在下面的程式碼中,iterable 是一個字串。

const name = 'Delft';

for (const value of name) {
 console.log(value);
}

輸出:

M
e
h
v
i
s
h

下面的程式碼例項展示了 for..ofMap 的用法。

const personMap = new Map([
  ['firstname', 'Delft'],
  ['lastname', 'Stack'],
  ['age', 30]
]);

for (const entry of personMap) {
 console.log(entry);
}

輸出:

[ 'firstname', 'Delft' ]
[ 'lastname', 'Stack' ]
[ 'age', 30 ]

讓我們使用顯式實現 iterable 協議的物件來練習 for..of

const userDefinedfunctions = {
  [Symbol.iterator]() {
 return {
 num: 0,
 next() {
 if (this.num < 10) {
 return { value: this.num++, done: false };
        }
 return { value: undefined, done: true };
      }
    };
  }
};

for(const value of userDefinedfunctions)
 console.log(value);

輸出:

0
1
2
3
4
5
6
7
8
9

Symbol.iterator 用作物件的預設迭代器。這個符號由 for-of 迴圈使用,其中我們有 iterable 的可迭代屬性被迭代。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Loop