it-swarm.com.de

Was ist der Unterschied zwischen (für ... in) und (für ... von) Anweisungen in JavaScript?

Ich weiß, was for... in-Schleife ist (iteriert über die Taste), hörte jedoch das erste Mal über for... of (iteriert über Wert). Ich bin mit for... of Schleife verwechselt. Ich habe kein Adjektiv bekommen. Dies ist der Code unten:

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 is does not log "3", "5", "7","hello"
}

Was ich bekam, ist, for... of über Eigenschaftswerte. warum wird dann "3", "5", "7","hello" anstelle von "3", "5", "7" nicht protokolliert (zurückgegeben)? for... in loop iteriert jedoch über jede Taste ("0", "1", "2", "foo"). hier for... in loop iteriert auch über foo key. aber für ... nicht iterarte über den Wert der foo-Eigenschaft, dh "hello". Warum ist es so?

Lange Geschichte in Kürze:

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

Beispiel Link

270
Mukund Kumar

for in Schleifen über aufzählbare Eigenschaftsnamen eines Objekts.

for of (neu in ES6) verwendet einen objektspezifischen iterator und durchläuft die von ihm generierten Werte.

In Ihrem Beispiel liefert der array-Iterator alle Werte im Array (ignoriert Nicht-Index-Eigenschaften).

203
Bergi

Eine vollständige Antwort finde ich unter: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Obwohl es sich um ein Typ-Skript handelt, gilt dies auch für Javascript).

Die beiden for..of- und for..in-Anweisungen durchlaufen Listen; die Werte iterated on sind jedoch unterschiedlich, for..in gibt eine Liste der Schlüssel auf .__ zurück. das Objekt wird wiederholt, während for..of eine Liste von Werten zurückgibt der numerischen Eigenschaften des Objekts, das iteriert wird.

Hier ein Beispiel, das diese Unterscheidung demonstriert:

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, dass for..in für jedes Objekt wirkt. es dient als Möglichkeit, die Eigenschaften dieses Objekts zu überprüfen. for..of auf der anderen Seite Hand interessiert sich vor allem für Werte iterierbarer Objekte. Eingebaut Objekte wie Map und Set implement Symbol.iterator-Eigenschaft, die .__ zulassen. Zugriff auf gespeicherte Werte.

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"
}
170
Alireza Fattahi

Für ... in Schleife

Die for ... in Schleife verbessert die Schwächen der for-Schleife, indem die Zähllogik und die Beendigungsbedingung beseitigt werden.

Beispiel:

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

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

Sie müssen sich jedoch immer noch mit dem Problem befassen, einen Index für den Zugriff auf die Werte des Arrays zu verwenden, und das stinkt. es macht es fast verwirrender als zuvor.

Die for ... in-Schleife kann Sie außerdem in große Schwierigkeiten bringen, wenn Sie einem Array (oder einem anderen Objekt) eine zusätzliche Methode hinzufügen müssen. Da für ... in-Schleifen eine Schleife über alle aufzuzählenden Eigenschaften besteht, bedeutet dies, wenn Sie dem Prototyp des Arrays zusätzliche Eigenschaften hinzufügen, diese Eigenschaften auch in der Schleife angezeigt werden.

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:

1

2

3

4

5

6

7

8

9

funktion () { für (sei i = 0; i <this.length; i ++) { this [i] = this [i] .toFixed (2); } }

Dies ist der Grund, warum for in-Schleifen beim Schleifen von Arrays abgeraten wird.

NOTE: Die forEach-Schleife ist eine andere Art von for-Schleife in JavaScript . forEach() ist jedoch eigentlich eine Array-Methode und kann daher nur verwendet werden ausschließlich mit Arrays. Es gibt auch keine Möglichkeit, eine .__ zu stoppen oder zu unterbrechen. fürJede Schleife. Wenn Sie diese Art von Verhalten in Ihrer Schleife benötigen, werden Sie müssen eine grundlegende for-Schleife verwenden.

Für ... der Schleife

Die for ... 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:

1

2

3

4

5

6

7

8

9

Damit ist die for ... of-Schleife die prägnanteste Version aller for-Schleifen.

Aber warten Sie, es gibt noch mehr! Die for ... of-Schleife hat auch einige zusätzliche Vorteile, die die Schwächen der for und für ... in Schleifen beheben.

Sie können eine for ... of-Schleife jederzeit anhalten 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

Sie müssen sich nicht darum kümmern, neue Objekte zu Objekten hinzuzufügen. Die for ... of-Schleife wird nur die Werte im Objekt durchlaufen.

32
Elar

Die for-in-Anweisung durchläuft die aufzuzählenden Eigenschaften eines Objekts in beliebiger Reihenfolge.

Die Schleife durchläuft alle aufzuzählenden Eigenschaften des Objekts und die Eigenschaften, die das Objekt vom Prototyp seines Konstruktors übernimmt 

Sie können es sich als "for in" vorstellen, im Grunde iteriert und listet alle Schlüssel auf.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.Push(value);
}

for(value in str){
  arrForIn.Push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]
7
Devdutta Natu

Es gibt einige bereits definierte Datentypen, mit denen wir leicht iterieren können, z. B. Array-, Map- und String-Objekte

Normal für in iteriert über den Iterator und liefert als Antwort die Schlüssel, die sich in der Reihenfolge des Einfügens befinden (siehe Beispiel unten).

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

Wenn wir nun dasselbe mit for von versuchen, dann liefert es uns die Werte und nicht die Schlüssel. z.B 

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

Wenn wir also beide Iteratoren betrachten, können wir leicht den Unterschied zwischen beiden unterscheiden.

Hinweis: - For von funktioniert nur mit dem Symbol.iterator

Wenn wir also versuchen, über ein normales Objekt zu iterieren, erhalten Sie einen Fehler, z. B.

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

Raum ist nicht iterierbar

Jetzt müssen wir einen it6-Symbol.iterator definieren, z

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

Dies ist der Unterschied zwischen für in und für von . Hoffe, dass es den Unterschied klären könnte. 

4
Amit Mundra

Unterschied for..in und for..of:

Sowohl for..in als auch for..of sind Schleifenkonstrukte, mit denen Datenstrukturen durchlaufen werden. Der einzige Unterschied besteht darin, was sie durchlaufen:

  1. for..in durchläuft alle aufzählbaren property-Schlüssel eines Objekts
  2. for..of durchläuft die values ​​ 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-Schleife die Schlüssel des Objekts durchläuft, das in diesem Beispiel ein Array-Objekt ist. Die Schlüssel sind 0, 1, 2, die den hinzugefügten Feldelementen entsprechen, und addedProp. So sieht das arr-Arrayobjekt in chrome devtools aus:

 enter image description here

Sie sehen, dass unsere for..in-Schleife nichts anderes tut, als diese Werte einfach zu durchlaufen.


Die for..of-Schleife in unserem Beispiel durchläuft die values ​​ einer Datenstruktur. Die Werte in diesem speziellen Beispiel sind 'el1', 'el2', 'el3'. Die Werte, die eine iterierbare Datenstruktur mithilfe von for..of zurückgibt, hängen vom Typ des iterierbaren Objekts ab. Ein Array gibt beispielsweise die Werte aller Array-Elemente zurück, wohingegen ein String jedes einzelne Zeichen des Strings zurückgibt.

4

Die Anweisung "for...in" durchläuft in beliebiger Reihenfolge die aufzählbaren Eigenschaften eines Objekts. Die Aufzählungseigenschaften sind die Eigenschaften, deren interne Kennzeichen [[Enumerable]] auf true gesetzt ist In der Prototypenkette wird die for...in-Schleife auch auf diese durchlaufen.

Die Anweisungfor...ofdurchläuft Daten, die von einem iterierbaren Objekt als zu iterierend definiert werden.

Beispiel:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

Wie zuvor können Sie das Hinzufügen von hasOwnProperty in for...of-Schleifen überspringen.

4
Ramandeep Sohi

Alle haben erklärt, warum dieses Problem auftritt, aber es ist immer noch sehr leicht, es zu vergessen und dann den Kopf zu kratzen, warum Sie falsche Ergebnisse erhalten haben. Vor allem, wenn Sie mit großen Datensätzen arbeiten, wenn die Ergebnisse auf den ersten Blick gut zu sein scheinen.

Mit Object.entries stellen Sie sicher, dass Sie alle Eigenschaften durchgehen:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/
1
David C.

Ein weiterer Unterschied zwischen den beiden Schleifen, den noch niemand erwähnt hat ( source ):

Die Zerstörung von for...in ist veraltet. Verwenden Sie stattdessen for...of.

Wenn wir also in einer Schleife destructuring verwenden möchten, erhalten Sie sowohl index als auch value jedes array-Elements. Wir sollten die for...of-Schleife mit der Array -Methode entries() verwenden:

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}
0
simhumileco

Ich sehe viele gute Antworten, aber ich beschließe, meine 5 Cents zu setzen, um ein gutes Beispiel zu haben:

Für in Schleife

iteriert über alle zahllose Requisiten

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

Für die Schleife

iteriert über alle iterierbaren Werte

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

0
WebBrother

Ich fand die folgende Erklärung von https://javascript.info/array sehr hilfreich:

Eine der ältesten Methoden zum Durchlaufen von Array-Elementen ist die for-Schleife über Indizes:

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

Technisch gesehen ist es auch möglich, weil Arrays Objekte sind, für ... zu verwenden:

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

Die Schleife für ... durchläuft alle Eigenschaften, nicht nur die numerischen.

Im Browser und in anderen Umgebungen gibt es so genannte „Array-ähnliche“ Objekte, die wie Arrays aussehen. Das heißt, sie haben Längen- und Indexeigenschaften, aber möglicherweise auch andere nicht numerische Eigenschaften und Methoden, die wir normalerweise nicht benötigen. Die for..in-Schleife listet sie jedoch auf. Wenn wir also mit Array-ähnlichen Objekten arbeiten müssen, können diese zusätzlichen Eigenschaften zu einem Problem werden.

Die for..in-Schleife ist für generische Objekte und nicht für Arrays optimiert und daher 10-100-mal langsamer. Natürlich ist es immer noch sehr schnell. Die Beschleunigung kann nur in Engpässen von Bedeutung sein. Trotzdem sollten wir uns des Unterschieds bewusst sein.

Im Allgemeinen sollten wir for..in nicht für Arrays verwenden.

0
Albert Leung