web-dev-qa-db-fra.com

Quelle est la différence entre les instructions (for ... in) et (for ... of) en JavaScript?

Je sais ce qu'est la boucle for... in (itération sur clé), mais j'ai entendu pour la première fois parler de for... of (itération sur valeur). Je suis confondu avec la boucle for... of. Je n'ai pas eu d'adject. C'est le code ci-dessous:

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

Ce que j'ai obtenu est, for... of itère sur les valeurs de propriété. alors pourquoi il ne se connecte pas (retourne) "3", "5", "7","hello" au lieu de "3", "5", "7"? mais la boucle for... in parcourt chaque touche ("0", "1", "2", "foo"). Ici, la boucle for... in parcourt également la clé foo. mais pour ... de ne pas iterarte sur la valeur de la propriété foo c'est-à-dire "hello". Pourquoi c'est comme ça?

Longue histoire en bref:

ici je console for... of boucle. ce devrait être log "3", "5", "7","hello" mais ici il enregistre "3", "5", "7". Pourquoi ?

Exemple de lien

javascriptarraysobject
270
Mukund Kumar

for in boucle sur les noms de propriétés énumérables d'un objet.

for of (nouveauté de ES6) utilise un iterator et spécifie les boucles générées par cette opération.

Dans votre exemple, le itérateur du tableau renvoie toutes les valeurs du tableau (en ignorant les propriétés non indexées).

203
Bergi

Je trouve une réponse complète sur: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (bien qu’il s’agisse d’un script de type, il en va de même pour javascript)

Les instructions for..of et for..in parcourent les listes. les valeurs itérés sur sont différents cependant, for..in renvoie une liste de clés sur l'objet étant itéré, alors que for..of renvoie une liste de valeurs des propriétés numériques de l'objet itéré.

Voici un exemple qui démontre cette 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"
}

Une autre distinction est que for..in opère sur tout objet; ça sert comme moyen d'inspecter les propriétés de cet objet. for..of de l'autre main, s’intéresse principalement aux valeurs des objets itérables. Intégré des objets tels que Map et Set implement Symbol.iterator qui permettent accès aux valeurs stockées.

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"
}
170
Alireza Fattahi

Pour ... en boucle

La boucle for ... in améliore les faiblesses de la boucle for en éliminant la logique de comptage et la condition de sortie.

Exemple:

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

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

Cependant, vous devez encore traiter le problème de l'utilisation d'un index pour accéder aux valeurs du tableau, et ça pue; cela le rend presque plus déroutant qu'auparavant.

En outre, la boucle for ... in peut vous causer de gros problèmes lorsque vous devez ajouter une méthode supplémentaire à un tableau (ou à un autre objet). Parce que for ... in boucles boucle sur toutes les propriétés énumérables, cela signifie que si vous ajoutez des propriétés supplémentaires au prototype du tableau, ces propriétés apparaîtront également dans la boucle.

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

Impressions:

1

2

3

4

5

6

7

8

9

une fonction() { pour (soit i = 0; i <this.length; i ++) { ceci [i] = ceci [i] .toFixed (2); } }

C'est pourquoi les boucles for ... in sont déconseillées lors d'une boucle sur des tableaux.

NOTE: la boucle forEach est un autre type de boucle for en JavaScript . Cependant, forEach() est en réalité une méthode tableau, elle ne peut donc être utilisée que exclusivement avec des tableaux. Il n'y a également aucun moyen d'arrêter ou de casser un pour chaque boucle. Si vous avez besoin de ce type de comportement dans votre boucle, vous aurez doivent utiliser une base pour la boucle.

Pour ... de boucle

La boucle pour ... de est utilisée pour effectuer une boucle sur tout type de données pouvant être itéré.

Exemple:

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

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

Impressions:

1

2

3

4

5

6

7

8

9

Cela fait de la boucle for de la version la plus concise de toutes les boucles for.

Mais attendez, il y a plus! La boucle for ... of présente également des avantages supplémentaires qui corrigent les faiblesses des boucles for et for ... in.

Vous pouvez arrêter ou interrompre une boucle de ... à tout moment.

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

Impressions:

1

3

5

7

9

Et vous n'avez pas à vous soucier d'ajouter de nouvelles propriétés aux objets. La boucle for ... of ne boucle que sur les valeurs de l'objet.

32
Elar

L'instruction for-in effectue une itération sur les propriétés énumérables d'un objet, dans un ordre arbitraire.

La boucle va parcourir toutes les propriétés énumérables de l'objet lui-même et celles que l'objet hérite du prototype de son constructeur. 

Vous pouvez penser à cela comme "pour dans", essentiellement itérer et lister toutes les clés.

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

Il existe certains types de données déjà définis qui nous permettent de les parcourir facilement, par exemple des objets de tableau, de carte ou de chaîne.

Normal pour in itère sur l'itérateur et nous fournit en réponse les clés qui sont dans l'ordre d'insertion, comme indiqué dans l'exemple ci-dessous.

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

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

Maintenant, si nous essayons de même avec pour of , alors en réponse, il nous fournit les valeurs et non les clés. par exemple 

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

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

Ainsi, en regardant les deux itérateurs, nous pouvons facilement différencier les deux.

Remarque: - For of ne fonctionne qu'avec Symbol.iterator

Donc, si nous essayons de parcourir un objet normal, cela nous donnera une erreur, par exemple:

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 chambre n'est pas iterable

Maintenant, pour itérer, nous devons définir un ES6 Symbol.iterator par exemple

  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

C'est la différence entre pour in et pour of . J'espère que cela pourra effacer la différence. 

4
Amit Mundra

Différence for..in et for..of:

for..in et for..of sont des constructions en boucle utilisées pour parcourir des structures de données. La seule différence est sur ce qu'ils itèrent:

  1. for..in itère sur toutes les clés énumérables property d'un objet
  2. for..of itère sur les values ​​ d'un objet itérable. Les exemples d'objets itérables sont les tableaux, les chaînes et les NodeLists.

Exemple:

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

Dans cet exemple, nous pouvons observer que la boucle for..in itère sur les clés de l'objet, qui est un objet tableau dans cet exemple. Les clés sont 0, 1, 2 qui correspondent aux éléments du tableau que nous avons ajoutés et addedProp. Voici à quoi ressemble l'objet tableau arr dans chrome devtools:

 enter image description here

Vous voyez que notre boucle for..in ne fait rien de plus qu'une simple itération sur ces valeurs.

La boucle for..of de notre exemple parcourt les values ​​ d'une structure de données. Les valeurs dans cet exemple spécifique sont 'el1', 'el2', 'el3'. Les valeurs qu'une structure de données itérable renverra à l'aide de for..of dépendent du type d'objet itérable. Par exemple, un tableau renverra les valeurs de tous les éléments du tableau, tandis qu'une chaîne renverra chaque caractère individuel de la chaîne.

4
Willem van der Veen

L'instructionfor...ineffectue une itération sur les propriétés énumérables d'un objet, dans un ordre arbitraire . Les propriétés énumérables sont celles dont l'indicateur internal [[Enumerable]] est défini sur true. la chaîne de prototypes, la boucle for...in itérera également sur ceux-ci.

L'instructionfor...ofeffectue une itération sur les données que l'objet itérable définit comme itératives.

Exemple: 

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
}

Comme précédemment, vous pouvez ignorer l’ajout de hasOwnProperty dans les boucles for...of.

4
Ramandeep Sohi

Tout le monde a expliqué pourquoi ce problème se produit, mais il est toujours très facile de l'oublier et de se gratter la tête, pourquoi on a eu de mauvais résultats. Surtout lorsque vous travaillez sur de gros ensembles de données lorsque les résultats semblent bons au premier abord.

En utilisant Object.entries, vous vous assurez de parcourir toutes les propriétés:

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

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

/* Result:

3
5
7
hello

*/
1
David C.

Une autre différence entre les deux boucles, que personne n’a encore mentionnée ( source ):

La destruction for...in est obsolète. Utilisez for...of à la place.

Donc si nous voulons utiliser déstructurer dans une boucle, pour obtenir à la fois index et valeur de chaque élément array, nous devrions utiliser la boucle for...of avec la méthode Arrayentries() :

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

A voir beaucoup de bonnes réponses, mais je décide de mettre mes 5 centimes juste pour avoir un bon exemple:

Pour en boucle

itère sur tous les accessoires enumerable

let nodes = document.documentElement.childNodes;

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

Pour de la boucle

itère sur toutes les valeurs itérables

let nodes = document.documentElement.childNodes;

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

0
WebBrother

J'ai trouvé l'explication suivante de https://javascript.info/array très utile:

L'une des méthodes les plus anciennes de cycle des éléments de tableau est la boucle for over sur les index:

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.

Techniquement, comme les tableaux sont des objets, il est également possible d’utiliser for..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:

La boucle for..in parcourt toutes les propriétés, pas seulement les propriétés numériques.

Il existe des objets dits "de type tableau" dans le navigateur et dans d'autres environnements, qui ressemblent à des tableaux. C’est-à-dire qu’ils ont les propriétés long et index, mais ils peuvent également avoir d’autres propriétés et méthodes non numériques, ce dont nous n’avons généralement pas besoin. La boucle for..in les listera cependant. Donc, si nous devons travailler avec des objets de type tableau, ces propriétés "supplémentaires" peuvent devenir un problème.

La boucle for..in est optimisée pour les objets génériques, et non pour les tableaux, et est donc 10 à 100 fois plus lente. Bien sûr, c’est encore très rapide. L'accélération peut n'importer que dans les goulots d'étranglement. Mais il faut quand même être conscient de la différence.

En général, nous ne devrions pas utiliser for..in pour les tableaux.

0
Albert Leung