operator - ¿Cuál es la diferencia entre(para... en) y(para... de) declaraciones en JavaScript?

operadores logicos

Question

Sé lo que es for... in bucle (itera sobre la tecla), pero escuché la primera vez sobre for... of (itera sobre el valor). Estoy confundido con for... of bucle. No recibí adjetivo. Este es el código a continuación:

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

Lo que obtuve es, for... of iteraciones sobre valores de propiedad. entonces, ¿por qué no registra (devuelve) "3", "5", "7","hello" lugar de "3", "5", "7" ? pero for... in bucle iterar sobre cada tecla ("0", "1", "2", "foo"). aquí for... in bucle también iterar sobre la tecla foo . pero para ... de no iterarte sobre el valor de la propiedad foo es decir "hello" Por qué es así?

Larga historia en resumen:

aqui consola for... of bucle. debe ser log "3", "5", "7","hello" pero aquí registra "3", "5", "7" . Por qué ?

Enlace de ejemplo

Answer 1

Para ... en bucle

El bucle for ... in 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, todavía 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 meterlo en grandes problemas cuando necesita agregar un método adicional a una matriz (u otro objeto). Debido a que ... en bucles 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 0

1

2

3

4 4

5 5

6 6

7 7

8

9 9

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

Esta es la razón por la cual se desaconseja ... en bucles cuando se repite sobre matrices.

NOTA : El bucle forEach 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 romper un ciclo forEach. Si necesita ese tipo de comportamiento en su ciclo, tendrá que usar un ciclo básico para.

Para ... de bucle

El developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… loop se usa 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 0

1

2

3

4 4

5 5

6 6

7 7

8

9 9

Esto hace que for ... of loop 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 solucionan las debilidades del for y for ... en los bucles.

Puede detener o romper un bucle for ... 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 5

7 7

9 9

Y no tiene que preocuparse por agregar nuevas propiedades a los objetos. El for ... of loop solo recorrerá los valores del objeto.

Answer 2

Diferencia for..in y for..of :

Tanto for..in como for..of son construcciones en bucle que se utilizan para iterar sobre estructuras de datos. La única diferencia es sobre lo que iteran:

1. for..in itera sobre todas las claves de propiedad enumerables de un objeto
2. for..of itera sobre los valores de un objeto iterable. Ejemplos de objetos iterables son matrices, cadenas y listas de nodos.

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 bucle for..in itera sobre las teclas del objeto, que es un objeto de matriz en este ejemplo. Las claves son 0, 1, 2 que corresponden a los elementos de la matriz que agregamos y addedProp . Así es como se ve el objeto de matriz arr en devtools de Chrome:

Usted ve que nuestro bucle for..in no hace más que simplemente iterar sobre estos valores.

El bucle for..of en 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 utilizando for..of dependen del tipo de objeto iterable. Por ejemplo, una matriz devolverá los valores de todos los elementos de la matriz, mientras que una cadena devuelve cada carácter individual de la cadena.

Answer 3

Encuentro una respuesta completa en: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (aunque es para script tipo, esto es lo mismo para javascript también)

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

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 que for..in opera en 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. Los objetos implement Symbol.iterator como Map y Set implement Symbol.iterator propiedad implement Symbol.iterator 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"
}

Answer 4

Hay algunos tipos de datos ya definidos que nos permiten iterar sobre ellos fácilmente, por ejemplo, Array, Map, String Objects

Normal for in itera sobre el iterador y en respuesta nos proporciona las claves que están en el orden de inserción como se muestra en el siguiente ejemplo.

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

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

Ahora, si intentamos lo mismo con for of , en respuesta nos proporciona los valores, no las claves. p.ej

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

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

Entonces, mirando a los dos iteradores, podemos diferenciar fácilmente la diferencia entre ambos.

Nota: - Solo funciona con el Symbol.iterator

Entonces, si intentamos iterar sobre un objeto normal, entonces nos dará un error, por ejemplo:

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 habitación no es iterable

Ahora, para iterar, necesitamos definir un ES6 Symbol.iterator ej.

  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

Esta es la diferencia entre For in y For of . Espero que pueda aclarar la diferencia.

Answer 5

La instrucción for...in itera sobre las propiedades enumerables de un objeto, en un orden arbitrario. Las propiedades enumerables son aquellas propiedades cuyo indicador [[Enumerable]] interno se establece en verdadero, por lo tanto, si hay alguna propiedad enumerable en la cadena del prototipo, el bucle for...in iterará también en ellas.

La instrucción for...of itera sobre los datos que el objeto iterable define para ser iterados.

Ejemplo:

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
}

Como antes, puede omitir agregar hasOwnProperty for...of bucles.

Answer 6

La instrucción for-in itera sobre las propiedades enumerables de un objeto, en orden arbitrario.

El ciclo iterará sobre todas las propiedades enumerables del objeto mismo y aquellas que el objeto hereda del prototipo de su constructor.

Puedes considerarlo "for in" básicamente itera y enumera todas las claves.

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 7

La siguiente explicación de https://javascript.info/array me pareció muy útil:

Una de las formas más antiguas de ciclo de los elementos de la matriz es el ciclo for over over indexes:

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.

Técnicamente, debido a que las matrices son objetos, también es posible usar para..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:

El ciclo for..in itera sobre todas las propiedades, no solo las numéricas.

Existen los llamados objetos "tipo matriz" en el navegador y en otros entornos, que parecen matrices. Es decir, tienen propiedades de longitud e índices, pero también pueden tener otras propiedades y métodos no numéricos, que generalmente no necesitamos. Sin embargo, el bucle for..in los enumerará. Entonces, si necesitamos trabajar con objetos tipo matriz, entonces estas propiedades "adicionales" pueden convertirse en un problema.

El bucle for..in está optimizado para objetos genéricos, no para matrices, y por lo tanto es 10-100 veces más lento. Por supuesto, sigue siendo muy rápido. La aceleración solo puede importar en cuellos de botella. Pero aún así debemos ser conscientes de la diferencia.

En general, no deberíamos usar for..in para matrices.

Answer 8

Todos explicaron por qué ocurre este problema, pero aún así es muy fácil olvidarlo y luego rascarse la cabeza por qué obtuviste resultados incorrectos. Especialmente cuando trabajas en grandes conjuntos de datos cuando los resultados parecen estar bien a primera vista.

Usando Object.entries te aseguras de recorrer todas las propiedades:

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

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

/* Result:

3
5
7
hello

*/

Answer 9

Veo muchas buenas respuestas, pero decido poner mis 5 centavos solo para tener un buen ejemplo:

Para en bucle

itera sobre todos los accesorios enumerables

let nodes = document.documentElement.childNodes;

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

Para de bucle

itera sobre todos los valores iterables

let nodes = document.documentElement.childNodes;

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

Answer 10

for in bucles sobre nombres de propiedades enumerables de un objeto.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (nuevo en ES6) usa un iterador específico de objeto y recorre los valores generados por eso.

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

Answer 11

Otra diferencia entre los dos bucles, que nadie ha mencionado antes ( source ):

La desestructuración for...in está for...in desuso. Use for...of lugar.

Entonces, si queremos usar la destructuring en un bucle, para obtener tanto el índice como el valor de cada elemento de la matriz , debemos usar el bucle for...of con las entries() método Array entries() :

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