Qual è la differenza tra (per ... in) e (per ... di) in javascript?

Question

So cosa è il ciclo for... in (itera su chiave), ma sentito la prima volta su for... of (itera sopra il valore). Sono confuso con il ciclo for... of. 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 ottenuto è, per ... delle iterazioni sui valori delle proprietà. allora perché non registra (restituisce) "3", "5", "7","hello" anziché "3", "5", "7"? ma il ciclo for... in itera su ciascun tasto ("0", "1", "2", "foo"). qui il ciclo for... in esegue anche una iterazione sulla chiave foo. ma per ... di non iterarte sul valore di foo proprietà ie "hello". Perché è così?

Per farla in breve:

qui Mi consolo for... of loop. dovrebbe essere il registro "3", "5", "7","hello" ma qui registra "3", "5", "7". Perché ?

Example Link

Answer 1

for in loop oltre nomi di proprietà enumerabili di un oggetto.

for of (nuovo in ES6) utilizza uno object-specific iterator e loop sui valori generati da quello.

Nell'esempio, array iterator restituisce tutti i valori nell'array (ignorando le proprietà non di indice).

Answer 2

trovo una risposta completa a: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Anche se è per il tipo di script, questo è lo stesso per javascript troppo)

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

Here is an example that demonstrates this distinction:

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

Another distinction is that for..in operates on any object; it serves as a way to inspect properties on this object. for..of on the other hand, is mainly interested in values of iterable objects. Built-in objects like Map and Set implement Symbol.iterator property allowing access to stored values.

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

Answer 3

FOR-in un'iterazione sulle proprietà enumerabili di un oggetto, in arbitraria ordine.

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

Si può pensare ad esso come "per in" Fondamentalmente itera e la lista fuori 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"] 

Answer 4

Per ... in ciclo

Il ciclo for...in migliora le debolezze del ciclo for eliminando la logica di conteggio e 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, si devono ancora affrontare il problema di utilizzare un indice per accedere ai valori della matrice, e che puzza; fa quasi più confusione di prima.

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

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 ... in loop sono scoraggiati quando ciclare su array.

NOTE: The forEach loop is another type of for loop in JavaScript. However, forEach() is actually an array method, so it can only be used exclusively with arrays. There is also no way to stop or break a forEach loop. If you need that type of behavior in your loop, you’ll have to use a basic for loop.

Per ... del ciclo

Il ciclo for...of viene utilizzato per un ciclo su qualsiasi tipo di dati che è 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 il per ... del ciclo della versione più concisa di tutti i cicli for.

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

È possibile interrompere o interrompere a per ... di ciclo 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 dovete preoccuparvi di aggiunta di nuovi oggetti da oggetti. Il ciclo for di ... eseguirà solo il loop dei valori nell'oggetto.