JavaScript for...in VS for...of Schleife
Dieser Artikel vergleicht die Schleifen for..in und for..of in JavaScript. Es identifiziert den Unterschied zwischen ihnen und zeigt, wo wir sie verwenden können.
for..in durchläuft die Eigenschaften eines Objekts. Es gibt bei jeder Iteration einen Schlüssel zurück, der verwendet werden kann, um den Wert dieses bestimmten Schlüssels zu erhalten. Das for..of erstellt eine Schleife über die Werte eines iterierbaren Objekts, einschließlich eingebauter Map, Array, Set, String und TypedArray.
Beide haben eine variable und eine iterable. Für beide kann die variable const, let oder var sein. In for..of ist das iterable ein Objekt, dessen iterierbare Eigenschaften iteriert werden, während das iterable von for..in selbst ein Objekt ist.
Verwendung der for..in-Schleife in JavaScript
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
for (const prop in person) console.log(`${prop}: ${person[prop]}`)
Ausgabe:
"firstname: Delft"
"lastname: Stack"
"age: 30"
"email: Delft.Stack@gmail.com"
Im oben angegebenen Code durchläuft for..in die Eigenschaften eines Objekts namens person. Lassen Sie uns die Verwendung von for..in üben, indem wir über seine Eigenschaften iterieren.
Siehe Beispielcode unten.
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]}`);
}
}
Ausgabe:
obj.email = maofficial@gmail.com
Der obige Code verwendet die for..in-Schleife, um mit .hasOwnProperty() zu prüfen, ob das Objekt eine bestimmte Eigenschaft als sein eigenes besitzt oder nicht. Die .hasOwnProperty() gibt true zurück, wenn die angegebene Eigenschaft wirklich eine eigene Eigenschaft ist.
Verwendung der for..of-Schleife in JavaScript
Fangen wir an, die for..of-Schleife mit einem Array zu üben.
const array = ['apple', 'banana', 'orange'];
for (const value of array) {
console.log(value);
}
Ausgabe:
apple
banana
orange
Im folgenden Code ist iterable ein String.
const name = 'Delft';
for (const value of name) {
console.log(value);
}
Ausgabe:
M
e
h
v
i
s
h
Die folgende Codeinstanz zeigt die Verwendung von for..of mit Map.
const personMap =
new Map([['firstname', 'Delft'], ['lastname', 'Stack'], ['age', 30]]);
for (const entry of personMap) {
console.log(entry);
}
Ausgabe:
[ 'firstname', 'Delft' ]
[ 'lastname', 'Stack' ]
[ 'age', 30 ]
Lassen Sie uns das for..of mit einem Objekt üben, das explizit das iterable-Protokoll implementiert.
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);
Ausgabe:
0
1
2
3
4
5
6
7
8
9
Symbol.iterator wird als Standard-Iterator für das Objekt verwendet. Dieses Symbol wird von der for-of-Schleife verwendet, wo wir das iterable haben, dessen iterierbare Eigenschaften iteriert werden.
