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 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 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 main, est principalement intéressé par les valeurs des 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 traiter le 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'auparavant.

En outre, le for...in loop 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 parcourent 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:

0

1

2

3

4

5

6

7

8

9

Fonction() {  pour (let 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 également aucun 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...de boucle est utilisée pour boucler sur tout type de données qui est itérable.

Exemple:

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

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

Impressions:

0

1

2

3

4

5

6

7

8

9

Cela rend le for...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 de la for 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);
}

Impressions:

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 les propriétés énumérables d'un objet, dans un ordre arbitraire.

La boucle parcourra 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 le considérer comme "for in" itère fondamentalement 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 des objets Array, Map, String

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.

Note: - pour de {[8] } ne fonctionne qu'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 itérer, 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. L'espoir qu'il pourrait clairement la différence.

Le for...in 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...de l'instruction 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. En particulier lorsque vous travaillez sur de grands ensembles de données, lorsque les résultats semble 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