Comment utiliser les boucles for imbriquées en JavaScript ?
Nous utilisons l'instruction de boucle for de JavaScript pour répéter un ensemble d'instructions dans le corps de la boucle un nombre de fois spécifié. Les boucles for imbriquées, comme leur nom l'indique, sont composées de plusieurs boucles for, une boucle imbriquée dans une autre boucle. Cela nous permet de parcourir des structures de données multidimensionnelles telles que des matrices.
Boucles for imbriquées en JavaScript
Une simple boucle for s'exécute un nombre de fois spécifié en fonction des valeurs d'initialisation et des conditions de fin. En revanche, les boucles for imbriquées ont une ou plusieurs boucles for résidant à l'intérieur de la boucle for externe.
Grammaire
for(let i = 0 ; i < limit; i++){
// statement
}
Cela créera une boucle for simple qui exécute limit fois. Cela signifie qu'il exécute les instructions dans le corps de la boucle limitées fois.
Dans les boucles imbriquées, l'instruction à l'intérieur du corps de la boucle for est une autre boucle for. Cela provoque l’exécution de la boucle for interne à chaque itération de la boucle for externe.
for(let i = 0 ; i < limit; i++){
for(let j = 0 ; j < limit; j++){
// statement
}
// statement for outer loop
}
La boucle interne dans cet exemple s'exécute limit fois pour chaque itération de la boucle externe. Par conséquent, la boucle s'exécute sur un total de limit x temps limites.
Les valeurs d'initialisation, les conditions de terminaison et les mises à jour des variables de boucle des deux boucles sont indépendantes l'une de l'autre.
Voyons comment fonctionnent les boucles for imbriquées à travers un exemple.
Exemple 1
Ici, nous utiliserons des boucles for imbriquées pour créer une matrice bidimensionnelle "#".
Jetons un coup d'œil au même code.
<!DOCTYPE html>
<html>
<body>
<h3 id="The-nested-for-loop-in-JavaScript"> The nested for loop in JavaScript</h3>
<p> Enter number of rows and columns to create matrix</p>
<form>
<label >Rows : </label>
<input type = "text" id = "rows"><br><br>
<label > Columns : </label>
<input type = "text" id = "cols"><br><br>
<input type = "button" onclick = "fun()" value = "Create Matrix">
</form>
<br><br>
<div id="result"></div>
<script>
function fun(){
var text = "";
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
for(let i = 0 ; i < rows; i++){
for(let j = 0 ; j < cols ; j++){
text += "#"
}
text += "<br>";
}
document.getElementById("result").innerHTML = text;
}
</script>
</body>
</html>
Dans le code ci-dessus, nous prenons la saisie du nombre de lignes et de colonnes, puis créons la matrice spécifiée à l'aide de boucles imbriquées. Notez que la condition de terminaison de la boucle externe détermine le nombre de lignes de la matrice et la condition de terminaison de la boucle interne détermine le nombre de colonnes de la matrice.
Vous pouvez ajuster les paramètres de la boucle (valeur d'initialisation, condition de fin, mise à jour) et utiliser des boucles imbriquées pour implémenter presque n'importe quel type de parcours imbriqué.
Voyons comment imprimer une pyramide à l'aide de boucles imbriquées.
Exemple 2
Ici, nous allons créer une pyramide en utilisant le symbole * et la hauteur fournie par l'utilisateur. Jetons un coup d'œil au même code.
<!DOCTYPE html>
<html>
<body>
<h3 id="The-nested-for-loop-in-javascript">The nested for loop in javascript</h3>
<p>Enter the height of the pyramid:</p>
<form>
<label>Height : </label>
<input type="text" id="height"><br><br>
<input type="button" onclick="fun()" value="Create Pyramid">
</form>
<br><br>
<div id="result"></div>
<script>
function fun() {
var text = "";
var height = document.getElementById("height").value;
// loop 1
for (let i = 0; i < height; i++) {
// loop 2
for (let j = 0; j < height - i; j++) {
text += " "
}
// loop 3
for (let j = 0; j <= i; j++) {
text += "*";
}
text += "<br>";
}
document.getElementById("result").innerHTML = text;
}
</script>
</body>
</html>
Dans le code ci-dessus, comme indiqué dans le résultat, nous pouvons visualiser de nombreux modèles de parcours différents après avoir modifié les paramètres de la boucle.
RemarqueLa boucle extérieure (boucle 1) dans le programme détermine la hauteur de la pyramide. La première boucle interne (boucle 2) détermine le nombre de caractères d'espacement au début de chaque ligne. La deuxième boucle interne (boucle 3) imprime autant de caractères * que la hauteur de la pyramide dans l'itération en cours.
Conclusion
La boucle imbriquée est une structure très utile, polyvalente et souvent utilisée.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
