Je trouve une réponse complète à : https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Bien que ce soit pour le script de type, c'est la même chose pour javascript aussi)

Les deux instructions for..of et for..in itèrent sur des listes; les valeurs itéré sur sont différents cependant, for..in renvoie une liste de clés sur l'objet en cours d'itération, alors que for..of renvoie une liste de valeurs des propriétés numériques de l'objet en cours d'itération.

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 fonctionne sur n'importe quel objet; il sert comme un moyen d'inspecter les propriétés de cet objet. for..of de l'autre hand, s'intéresse principalement aux valeurs d'objets itérables. Intégré objets comme Map et Set implement Symbol.iterator propriété permettant l'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"
}

Pour...dans la boucle

Le for...in la boucle 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]);
}

Mais, vous devez toujours faire face au problème de l'utilisation d'un index pour accéder aux valeurs du tableau, et cela pue; cela le rend presque plus déroutant qu'avant.

Aussi, le for...in la boucle 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 les boucles bouclent 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]);
}

Imprime:

0

1

2

3

4

5

6

7

8

9

Fonction() {  pour (soit i = 0; i

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

REMARQUE : La boucle forEach est un autre type de boucle for en JavaScript. Cependant, forEach() est en fait une méthode de tableau, donc il ne peut être utilisé exclusivement avec des tableaux. Il n'y a pas non plus moyen d'arrêter ou de casser un boucle forEach. Si vous avez besoin de ce type de comportement dans votre boucle, vous verrez utiliser une base de boucle.

Pour...de boucle

Le pour...la boucle de est utilisée pour boucler tout type de données itérable.

Exemple:

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

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

Imprime:

0

1

2

3

4

5

6

7

8

9

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

Mais attendez, il y a plus! Le pour...de boucle a également quelques avantages supplémentaires qui corrigent les faiblesses du pour et for...in boucles.

Vous pouvez arrêter ou casser un pour...de la boucle à 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);
}

Imprime:

1

3

5

7

9

Et vous n'avez pas à vous soucier d'ajouter de nouvelles propriétés aux objets. Le pour...de la boucle ne boucle sur les valeurs de l'objet.

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

La boucle itérera sur toutes les propriétés énumérables de l'objet lui-même et celles dont l'objet hérite du prototype de son constructeur

Vous pouvez le considérer comme "for in" itère essentiellement et répertorie 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"]

Il existe des types de données déjà définis qui nous permettent de les parcourir facilement, par exemple Array, Map, String Objects

Normal dans itère sur l'itérateur et, en réponse, nous donne les clés qui sont dans l'ordre d'insertion, comme illustré 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 la même chose avec pour de , 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

Donc en regardant les deux itérateurs on peut facilement différencier la différence entre les deux.

Remarque:- de fonctionne uniquement avec le Symbole.itérateur

Donc, si nous essayons d'itérer sur 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 pièce n'est pas itérable

Maintenant, pour l'itération, nous devons définir un symbole ES6.itérateur 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 dans et de. J'espère que cela pourrait effacer la différence.

Le for...in l'instruction itère sur les propriétés énumérables d'un objet, dans un ordre arbitraire. Les propriétés Enumerable sont les propriétés dont l'indicateur interne [[Enumerable]] est défini sur true, par conséquent, s'il existe une propriété enumerable dans la chaîne prototype, le for...in la boucle itérera également sur ceux-ci.

Le pour...l'instruction of itère sur les données que l'objet itérable définit pour être itéré.

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" pour...des boucles.

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 vous avez obtenu de mauvais résultats. Surtout lorsque vous travaillez sur de gros ensembles de données, lorsque les résultats semblent aller bien à première vue.

En utilisant Object.entries vous vous assurez d'aller à travers 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