Ich weiß, was ein ist for... in Schleife (sie durchläuft die Tasten), aber ich habe davon gehört for... of zum ersten Mal (es iteriert über Werte).

Ich bin verwirrt darüber for... of Schleife.

var arr = [3, 5, 7];
arr.foo = "hello";
    
for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}
    
for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it doesn't log "3", "5", "7", "hello"
}

ich verstehe das for... of iteriert über Eigenschaftswerte. Warum wird es dann nicht protokolliert? "3", "5", "7", "hello" anstatt "3", "5", "7"?

nicht wie for... in Schleife, die jeden Schlüssel durchläuft ("0", "1", "2", "foo") und iteriert auch über die foo Schlüssel, der for... of nicht iteriere über den Wert von foo Eigentum, d. h. "hello". Warum ist das so?

Hier tröste ich for... of Schleife. Es sollte protokolliert werden "3", "5", "7","hello" aber es protokolliert "3", "5", "7". Warum?

Beispiellink

for in durchläuft aufzählbare Eigenschaftsnamen eines Objekts.

for of (neu in ES6) verwendet eine objektspezifisch Iterator und durchläuft die dadurch generierten Werte.

In Ihrem Beispiel ist das Array-Iterator liefert alle Werte im Array (ohne Berücksichtigung von Nicht-Index-Eigenschaften).

Eine vollständige Antwort habe ich unter gefunden Iteratoren und Generatoren (Obwohl dies für TypeScript gilt, gilt dies auch für JavaScript.)

Beide for..of Und for..in Anweisungen durchlaufen Listen; Die iterierten Werte sind jedoch unterschiedlich. for..in gibt eine Liste von Schlüsseln für das Objekt zurück, das iteriert wird for..of gibt eine Liste von Werten der numerischen Eigenschaften des Objekts zurück, das iteriert wird.

Hier ist ein Beispiel, das diesen Unterschied verdeutlicht:

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

Ein weiterer Unterschied besteht darin for..in wirkt auf jedes Objekt; Es dient dazu, die Eigenschaften dieses Objekts zu überprüfen. for..of Andererseits interessiert es sich hauptsächlich für Werte iterierbarer Objekte. Eingebaute Objekte wie Map Und Set implementieren Symbol.iterator Eigenschaft, die den Zugriff auf gespeicherte Werte ermöglicht.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

Unterschied for..in Und for..of:

Beide for..in Und for..of sind Schleifenkonstrukte, die zum Durchlaufen von Datenstrukturen verwendet werden. Der einzige Unterschied zwischen ihnen besteht in den Entitäten, über die sie iterieren:

1. for..in iteriert über alle Aufzählungen Eigenschaftsschlüssel eines Objekts
2. for..of iteriert über die Werte eines iterierbaren Objekts. Beispiele für iterierbare Objekte sind Arrays, Strings und NodeLists.

Beispiel:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

In diesem Beispiel können wir beobachten, dass die for..in Die Schleife durchläuft die Schlüssel des Objekts, in diesem Beispiel ein Array-Objekt. Die Schlüssel sind 0, 1, 2 (die den Array-Elementen entsprechen) und addedProp. So funktioniert das arr Array-Objekt sieht in Chrome Devtools aus:

Sie sehen, dass unser for..in Die Schleife führt lediglich eine Iteration über diese Schlüssel durch.

Der for..of Die Schleife in unserem Beispiel iteriert über die Werte einer Datenstruktur. Die Werte in diesem speziellen Beispiel sind 'el1', 'el2', 'el3'. Die Werte, mit denen eine iterierbare Datenstruktur zurückgegeben wird for..of hängt vom Typ des iterierbaren Objekts ab. Beispielsweise gibt ein Array die Werte aller Array-Elemente zurück, während ein String jedes einzelne Zeichen des Strings zurückgibt.

For…in-Schleife

Der für in Die Schleife beseitigt die Schwächen der for-Schleife, indem sie die Zähllogik und die Beendigungsbedingung eliminiert.

Beispiel:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Aber Sie müssen sich immer noch mit dem Problem auseinandersetzen, einen Index zu verwenden, um auf die Werte des Arrays zuzugreifen, und das stinkt; es macht es fast noch verwirrender als zuvor.

Außerdem kann die for…in-Schleife zu großen Problemen führen, wenn Sie einem Array (oder einem anderen Objekt) eine zusätzliche Methode hinzufügen müssen. Da for…in-Schleifen alle aufzählbaren Eigenschaften durchlaufen, bedeutet dies, dass diese Eigenschaften auch in der Schleife angezeigt werden, wenn Sie dem Prototyp des Arrays zusätzliche Eigenschaften hinzufügen.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Drucke:

0

1

2

3

4

5

6

7

8

9

function() { for (let i = 0; i < this.length; i++) { this[i] = das[i].toFixed(2); } }

Aus diesem Grund wird von for…in-Schleifen beim Durchlaufen von Arrays abgeraten.

NOTIZ: Der forEach-Schleife ist eine andere Art von for-Schleife in JavaScript. Jedoch, forEach() ist eigentlich eine Array-Methode und kann daher ausschließlich mit Arrays verwendet werden. Es gibt auch keine Möglichkeit, eine forEach-Schleife zu stoppen oder zu unterbrechen. Wenn Sie dieses Verhalten in Ihrer Schleife benötigen, müssen Sie eine einfache for-Schleife verwenden.

For…of-Schleife

Der für…von Schleife wird verwendet, um alle Arten von Daten zu durchlaufen, die iterierbar sind.

Beispiel:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

Drucke:

0

1

2

3

4

5

6

7

8

9

Dies macht die for…of-Schleife zur prägnantesten Version aller for-Schleifen.

Aber warten Sie, es gibt noch mehr! Die for…of-Schleife bietet außerdem einige zusätzliche Vorteile, die die Schwächen der for- und for…in-Schleifen beheben.

Sie können eine for…of-Schleife jederzeit stoppen oder unterbrechen.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

Drucke:

1

3

5

7

9

Und Sie müssen sich keine Gedanken über das Hinzufügen neuer Eigenschaften zu Objekten machen. Die for…of-Schleife durchläuft nur die Werte im Objekt.

Hier ist eine nützliche Gedächtnisstütze, um sich den Unterschied zwischen zu merken for...in Schleife und for...of Schleife.

„Index in, Objekt von“

for...in Loop => iteriert über die Index in das Array.

for...of Loop => iteriert über die Gegenstand von Objekte.

for of wird verwendet, um über Iterables zu iterieren und for in wird zum Durchlaufen von Objekteigenschaften verwendet

Hier ist ein Trick, den Sie sich merken sollten:

for of ist nicht dafür ÖObjekte (also für Iterables)

for in ist nicht dafür ichterables (also für Objekte)

Noch ein Trick:

for in Gibt ein Objekt zurück InWürfel (Schlüssel) während for of gibt Werte zurück

//for in, iteriert Schlüssel in einem Objekt und indiziert in einem Array

 let obj={a:1, b:2}
    
    for( const key in obj)
      console.log(obj[key]); //would print 1 and 2
      console.log(key);      //would print a and b

 let arr = [10, 11, 12, 13];

  for (const item in arr) 
    console.log(item);   //would print 0 1 2 3

//for of, iteriert Werte in einem Array oder einem beliebigen iterierbaren Array

let arr = [10, 11, 12, 13];

for (const item of arr )
  console.log(item);  //would print 10  11  12  13