¿Diferencia entre declaraciones (para... en) y (para... de)?

Sé lo que es un for... inbucle (itera sobre las claves), pero escuché sobre él for... ofpor primera vez (itera sobre valores).

Estoy confundido acerca for... ofdel bucle.

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

Entiendo que for... ofitera sobre los valores de las propiedades. Entonces, ¿por qué no se registra "3", "5", "7", "hello"en lugar de "3", "5", "7"?

A diferencia for... indel bucle, que itera sobre cada clave ( "0", "1", "2", "foo") y también itera sobre la fooclave, for... of no itera sobre el valor de foola propiedad, es decir, "hello". ¿Por qué es así?

Aquí consuelo el bucle for... of. Debería iniciar sesión "3", "5", "7","hello"pero lo hace "3", "5", "7". ¿Por qué?

Enlace de ejemplo

Mar 27 '15 01:03 Mukund Kumar

Encontré una respuesta completa en Iteradores y Generadores (Aunque es para TypeScript, esto también es lo mismo para JavaScript)

Ambas declaraciones for..ofy for..initeran sobre listas; Sin embargo, los valores iterados son diferentes, for..indevuelve una lista de claves en el objeto que se itera, mientras que for..ofdevuelve una lista de valores de las propiedades numéricas del objeto que se itera.

Aquí hay un ejemplo que demuestra esta distinción:

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

Otra distinción es la que for..inopera sobre cualquier objeto; sirve como una forma de inspeccionar las propiedades de este objeto. for..ofpor otro lado, está interesado principalmente en valores de objetos iterables. A los objetos integrados les gustan Mape Setimplementan Symbol.iteratorpropiedades que permiten el acceso a los valores almacenados.

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

Jan 28 '2017 13:01 Alireza Fattahi

Diferencia for..iny for..of:

Ambos for..iny for..ofson construcciones en bucle que se utilizan para iterar sobre estructuras de datos. La única diferencia entre ellos son las entidades sobre las que iteran:

1. for..initera sobre todas las claves de propiedad enumerables de un objeto
2. for..ofitera sobre los valores de un objeto iterable . Ejemplos de objetos iterables son matrices, cadenas y NodeLists.

Ejemplo:

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

En este ejemplo podemos observar que el for..inbucle itera sobre las claves del objeto, que en este ejemplo es un objeto de matriz. Las claves son 0, 1, 2 (que corresponden a los elementos de la matriz) y addedProp. Así es como arrse ve el objeto de matriz en Chrome Devtools:

Verá que nuestro for..inbucle no hace más que simplemente iterar sobre estas claves.

El for..ofbucle de nuestro ejemplo itera sobre los valores de una estructura de datos. Los valores en este ejemplo específico son 'el1', 'el2', 'el3'. Los valores que devolverá una estructura de datos iterable for..ofdependen del tipo de objeto iterable. Por ejemplo, una matriz devolverá los valores de todos los elementos de la matriz, mientras que una cadena devolverá cada carácter individual de la cadena.

Oct 17 '2018 12:10 Willem van der Veen