Comment j'ai essayé de comprendre l'intérieur d'une boucle For imbriquée en JavaScript

Qu'y a-t-il dans ce guide ?

Ceci est un guide de base dans lequel j'ai essayé de fournir une explication étape par étape des "boucles for" imbriquées en JavaScript. Décomposer la logique et les itérations de la boucle en détail en écrivant un programme qui imprime un motif carré solide sur la console du navigateur. Je vais expliquer ce qui se passe dans l'esprit d'une boucle ainsi que les itérations à l'intérieur de la boucle imbriquée et son ordre de fonctionnement.

A qui s'adresse le guide ?

Le guide s'adresse aux débutants absolus, qui ont appris les bases de JavaScript ou si vous avez une confusion sur le fonctionnement de la "boucle for".

Prérequis : JavaScript de base, types de données (chaîne, nombre), opérateurs (=, <, >, , =) et boucle For.

Cet article est initialement publié sur Webdevstack.hashnode.dev

Introduction

Imprimer un motif Solid Square est un défi de niveau débutant. Le défi consiste à écrire un programme qui imprime un motif qui donne la forme d'un carré plein à la console en utilisant un caractère donné. Tout au long de ce guide, nous allons écrire le programme étape par étape en utilisant la boucle for pour comprendre comment fonctionne la boucle, en décomposant chaque étape en détail de ce qui se passe à l'intérieur lorsqu'une boucle for commence à fonctionner.

Comprendre le problème

Visualisez un motif en forme de carré plein composé de n'importe quel caractère, par exemple #, dans une taille de grille de caractères 4 × 4. Cela signifie que quatre lignes de quatre caractères construisent le carré plein de taille 4 x 4 (colonne et ligne). Voici à quoi cela devrait ressembler sur la console.

Il est nécessaire de comprendre l'ordre du motif. Chaque nouveau il y a 4 caractères (comme nombre de colonnes), fait une ligne. Nous devons répéter cet ensemble 4 fois dans chaque nouvelle ligne pour imprimer notre motif spécifique.

Démarrer le basique

Tout d’abord, commençons par déclarer des variables pour stocker certaines valeurs. La première variable est la taille, qui stocke le chiffre 4, nécessaire au calcul du motif. Le second est le résultat, auquel est attribuée une chaîne vide pour stocker la sortie finale. Puisqu'elle contiendra une valeur de chaîne, une chaîne vide est attribuée comme valeur initiale du résultat. (Vous pouvez vérifier le résultat à la fin, ce qu'il renvoie, si vous ne stockez aucune chaîne vide)

let size = 4;
let result = "";

(Il est possible de le faire sans initialiser les variables, mais la variable est utilisée pour une meilleure maintenance. De plus, mis à part la boucle for, le programme pourrait être écrit en utilisant une boucle while ou dans d'autres méthodes mais ce n'est pas notre objectif dans ce guide)

Par exemple, écrivons notre « boucle for » de base pour comprendre la boucle en la décomposant en petites étapes. Comprendre clairement les bases rendra notre prochaine étape plus facile à envisager.

let size = 4;
let result = "";

Comprendre la configuration de base

• Configuration des variables

  taille = 4 ; - Nombre de fois que la boucle itère.

  résultat = ""; - Chaîne vide pour stocker la sortie finale.

• Initialisation de la boucle : nombre = 0 ; définit la valeur de départ de la « boucle For ».

• Conditionnement de boucle : nombre < taille; vérifie si le nombre est inférieur à la taille. La boucle s'exécute jusqu'à ce que la condition renvoie fausse.

• Corps de la boucle : résultat = "#" ; ajoute un caractère « # » au résultat de chaque itération de la boucle.

• Mise à jour de la variable de boucle : count ; les incréments comptent par 1 à la fin de chaque itération.

  compte → compte = compte 1

  L'incrémentation est nécessaire, sinon la boucle s'exécutera à l'infini.

Appending : ajout d'une nouvelle valeur à la fin de la valeur existante. Par exemple, laissez text = « Bonjour » ; Si je concatène une autre valeur à la variable texte, comme text = « World » ; il ajoutera la chaîne « World » à sa valeur existante « Hello », ce qui donnera la sortie « HelloWorld ». text = « Monde » → texte = texte « Monde » → texte = « Bonjour » « Monde » → texte = « Bonjour Monde »

Que se passe-t-il à chaque itération ?

taille = 4 ; résultat = "";

Itération 1 :

• compte = 0 ; → compter < taille; → 0 < 4 → condition vraie → Corps de boucle

• résultat = « # » ; → résultat = résultat « # » ; → résultat = « « « # » → résultat = « # » ;

• compte → compte = compte 1 → compte = 0 1 → compte = 1

Itération 2 :

• compte = 1 ; → compter < taille; → 1 ≪ 4 → vrai → Corps de boucle

• résultat = "#"; → résultat = résultat "#"; → résultat = "#" "#" → résultat = "##";

• compte → compte = compte 1 → compte = 1 1 → compte = 2

Itération 3 :

• compte = 2 ; → 2 ≪ 4 → vrai → corps de boucle

• résultat = « # » ; → le résultat est « ### »

• compte → le compte est 3

Itération 4 :

• compte = 3 ; → 3 ≪ 4 → vrai → corps de boucle

• résultat = « # » ; → le résultat est « #### »

• compte → le compte est 4

La fin de l'itération :

• compte = 4 ; → 4 ≪ 4 → faux → la boucle s'arrête.

console.log(résultat); imprime la valeur finale du résultat sur la console. La valeur finale est la dernière valeur mise à jour. Dans ce cas, Sortie : ####

Construire le nid - Construction de modèles

Jusqu'à présent, nous avons imprimé quatre caractères "#" (chaque caractère peut être considéré comme une colonne) sur une ligne (que nous appelons ligne) à l'aide d'une boucle For. Nous avons besoin d'un total de 4 lignes de jeux de caractères similaires #### pour construire la dimension d'un carré. ✅

Nous pouvons y parvenir en répétant quatre fois toute notre boucle en plaçant la boucle dans une nouvelle boucle. Cette nouvelle boucle crée chaque ensemble #### de caractères quatre fois. Cela forme une boucle imbriquée, c'est-à-dire une boucle à l'intérieur d'une autre boucle, une boucle interne et une boucle externe.

?Chaque fois que la boucle externe s'exécute, elle exécute la boucle interne, qui itère également 4 fois. Cela signifie que quatre itérations de la boucle externe exécuteront la boucle interne quatre fois, ce qui donne un total de 16 itérations pour la boucle interne. C'est comme ceci.

Modifions notre code selon notre idée, en mettant également à jour les noms de variables des boucles en conséquence. Le nom de la boucle interne est « col », car elle place les caractères dans le nombre de colonnes, et pour la boucle externe, il s'agit de « ligne ».

let size = 4;
let result = "";

Les deux boucles continueront à itérer jusqu'à ce que la ligne de conditions < taille et col &Lt ; la taille devient fausse. La ligne et le col incrémentent leurs propres valeurs une à la fois à chaque itération.

Maintenant, si nous exécutons notre code, le résultat sera comme ceci : ################, ce qui n'est pas le résultat souhaité. Cela se produit parce que nous n'avons pas créé une nouvelle ligne pour chaque ligne.

• En tant que boucle interne responsable de chaque ensemble ####, nous ajouterons le nouveau caractère de ligne "n" à la même variable result, après la boucle interne mais toujours dans le corps de la boucle externe : result = "n " ;

for(let count = 0; count < size; count++){
    result += "#";
}
console.log(result);
// Play with this code on a code playground or on console.

• Pour chaque ligne, la boucle interne ajoute le caractère « # » au résultat. Une fois l'ajout du caractère terminé et la sortie, la boucle externe ajoute « n » à la variable de résultat pour passer à une nouvelle ligne.

Freiner les itérations imbriquées

➿ Boucle extérieure

Itération1 : ligne = 0 → ligne < taille → 0 < 4 → vrai

-- Corps de la boucle extérieure

--- Boucle intérieure

--- Itération1 : col = 0 : résultat = « # », donc le résultat devient « # », col

--- Itération2 : col = 1 : résultat = « # », donc le résultat devient « ## », col

--- Itération3 : col = 2 : résultat = « # », donc le résultat devient « ### », col

--- Itération4 : col = 3 : résultat = « # », donc le résultat devient « #### », col

--- Sortie de boucle intérieure

--result = "n" : un caractère de nouvelle ligne est ajouté, le résultat devient donc "####n".

ligne → incrémenter la valeur de la ligne à 1

Itération2 : ligne = 1 → ligne < taille → 1 < 4 → vrai

-- Corps de la boucle extérieure

--- Boucle intérieure

--- Itération1 : col = 0 : résultat = « # », donc le résultat devient "####n#", col

--- Itération2 : col = 1 : résultat = « # », donc le résultat devient "####n##", col

--- Itération3 : col = 2 : résultat = « # », donc le résultat devient "####n###", col

--- Itération4 : col = 3 : résultat = « # », donc le résultat devient "####n####", col

--- Sortie de boucle intérieure

-- result = "n" : un caractère de nouvelle ligne est ajouté, le résultat devient donc "####n####n".

ligne → incrémenter la valeur de la ligne à 2

répétitions ultérieures du processus

-Itération3 : ligne = 2 → 2 < 4 → vrai → "####n####n####n" → incrémenter la ligne, sa valeur est de 3

-Itération4 : ligne = 3 → 3 < 4 → vrai → "####n####n####n####n" → incrémenter la ligne, sa valeur est de 4

-Fin de l'itération : rangée = 2 → 2 < 4 → faux → Arrêts

➿ Sorties de boucle extérieure

Dernière ligne console.log(result); imprime la valeur finale.

"####n####n####n####n" est la valeur finale que la variable de résultat stocke à la fin. Le « n » exécutera le freinage de ligne tout en imprimant la sortie sur la console.

let size = 4;
let result = "";

Conclusion

L'exécution de tâches complexes telles que l'itération et l'affichage de structures de données multidimensionnelles implique souvent l'utilisation de boucles imbriquées. Jusqu’à présent, nous avons exploré l’intérieur d’une boucle imbriquée d’un programme de base pour construire les bases d’une compréhension de base. Nous avons décomposé les étapes d'itération, pour une boucle basique et celle imbriquée. Je suggère d'essayer d'écrire différentes variantes de ce programme, par exemple en permettant à l'utilisateur de saisir la taille et le caractère du motif, en créant un motif rectangulaire ou en implémentant le même programme en utilisant une méthode différente, pour plus de pratique.

console.log("Merci d'avoir lu");

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!