Je sais ce qu'est la for... inboucle (itère sur la clé), mais entend la première fois for... of(itère sur la valeur).

Je suis confondu avec la for... ofboucle. Je n'ai pas été adjecté. Voici 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... ofitère sur les valeurs des propriétés. Alors pourquoi il ne se connecte pas (retour) "3", "5", "7", "hello"au lieu de "3", "5", "7"? mais la for... inboucle itère sur chaque touche ( "0", "1", "2", "foo"). Ici, la for... inboucle parcourt également la fooclé. Mais for... ofn'itère pas sur la valeur de la foopropriété ie "hello". Pourquoi c'est comme ça?

Longue histoire en bref:

Ici, je for... ofboucle la console . Il devrait se connecter, "3", "5", "7","hello"mais ici, il se connecte "3", "5", "7". Pourquoi ?

Exemple de lien

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

for of(nouveau dans ES6) utilise un itérateur spécifique à l'objet et boucle sur les valeurs générées par cela.

Dans votre exemple, l' itérateur de tableau produit toutes les valeurs du tableau (en ignorant les propriétés non indexées).

Je trouve une réponse complète sur: 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 for..ofet les for..indéclarations parcourent les listes; les valeurs itérées sont cependant différentes, for..inrenvoie une liste de clés sur l'objet en cours d'itération, tandis que for..ofrenvoie une liste de valeurs des propriétés numériques de l'objet en cours d'itération.

Voici un exemple qui illustre 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 n'importe quel objet; il sert à inspecter les propriétés de cet objet. for..ofd'autre part, s'intéresse principalement aux valeurs des objets itérables. Objets intégrés comme la carte et la implement Symbol.iteratorpropriété Set permettant d'accéder 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 ... 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]);
}

Mais, vous devez toujours faire face à la question de l'utilisation d'un index pour accéder aux valeurs du tableau, et cela pue; cela rend presque plus confus qu'auparavant.

De plus, 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 pour ... dans les 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]);
}

Tirages:

0

1

2

3

4

5

6

7

8

9

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

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

REMARQUE : la boucle forEach est un autre type de boucle for en JavaScript. cependant,forEach() s'agit en fait d'une méthode de tableau, elle ne peut donc être utilisée qu'avec des tableaux. Il n'y a également aucun moyen d'arrêter ou d'interrompre une boucle forEach. Si vous avez besoin de ce type de comportement dans votre boucle, vous devrez utiliser une boucle for de base.

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

Tirages:

0

1

2

3

4

5

6

7

8

9

Cela fait de la boucle for ... of 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 à tout moment arrêter ou interrompre une boucle for ... of.

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

Tirages:

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 boucle uniquement sur les valeurs de l'objet.

Différence for..inetfor..of :

Les deux for..inet for..ofsont des constructions en boucle qui sont utilisées pour parcourir les structures de données. La seule différence est sur ce qu'ils itèrent:

1. for..inparcourt toutes les clés de propriété énumérables d'un objet
2. for..ofitère sur les valeurs d'un objet itérable. Des 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 for..inboucle 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 arrressemble l'objet tableau dans devtools chrome:

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

La for..ofboucle de notre exemple itère sur les valeurs d'une structure de données. Les valeurs de cet exemple spécifique sont 'el1', 'el2', 'el3'. Les valeurs qu'une structure de données itérable renverra en utilisant for..ofdépendent du type d'objet itérable. Par exemple, un tableau renvoie les valeurs de tous les éléments du tableau tandis qu'une chaîne renvoie chaque caractère individuel de la chaîne.

L' for...ininstruction parcourt les propriétés énumérables d'un objet, dans un ordre arbitraire. Les propriétés énumérables sont les propriétés dont l'indicateur interne [[Enumerable]] est défini sur true. Par conséquent, s'il existe une propriété énumérable dans la chaîne de prototype, la propriétéfor...in boucle itérera également sur celles-ci.

L' for...ofinstruction parcourt les données que l'objet itératif définit pour être itérées.

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 hasOwnPropertyde for...ofboucles.

L'instruction for-in parcourt 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 dont l'objet hérite du prototype de son constructeur

Vous pouvez le considérer comme "for in" itère 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 certains types de données déjà définis qui nous permettent de les parcourir facilement, par exemple Array, Map, String Objects

Normal pour en itère sur l'itérateur et en réponse nous fournit 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 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, nous pouvons facilement différencier la différence entre les deux.

Remarque: - Pour ne fonctionne qu'avec le Symbol.iterator

Donc, si nous essayons d'itérer sur un objet normal, cela nous donnera par exemple une erreur-

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 itérable

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

Il s'agit de la différence entre For in et For of . J'espère que cela pourrait effacer la différence.

Une autre différence entre les deux boucles, que personne n'a mentionnée auparavant:

La restructuration for...inest déconseillée. Utilisez for...ofplutôt.

La source

Donc, si nous voulons utiliser la déstructuration dans une boucle, pour obtenir à la fois l' index et la valeur de chaque élément du tableau , nous devons utiliser la for...ofboucle avec la méthode Arrayentries() :

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

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 bons à première vue.

En Object.entriesvous assurant 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

*/

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

Pour en boucle

itère sur tous les accessoires énumérables

let nodes = document.documentElement.childNodes;

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

Pour de boucle

itère sur toutes les valeurs itérables

let nodes = document.documentElement.childNodes;

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

Quand j'ai commencé à apprendre la dans et de la boucle , je confondais avec ma sortie aussi, mais avec un couple de la recherche et la compréhension , vous pouvez penser à la boucle individuelle comme suit: La

1. for ... in loop renvoie les index de la propriété individuelle et n'a aucun effet sur la valeur de la propriété , il boucle et renvoie des informations sur la propriété et non sur la valeur . Par exemple

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

Le code ci-dessus crée simplement un objet appelé profil , nous l'utiliserons pour nos deux exemples , donc, ne soyez pas confus lorsque vous voyez l' objet profil sur un exemple, sachez simplement qu'il a été créé.

Alors maintenant, utilisons la boucle for ... in ci-dessous

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

Maintenant, la raison pour laquelle la sortie est que nous avons quatre (4) propriétés dans notre objet de profil et que l'indexation comme nous le savons tous commence à 0 ... n , donc, nous obtenons l'index des propriétés 0,1,2,3 puisque nous sommes travailler avec la boucle for..in .

2. for ... of loop * peut retourner la propriété , la valeur ou les deux , Voyons comment. En javaScript, nous ne pouvons pas parcourir les objets normalement comme nous le ferions sur des tableaux, donc, il y a quelques éléments que nous pouvons utiliser pour accéder à l'un de nos choix à partir d'un objet.

   • Object.keys ( nom-objet-va-ici ) >>> Renvoie les clés ou les propriétés d'un objet.

   • Object.values ( nom-objet-va-ici ) >>> Renvoie les valeurs d'un objet.

   • Object.entries ( nom d'objet-va-ici ) >>> retour les deux les clés et les valeurs d'un objet.

Voici des exemples de leur utilisation, faites attention à Object.entries () :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Lorsque vous utilisez Object.entries (), vous appelez deux entrées sur l'objet, à savoir les clés et les valeurs. Vous pouvez appeler les deux par l'une des entrées. Exemple ci-dessous.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

Faire des commentaires sur la ou les sections de pièces peu claires.

La for-inboucle

for-inLa boucle est utilisée pour parcourir les propriétés énumérables d'une collection, dans un ordre arbitraire . Une collection est un objet de type conteneur dont les éléments peuvent utiliser un index ou une clé.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-inloop extrait les propriétés énumérables ( clés ) d'une collection en une seule fois et l'itère une par une. Une propriété énumérable est la propriété d'une collection qui peut apparaître en for-inboucle.

Par défaut, toutes les propriétés d'un tableau et d'un objet apparaissent en for-inboucle. Cependant, nous pouvons utiliser la méthode Object.defineProperty pour configurer manuellement les propriétés d'une collection.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

Dans l'exemple ci-dessus, la propriété ddumyObject et l'index 3de myArrayn'apparaissent pas en for-inboucle car ils sont configurés avec enumerable: false.

Il y a peu de problèmes avec les for-inboucles. Dans le cas des tableaux, la for-inboucle prendra également en comptemethods ajout sur le tableau en utilisant la myArray.someMethod = fsyntaxe, cependant, myArray.lengthreste 4.

La for-ofboucle

C'est une idée fausse qui for-ofboucle itérer sur les valeurs d'une collection.for-ofboucle itère sur un Iterableobjet. Un itérable est un objet qui a la méthode avec le nom Symbol.iteratordirectement dessus sur l'un de ses prototypes.

Symbol.iteratordoit renvoyer un Iterator . Un itérateur est un objet qui a unnext méthode. Cette méthode est appelée retour valueet donepropriétés.

Lorsque nous itérons un objet itérable en utilisant une for-ofboucle, Symbol.iteratorla méthode sera appelée une fois get un objet itérateur . Pour chaque itération de for-ofboucle, la nextméthode de cet objet itérateur sera appelée jusqu'à ce qu'elle soit donerenvoyée par l' next()appel renvoie false. La valeur reçue par la for-ofboucle pour chaque itération si la valuepropriété retournée par l' next()appel.

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

La for-ofboucle est nouvelle dans ES6, tout comme les Iterable et Iterables . Le Arraytype constructeur a une Symbol.iteratorméthode sur son prototype. Le Objectconstructeur ne l'a malheureusement pas mais Object.keys(), Object.values()et les Object.entries()méthodes renvoient un itérable ( vous pouvez utiliser console.dir(obj)pour vérifier les méthodes du prototype ). L'avantage de la for-ofboucle est que tout objet peut être itératives, même votre coutume Doget Animalclasses.

Le moyen le plus simple de rendre un objet itérable est d'implémenter ES6 Generator au lieu d'implémenter un itérateur personnalisé.

Contrairement à for-in, la for-ofboucle peut attendre la fin d'une tâche asynchrone à chaque itération. Ceci est réalisé en utilisant la documentationawait mot-clé après forinstruction .

Une autre grande chose à propos de la for-ofboucle est qu'elle prend en charge Unicode. Selon les spécifications ES6, les chaînes sont stockées avec le codage UTF-16. Par conséquent, chaque personnage peut prendre soit 16-bitou 32-bit. Traditionnellement, les chaînes étaient stockées avec le codage UCS-2 qui prend en charge les caractères qui peuvent être stockés 16 bitsuniquement.

Par conséquent, String.lengthrenvoie le nombre de 16-bitblocs dans une chaîne. Les caractères modernes comme un caractère Emoji prennent 32 bits. Par conséquent, ce caractère retournerait lengthde 2. for-inboucle itère sur les 16-bitblocs et renvoie le mauvais index. Cependant, la for-ofboucle parcourt le caractère individuel en fonction des spécifications UTF-16.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

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

L'une des plus anciennes façons de faire défiler les éléments du tableau est la boucle pour 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, parce que 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. Autrement dit, ils ont des propriétés de longueur et d'index, mais ils peuvent également avoir d'autres propriétés et méthodes non numériques, 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, pas les tableaux, et est donc 10 à 100 fois plus lente. Bien sûr, c'est toujours très rapide. L'accélération peut n'être importante que dans les goulots d'étranglement. Mais nous devons toujours être conscients de la différence.

En règle générale, nous ne devrions pas utiliser for..in pour les tableaux.

Voici un mnémonique utile pour se souvenir de la différence entre for...inLoop et for...ofLoop.

"index dans, objet de"

for...in Loop=> itère sur l' index du tableau.

for...of Loop=> itère sur l' objet des objets.