sé lo que es un for... in bucle (se itera sobre las teclas), pero he oído hablar de for... of por primera vez (se itera sobre los valores).

estoy confundido acerca de for... of 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... of itera sobre los valores de propiedad. Entonces, ¿por qué no registra "3", "5", "7", "hello" en lugar de "3", "5", "7"?

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

Aquí me consuelo for... of bucle. debería iniciar sesión "3", "5", "7","hello" pero se registra "3", "5", "7". ¿Por qué?

Enlace de ejemplo

for in recorre los nombres de propiedades enumerables de un objeto.

for of (nuevo en ES6) utiliza un específico del objeto iterador y recorre los valores generados por eso.

En tu ejemplo, el iterador de matriz produce todos los valores en la matriz (ignorando las propiedades que no son de índice).

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

Ambos for..of y for..in las declaraciones iteran sobre las listas; Sin embargo, los valores iterados son diferentes, for..in devuelve una lista de claves en el objeto que se está iterando, mientras que for..of devuelve una lista de valores de las propiedades numéricas del objeto que se está iterando.

He aquí 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 que for..in opera sobre cualquier objeto; sirve como una forma de inspeccionar las propiedades de este objeto. for..of por otro lado, está principalmente interesado en valores de objetos iterables. Objetos integrados como Map y Set implementar Symbol.iterator propiedad que permite 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"
}

Diferencia for..in y for..of:

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

1. for..in itera sobre todos los enumerables claves de propiedad de un objeto
2. for..of itera sobre el 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..in loop itera sobre las claves del objeto, que es un objeto de matriz en este ejemplo. Las claves son 0, 1, 2 (que corresponden a los elementos del arreglo) y addedProp. Así es como el arr El objeto de matriz se ve en las herramientas de desarrollo de Chrome:

Ves que nuestro for..in loop no hace nada más que simplemente iterar sobre estas claves.

El for..of bucle en nuestro ejemplo itera sobre el 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 iterables usando for..of depende 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.

Para… en bucle

El para… en loop mejora las debilidades del bucle for al eliminar la lógica de conteo y la condición de salida.

Ejemplo:

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

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

Pero aún tiene que lidiar con el problema de usar un índice para acceder a los valores de la matriz, y eso apesta; casi lo hace más confuso que antes.

Además, el bucle for…in puede causarle grandes problemas cuando necesita agregar un método adicional a una matriz (u otro objeto). Debido a que los bucles for…in recorren todas las propiedades enumerables, esto significa que si agrega propiedades adicionales al prototipo de la matriz, esas propiedades también aparecerán en el bucle.

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

Huellas dactilares:

0

1

2

3

4

5

6

7

8

9

function() { for (let i = 0; i

Esta es la razón por la que se desaconsejan los bucles for…in cuando se realiza un bucle sobre matrices.

NOTA: El forEach bucle es otro tipo de bucle for en JavaScript. Sin embargo, forEach() es en realidad un método de matriz, por lo que solo se puede usar exclusivamente con matrices. Tampoco hay forma de detener o interrumpir un bucle forEach. Si necesita ese tipo de comportamiento en su bucle, tendrá que usar un bucle for básico.

Para… de bucle

El para… de loop se utiliza para recorrer cualquier tipo de datos que sea iterable.

Ejemplo:

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

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

Huellas dactilares:

0

1

2

3

4

5

6

7

8

9

Esto hace que el bucle for…of sea la versión más concisa de todos los bucles for.

¡Pero espera hay mas! El bucle for…of también tiene algunos beneficios adicionales que corrigen las debilidades de los bucles for y for…in.

Puede detener o interrumpir un bucle for…of en cualquier 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);
}

Huellas dactilares:

1

3

5

7

9

Y no tiene que preocuparse por agregar nuevas propiedades a los objetos. El bucle for…of solo repetirá los valores en el objeto.

Aquí hay una regla mnemotécnica útil para recordar la diferencia entre for...in Bucle y for...of Bucle.

“índice en, objeto de”

for...in Loop => itera sobre el índice en la matriz

for...of Loop => itera sobre el objeto de objetos.

for of se utiliza para iterar sobre iterables y for in se utiliza para iterar sobre las propiedades del objeto

Aquí hay un truco para recordar:

for of no es para objects (así que es para iterables)

for in no es para iterables (así que es para objetos)

Otro truco:

for in objeto devuelto endados (llaves) mientras for of devuelve valores

//for in, itera claves en un objeto e indexa en una matriz

 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

//para of, itera valores en una matriz o cualquier iterable

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

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