So cos'è for... inloop (iterates over key), ma ne ho sentito parlare per la prima volta for... of(iterates over value).

Sono confuso con il for... ofciclo. Non ho ricevuto l'aggettivo. Questo è il codice qui sotto:

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"
}

Quello che ho è, for... ofscorre sui valori delle proprietà. Allora perché non registra (return) "3", "5", "7", "hello"invece di "3", "5", "7"? mafor... in ciclo scorre su ogni tasto ( "0", "1", "2", "foo"). Qui il for... inciclo scorre anche sulla foochiave. Ma for... ofnon scorre sul valore della fooproprietà, ad es "hello". Perché è così?

Per farla breve:

Qui consolo for... ofloop. Dovrebbe registrare "3", "5", "7","hello"ma qui registra "3", "5", "7". Perché ?

Link di esempio

for in scorre i nomi di proprietà enumerabili di un oggetto.

for of(nuovo in ES6) utilizza un iteratore specifico dell'oggetto e passa in rassegna i valori generati da quello.

Nel tuo esempio, l' iteratore dell'array restituisce tutti i valori dell'array (ignorando le proprietà non indice).

Trovo una risposta completa su: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Anche se è per lo script di tipo, questo è lo stesso anche per JavaScript)

Entrambe for..ofe le for..indichiarazioni ripetono le liste; i valori su iterati sono tuttavia diversi, for..inrestituisce un elenco di chiavi sull'oggetto da iterare, mentre for..ofrestituisce un elenco di valori delle proprietà numeriche dell'oggetto da iterare.

Ecco un esempio che dimostra questa distinzione:

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"
}

Un'altra distinzione è che for..in opera su qualsiasi oggetto; serve come un modo per ispezionare le proprietà su questo oggetto. for..ofd'altra parte, è principalmente interessato ai valori di oggetti iterabili. Oggetti incorporati come la implement Symbol.iteratorproprietà Map e Set che consente l'accesso ai valori memorizzati.

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"
}

Per ... in loop

Il ciclo for ... in migliora i punti deboli del ciclo for eliminando la logica di conteggio e la condizione di uscita.

Esempio:

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

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

Ma devi ancora affrontare il problema dell'utilizzo di un indice per accedere ai valori dell'array e questo puzza; lo rende quasi più confuso di prima.

Inoltre, il ciclo for ... in può causare grossi problemi quando è necessario aggiungere un metodo aggiuntivo a un array (o un altro oggetto). Perché per ... in loop scorre su tutte le proprietà enumerabili, ciò significa che se aggiungi proprietà aggiuntive al prototipo dell'array, anche quelle proprietà verranno visualizzate nel loop.

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]);
}

stampe:

0

1

2

3

4

5

6

7

8

9

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

Questo è il motivo per cui ... nei loop sono scoraggiati quando si esegue il loop su array.

NOTA : il ciclo forEach è un altro tipo di ciclo for in JavaScript. Tuttavia, in forEach()realtà è un metodo array, quindi può essere utilizzato esclusivamente con array. Non è inoltre possibile interrompere o interrompere un ciclo forEach. Se hai bisogno di quel tipo di comportamento nel tuo ciclo, dovrai usare un ciclo base per.

Per ... di loop

Il ciclo for ... of viene utilizzato per eseguire il loop su qualsiasi tipo di dati iterabile.

Esempio:

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

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

stampe:

0

1

2

3

4

5

6

7

8

9

Questo rende for ... of loop la versione più concisa di tutti i loop for.

Ma aspetta, c'è di più! Il ciclo for ... of ha anche alcuni vantaggi aggiuntivi che risolvono i punti deboli di for e for ... nei loop.

Puoi interrompere o interrompere un ciclo for ... of in qualsiasi momento.

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);
}

stampe:

1

3

5

7

9

E non devi preoccuparti di aggiungere nuove proprietà agli oggetti. Il ciclo for ... of passa in rassegna solo i valori nell'oggetto.

Differenza for..ine for..of:

Entrambi for..ine for..ofsono costrutti loop che vengono utilizzati per iterare su strutture di dati. L'unica differenza è su ciò che ripetono:

1. for..inscorre su tutte le chiavi di proprietà enumerabili di un oggetto
2. for..ofscorre i valori di un oggetto iterabile. Esempi di oggetti iterabili sono matrici, stringhe e NodeList.

Esempio:

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 questo esempio possiamo osservare che il for..inciclo scorre le chiavi dell'oggetto, che in questo esempio è un oggetto array. Le chiavi sono 0, 1, 2 che corrispondono agli elementi dell'array che abbiamo aggiunto e addedProp. Ecco come arrappare l'oggetto array nei devtools di Chrome:

Vedi che il nostro for..inloop non fa altro che semplicemente iterare su questi valori.

Il for..ofciclo nel nostro esempio scorre i valori di una struttura di dati. I valori in questo esempio specifico sono 'el1', 'el2', 'el3'. I valori che una struttura di dati iterabile restituirà utilizzando for..ofdipende dal tipo di oggetto iterabile. Ad esempio un array restituirà i valori di tutti gli elementi dell'array mentre una stringa restituisce ogni singolo carattere della stringa.

L' for...inistruzione scorre le enumerabili proprietà di un oggetto, in un ordine arbitrario. Le proprietà enumerabili sono quelle il cui flag interno [[Enumerable]] è impostato su true, quindi se esiste una proprietà enumerabile nella catena di prototipi, il for...inciclo eseguirà l'iterazione anche su quelle.

L' for...ofistruzione scorre sui dati che l'oggetto iterabile definisce per essere iterati.

Esempio:

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
}

Come in precedenza, puoi saltare l'aggiunta hasOwnPropertydi for...ofloop.

L'istruzione for-in scorre le enumerabili proprietà di un oggetto, in ordine arbitrario.

Il ciclo ripeterà tutte le proprietà enumerabili dell'oggetto stesso e quelle che l'oggetto eredita dal prototipo del suo costruttore

Puoi pensarlo come "for in" sostanzialmente scorre ed elenca tutte le chiavi.

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"]

Esistono alcuni tipi di dati già definiti che ci consentono di scorrere facilmente su di essi, ad esempio Array, Map, String Objects

Normale per in iterate sull'iteratore e in risposta ci fornisce le chiavi che sono nell'ordine di inserimento come mostrato nell'esempio seguente.

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

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

Ora se proviamo lo stesso con for of , allora in risposta ci fornisce i valori e non le chiavi. per esempio

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

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

Quindi, osservando entrambi gli iteratori, possiamo facilmente distinguere la differenza tra entrambi.

Nota: - Per funziona solo con Symbol.iterator

Quindi se proviamo a scorrere sull'oggetto normale, allora ci darà un errore ad es.

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);
 } 

La camera non è ripetibile

Ora per iterare dobbiamo definire un Symbol.iterator ES6 ad es

  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

Questa è la differenza tra For in e For of . Spero che possa cancellare la differenza.

Un'altra differenza tra i due loop, che nessuno ha mai menzionato prima:

La ristrutturazione for...inè deprecata. Usa for...ofinvece.

fonte

Quindi, se vogliamo usare la destrutturazione in un ciclo, per ottenere sia l' indice che il valore di ciascun elemento dell'array , dovremmo usare il for...ofciclo con il metodo Arrayentries() :

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

Tutti hanno spiegato perché si verifica questo problema, ma è ancora molto facile dimenticarsene e poi grattarsi la testa perché hai ottenuto risultati sbagliati. Soprattutto quando stai lavorando su grandi insiemi di dati quando i risultati sembrano andare bene a prima vista.

Usando Object.entriessi assicura di passare attraverso tutte le proprietà:

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

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

/* Result:

3
5
7
hello

*/

A vedere molte buone risposte, ma decido di mettere i miei 5 centesimi solo per avere un buon esempio:

Per in loop

scorre su tutti i numerosi oggetti di scena

let nodes = document.documentElement.childNodes;

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

Per of loop

scorre su tutti i valori iterabili

let nodes = document.documentElement.childNodes;

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

Quando ho iniziato a studiare il for in e of loop , ero confuso anche con il mio output, ma con un paio di ricerche e comprensione puoi pensare al singolo loop come il seguente:

1. perché ... in loop restituisce gli indici della singola proprietà e non ha alcun effetto di impatto sul valore della proprietà , esegue il loop e restituisce informazioni sulla proprietà e non sul valore . Per esempio

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

Il codice sopra sta semplicemente creando un oggetto chiamato profilo , lo useremo per entrambi i nostri esempi , quindi non essere confuso quando vedi l' oggetto profilo su un esempio, sappi solo che è stato creato.

Quindi ora usiamo il ciclo for ... in basso

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

Ora il motivo per cui l'output è che abbiamo quattro (4) proprietà nel nostro oggetto profilo e l'indicizzazione come tutti sappiamo inizia da 0 ... n , quindi otteniamo l'indice delle proprietà 0,1,2,3 poiché siamo lavorando con il ciclo for..in .

2. perché ... of loop * può restituire la proprietà , il valore o entrambi , diamo un'occhiata a come. In javaScript, non possiamo scorrere normalmente gli oggetti come faremmo sugli array, quindi ci sono alcuni elementi che possiamo usare per accedere a una delle nostre scelte da un oggetto.

   • Object.keys ( nome-oggetto-va-qui ) >>> Restituisce le chiavi o le proprietà di un oggetto.

   • Object.values ( nome-oggetto-va-qui ) >>> Restituisce i valori di un oggetto.

   • Object.entries ( nome-oggetto-va-qui ) >>> Restituisce sia le chiavi che i valori di un oggetto.

Di seguito sono riportati esempi del loro utilizzo, prestare attenzione a Object.entries () :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Quando si utilizza Object.entries () è necessario chiamare due voci sull'oggetto, ovvero le chiavi e i valori. È possibile chiamare entrambi da una delle voci. Esempio sotto.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

Scrivi commenti su sezioni non chiare.

Il for-inciclo

for-inIl ciclo viene utilizzato per attraversare le proprietà enumerabili di una raccolta, in un ordine arbitrario . Una raccolta è un oggetto di tipo contenitore i cui elementi possono utilizzare un indice o una chiave.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-inloop estrae le proprietà enumerabili ( chiavi ) di una raccolta tutte in una volta e scorre su di essa una alla volta. Una proprietà enumerabile è la proprietà di una raccolta che può apparire in for-inloop.

Per impostazione predefinita, tutte le proprietà di una matrice e di un oggetto appaiono in for-inloop. Tuttavia, possiamo usare il metodo Object.defineProperty per configurare manualmente le proprietà di una raccolta.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

Nell'esempio sopra, la proprietà ddi myObjecte l'indice 3di myArraynon appaiono in for-inloop perché sono configurati con enumerable: false.

Ci sono alcuni problemi con i for-inloop. Nel caso di array, anche il for-inloop considererà methodsaggiunto sull'array usando la myArray.someMethod = fsintassi, tuttavia myArray.lengthrimane 4.

Il for-ofciclo

È un'idea sbagliata che for-ofscorre ripetutamente sui valori di una raccolta. for-ofciclo scorre ripetutamente su un Iterableoggetto. Un iterabile è un oggetto che ha il metodo con il nome Symbol.iteratordirettamente su di esso su uno dei suoi prototipi.

Symbol.iteratoril metodo dovrebbe restituire un Iteratore . Un iteratore è un oggetto che ha un nextmetodo. Questo metodo viene chiamato return valuee doneproperties.

Quando ripetiamo un oggetto iterabile usando il for-ofciclo, Symbol.iteratoril metodo verrà chiamato una volta ottenuto un oggetto iteratore . Per ogni iterazione del for-ofciclo, il nextmetodo di questo oggetto iteratore verrà chiamato fino a quando non viene donerestituito dalla next()chiamata restituisce false. Il valore ricevuto dal for-ofciclo per ogni iterazione se la valueproprietà restituita dalla next()chiamata.

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

Il for-ofloop è nuovo in ES6, così come Iterable e Iterables . Il Arraytipo di costruttore ha Symbol.iteratormetodo sul suo prototipo. Il Objectcostruttore purtroppo non ce l'ha ma Object.keys(), Object.values()e i Object.entries()metodi restituiscono un iterabile ( puoi usare console.dir(obj)per verificare i metodi prototipo ). Il vantaggio del for-ofloop è che qualsiasi oggetto può essere reso iterabile, anche personalizzato DogeAnimal classi.

Il modo più semplice per rendere iterabile un oggetto è implementando ES6 Generator anziché l'implementazione personalizzata .

Diversamente for-in, il for-ofciclo può attendere il completamento di un'attività asincrona in ogni iterazione. Questo si ottiene utilizzando la awaitparola chiave dopo la documentazionefor dell'istruzione .

Un'altra cosa grandiosa di for-ofloop è che ha il supporto Unicode. Secondo le specifiche ES6, le stringhe vengono archiviate con codifica UTF-16. Quindi, ogni personaggio può prendere 16-bito 32-bit. Tradizionalmente, le stringhe venivano archiviate con la codifica UCS-2 che supporta supporti per i caratteri che possono essere memorizzati 16 bitssolo all'interno .

Quindi, String.lengthrestituisce il numero di 16-bitblocchi in una stringa. I personaggi moderni come un personaggio Emoji richiedono 32 bit. Quindi, questo personaggio restituirebbe length2. for-inloop itera su 16-bitblocchi e restituisce l'errore index. Tuttavia, il for-ofciclo scorre il singolo carattere in base alle specifiche UTF-16.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

Ho trovato molto utile la seguente spiegazione di https://javascript.info/array :

Uno dei modi più antichi per scorrere gli elementi dell'array è il ciclo per gli indici:

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.

Tecnicamente, poiché le matrici sono oggetti, è anche possibile utilizzare per..in:

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:

Il ciclo per..in scorre su tutte le proprietà, non solo su quelle numeriche.

Esistono oggetti cosiddetti "simili a array" nel browser e in altri ambienti, che sembrano array. Cioè, hanno proprietà di lunghezza e indici, ma possono anche avere altre proprietà e metodi non numerici, che di solito non ci servono. Il ciclo for..in li elencherà comunque. Quindi, se abbiamo bisogno di lavorare con oggetti simili a array, allora queste proprietà "extra" possono diventare un problema.

Il ciclo for..in è ottimizzato per oggetti generici, non array, e quindi è 10-100 volte più lento. Certo, è ancora molto veloce. L'accelerazione può avere importanza solo nei colli di bottiglia. Ma dovremmo comunque essere consapevoli della differenza.

Generalmente, non dovremmo usare for..in per gli array.

Ecco un utile mnemonico per ricordare la differenza tra for...inLoop e for...ofLoop.

"indicizza in, oggetto di"

for...in Loop=> scorre sull'indice nell'array.

for...of Loop=> scorre sull'oggetto degli oggetti.