Boucle For avec objet

En guise d'introduction, notez d'abord que la boucle for a la syntaxe suivante:

let list = {
   value: 1,
   rest: {
      value: 2,
      rest: {
         value: 3,
         rest: null
    }
  }
};

function listToArray(list)
{
    let arrays = [];
    
    for (let node = list; node; node = node.rest)
    {
        console.log("Current node is: " + JSON.stringify(node));
        console.log("Node value is: " + node.value);
        arrays.push(node.value);
        console.log("Next node will be: " + JSON.stringify(node.rest));
    }

    return arrays;
}

console.log(listToArray(list));

L '
1. Instruction 1 est exécutée (une fois) avant l'exécution du bloc de code.
L '
2. Instruction 2 définit la condition pour exécuter le bloc de code.
L '
3. Instruction 3 est exécutée (à chaque fois) après l'exécution du bloc de code.

Ainsi, à chaque itération, vous allez à un niveau profond de l ' arbre avec node = node.rest . La boucle s'arrête car vous allez éventuellement essayer d'accéder à la propriété reste sur un nœud qui n'a pas cette clé ou est défini sur null , cela sera évalué à undefined ou null respectivement, et puisque la condition d'arrêt de la boucle for est de tester le variable node il s'arrêtera quand il sera indéfini ou null (Notez qu'il s'agit de fausses valeurs sur Javascript).

Exemple avec debug :

for (statement 1; statement 2; statement 3) {
    // code block to be executed
}

Disons que vous voulez accéder à l'objet imbriqué contenant valeur: 3 . Ensuite, vous feriez:

 const bob = you.southernNeighbour;
 const alice = bob.southernNeighbour;
 const eve = alice.southernNeighbour;

 // ...

let current = you; // you start where you are.
while(current) // as long as there is a house, walk 
  current = current.southernNeighbour; // go to the next southern neighbour

Vous pouvez également écrire cela sur plusieurs lignes comme:

 for(let node = list; node; node = node.rest) {
   //...
 }

et cela peut être généralisé pour n répétitions comme

 let node = list; // { value: 1, rest: { ... } }
 node = node.rest; // { value: 2, rest: { ... } }
 node = node.rest; // { value: 3, rest: null }

Exemple du monde réel:

Vous vivez dans un petit village, il n'y a qu'une seule rue du nord au sud. Il y a quelques maisons à côté de la rue. Vous vivez au bout de la petite ville, à l'extrémité nord. Le nom de votre voisin est Bob. Bob a aussi une voisine appelée Alice. Alice a une voisine appelée Eve. Maintenant, si vous voulez marcher dans la rue, vous pouvez visiter Bob, puis Alice, puis Eve. Ou vous marchez jusqu'à la maison suivante jusqu'à ce que vous atteigniez l'extrémité de la petite ville.

 list.rest.rest // { value: 3, rest: null }

Vous pouvez également rendre cela récursif, car cela facilite l'explication.

Si votre objet est null , renvoyez simplement le tableau (tel quel), sinon renvoyez un appel au reste et ajoutez la valeur au tableau.

.as-console-wrapper { top: 0; max-height: 100% !important; }

let list = {
  value: 1,
  rest: {
    value: 2,
    rest: {
      value: 3,
      rest: null
    }
  }
};

function listToArray(obj, arr = []) {
  return obj == null ? arr : listToArray(obj.rest, arr.concat(obj.value));
}

console.log(listToArray(list)); // -> [1, 2, 3]

obj = { value: 1, rest: {...} }, arr = []          // Add 1 to arr and return obj.rest
obj = { value: 2, rest: {...} }, arr = [ 1 ]       // Add 2 to arr and return obj.rest
obj = { value: 3, rest: null  }, arr = [ 1, 2 ]    // Add 3 to arr and return null
obj = null,                      arr = [ 1, 2, 3 ] // Return arr [ 1, 2, 3 ]

pour peut être considéré comme un sucre syntaxique pour tandis que , même s'il y a quelques différences de bas niveau, ce sont les mêmes:

p >

let node = list;
while(node) { // equivalent to: while(node!==null) {
  doSomething(node);
  node = node.rest;
}

La syntaxe de pour est pour (initialisation, test, itération) . Ceci:

for (let node = list; node; node = node.rest) { doSomething(node); }

Est peut-être plus facile à comprendre s'il est écrit comme suit:

for (let i=0; i<10; i++) {
  console.log(i);
}

let i=0;
while(i<10) {
  console.log(i);
  i++;
}

La boucle For se compose de trois parties

1. initialisation - sera appelée une fois ( let node = list )
2. condition pour continuer - sera appelée à chaque itération ( node )
3. étape suivante - sera appelée lorsqu'un 2 a renvoyé true . Généralement, vous souhaitez mettre à jour une variable créée dans le 1 retour

Regardons de plus près ce qui se passe réellement ici:

{
   value: 3,
   rest: null
}

Tout d'abord, vous créez une nouvelle variable appelée node code > avec la valeur de list
Ensuite, vous vérifiez si votre n'est pas actuellement null ou indéfini . Ces deux valeurs sont fausses, ce qui signifie qu'elles retournent toutes les deux false lorsqu'elles sont forcées à un booléen. Si ce n'est pas le cas, votre arrays.push sera exécuté, sinon votre boucle sera terminée.
Enfin, vous mettez à jour votre node avec une valeur de node.rest . Avant que votre arrays.push ne soit exécuté avec le node mis à jour, votre condition sera à nouveau vérifiée.
Enfin, lorsque votre nœud est

for(let node = list; node; node=node.rest)

votre 3 partie de la boucle mettra à jour le nœud code> variable qui lui attribue rest , qui est null et votre 2 ne passera pas, donc il sera terminé

Comment fonctionnent les boucles for :

Vous devez d'abord comprendre comment for les boucles fonctionnent.

L'instruction for crée une boucle composée de trois expressions facultatives, placées entre parenthèses et séparées par des points-virgules, suivies d'une instruction (généralement une instruction de bloc) à exécuter dans la boucle. ^MDN

La boucle for a cette structure:

for (let node = list; node; node = node.rest) { // big question: how it works or possible?
  arrays.push(node.value);
}

Les expressions initialisation , condition et final-expression peuvent être n'importe quelle expression valide. Tout ou partie de ces expressions peut être omise ( pour (;;) est valide en javascript et crée une boucle infinie).

Le pour La boucle commence par exécuter l'expression initialisation si elle est spécifiée, puis répète les actions suivantes: vérifier si la condition est véridique, si c'est le cas, elle exécute l'instruction (s) et final-expression dans l'ordre, si la condition est fausse, elle arrête de boucler.

Voici un exemple, le diagramme suivant ^{( source de l'image )} :

a>

Correspond à la boucle suivante for :

for(i = 2; i <= 6; i = i + 2)
  print i + 1

Notez que la partie initialisation i = 2 n'est exécuté qu'une seule fois alors que le reste (la condition partie i , la instruction (s) et la partie final-expression i = i + 2 ) peuvent être exécutées plusieurs fois (dans l'ordre) en fonction du condition .

Explication du code en question:

for ([initialization]; [condition]; [final-expression])
   statement

L ' initialisation code> partie de cette boucle déclare simplement la variable node et définit sa valeur sur l'élément racine list , cette partie n'est exécutée qu'une seule fois, lorsque la boucle est sur le point de démarrer.

La partie condition vérifie si le node (la variable) est véridique ou non, en javascript un objet est véridique alors que undefined ne l'est pas, c'est un falsy valeur (il y a bien sûr d'autres valeurs de vérité et de fausses valeurs mais nous ne sommes intéressés que par ces deux exemple particulier). Le concept de la boucle parcourt l'objet de nœud en nœud (voir la partie expression finale ci-dessous). Lorsqu'un nœud enfant existe, la prochaine valeur de nœud sera ce nœud (qui est un objet), cela signifie que ce sera une valeur de vérité, donc la condition sera vraie. Alors que si le nœud enfant n'existe pas, nœud sera indéfini (une valeur fausse) et donc la condition sera fausse.

Le final-expression définit simplement la valeur de node sur le nœud enfant du nœud actuel qui est node.rest . S'il existe, node sera un objet, sinon il sera non défini.