Traitement de la répétition en JavaScript

Dans cet article, nous expliquerons le traitement de la répétition en JavaScript.

YouTube Video

L'instruction for en JavaScript

Syntaxe de base

1for (initialization; condition; update) {
2  // Code to repeat
3}

L'instruction for en JavaScript est une syntaxe pour effectuer des itérations. Elle exécute à plusieurs reprises un bloc de code spécifié tant qu'une condition particulière est remplie. En utilisant l'instruction for, le même processus peut être exécuté efficacement plusieurs fois.

• Initialisation (initialization) : La partie qui est exécutée une seule fois avant de commencer la boucle. Initialisez des variables telles que le compteur de boucle.
• Condition (condition) : La condition qui détermine si la boucle doit continuer. Si true, la boucle continue ; si false, elle se termine.
• Mise à jour (update) : Cela s'exécute à la fin de chaque boucle pour mettre à jour le compteur de boucle.

Exemple

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

Dans ce cas, i commence à 0, et la boucle s'exécute tant que i < 5 est true. i++ incrémente i de 1 à chaque itération de la boucle. En conséquence, les nombres de 0 à 4 sont affichés.

Portée du compteur de boucle

Déclarez ou initialisez des variables dans la partie initialisation de l'instruction for. Les variables déclarées ici ne sont valides qu'à l'intérieur de la boucle.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Comme montré dans cet exemple, référencer une variable en dehors de l'instruction for entraînera une erreur.

Boucle infinie

Définir une condition qui ne termine pas la boucle entraîne une boucle infinie. Cela peut surcharger le navigateur ou le système, donc une attention particulière est nécessaire.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Les tableaux et l'instruction for

Il est courant d'utiliser l'instruction for en conjonction avec des tableaux. Il est pratique pour traiter chaque élément d'un tableau.

Exemple

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

De cette manière, vous pouvez traiter chaque élément d'un tableau en utilisant des indices.

Autres structures de boucle

Instruction for...of

L'instruction for...of est utilisée pour les objets itérables comme les tableaux et les chaînes de caractères.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Cela vous permet de traiter chaque élément sans utiliser d'indices.

Instruction for...in

L'instruction for...in est utilisée pour itérer sur les propriétés d'un objet.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

De cette façon, vous pouvez effectuer des opérations sur chaque élément en utilisant les clés.

Résumé

• L'instruction for est une structure de boucle composée de trois parties : initialisation, condition et mise à jour.
• Vous pouvez contrôler le comportement des boucles en utilisant break ou continue.
• Lorsqu'elle est combinée avec des tableaux ou des objets, les éléments ou les propriétés peuvent être traités efficacement.

L'instruction while en JavaScript

Syntaxe de base

1while (condition) {
2    // Code that repeats while the condition is true
3}

L'instruction while en JavaScript est une structure de boucle qui exécute des opérations répétées tant que la condition spécifiée est true. Semblable à l'instruction for, l'instruction while ne spécifie que la condition.

• Condition : Écrivez l'expression conditionnelle qui détermine si la boucle doit continuer. La boucle continue tant que c'est true et se termine lorsqu'elle devient false.

Exemple

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

Dans cet exemple, la boucle commence avec la variable i à 0 et s'exécute tant que i < 5 est true. À chaque itération de la boucle, i est incrémenté de 1, et lorsque i atteint 5, la condition devient false et la boucle se termine. Par conséquent, l'instruction while affiche de 0 à 4.

Contrairement à l'instruction for, dans l'instruction while, l'initialisation et la mise à jour des variables sont écrites comme des instructions séparées. Vous pouvez également consulter la variable après l'instruction while. Dans ce cas, 5 est affiché après la fin de l'instruction while.

Boucle infinie

Si la condition est toujours true, une boucle infinie se produit et ne se termine pas. Les boucles infinies doivent être évitées, mais si elles sont utilisées intentionnellement, vous pouvez terminer la boucle avec une instruction break.

Exemple

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Traitement des tableaux avec une boucle while

Il est également possible de traiter des tableaux avec une instruction while.

Exemple

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Instruction do...while

Syntaxe de base

1do {
2    // Code that is executed at least once
3} while (condition);

L'instruction do...while, une variante de l'instruction while, vérifie la condition après avoir exécuté la boucle au moins une fois. Tandis que l'instruction while vérifie d'abord la condition, l'instruction do...while exécute le processus une fois avant de vérifier la condition.

Exemple

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

Dans cet exemple, i est affiché de 0 à 4. L'instruction do...while diffère de l'instruction while en ce qu'elle est toujours exécutée une fois, même si la condition est false.

Résumé

• L'instruction while est utilisée pour exécuter du code de manière répétée tant que la condition est true.
• Attention aux boucles infinies, mais vous pouvez contrôler le flux des boucles en utilisant break et continue.
• L'instruction do...while est utile lorsque vous souhaitez exécuter la boucle au moins une fois.

break et continue

Vous pouvez utiliser break et continue à l'intérieur de la boucle.

• break est utilisé pour terminer la boucle prématurément.
• continue ignore l'itération en cours et passe à l'itération suivante.

Exemple de break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

Dans ce cas, break est exécuté lorsque i devient 5. En conséquence, les nombres de 0 à 4 sont affichés.

Exemple de continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

Dans ce cas, continue est exécuté lorsque i est 2. En conséquence, les nombres autres que 2 sont affichés.

Boucles imbriquées en JavaScript

En programmation JavaScript, une boucle imbriquée est une structure où une boucle est incluse dans une autre. Ces boucles sont très efficaces lorsque des algorithmes ou des processus spécifiques couvrent plusieurs dimensions ou couches. Par exemple, traiter un tableau multidimensionnel avec des tableaux imbriqués est un cas typique.

Ici, nous allons expliquer la structure de base des boucles imbriquées, des exemples d'utilisation, des précautions et des considérations d'optimisation.

Structure de base des boucles imbriquées

La structure de base d'une boucle imbriquée est une forme où une ou plusieurs boucles sont contenues dans une autre boucle. Chaque fois que la boucle extérieure est exécutée une fois, la boucle intérieure est exécutée autant de fois.

Voici un exemple basique de deux boucles imbriquées.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

Dans le code ci-dessus, i est incrémenté dans la boucle extérieure, et j est incrémenté dans la boucle intérieure. Chaque fois que la boucle extérieure est exécutée une fois, la boucle intérieure est exécutée deux fois.

Exemple pratique de boucles imbriquées

Les boucles imbriquées sont particulièrement utiles pour manipuler des tableaux multidimensionnels. Par exemple, lors du traitement d'un tableau à deux dimensions, il est nécessaire de gérer à la fois les lignes (boucle extérieure) et les colonnes (boucle intérieure).

Dans l'exemple suivant, nous manipulons un tableau à deux dimensions et affichons chaque élément.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

De cette manière, l'utilisation de boucles imbriquées permet d'accéder à chaque élément d'un tableau à deux dimensions.

Notes

Il y a certains points à prendre en compte lorsque vous utilisez des boucles imbriquées.

1. Problèmes de performance

   Lorsque les boucles imbriquées deviennent plus profondes, le temps d'exécution augmente considérablement. Par exemple, si la boucle extérieure est exécutée 100 fois et la boucle intérieure 100 fois, un total de 10 000 opérations sont effectuées. Ainsi, s'il y a de nombreuses itérations de boucle, vous devriez envisager l'optimisation des boucles pour améliorer l'efficacité.

2. Application aux algorithmes complexes

   Les boucles imbriquées sont très puissantes, mais à mesure que le traitement devient complexe, le code peut devenir difficile à comprendre. Ainsi, pour maintenir la lisibilité du code, il est important d'organiser le traitement avec des commentaires et des fonctions appropriés.

Considérations d'optimisation

Lors de l'utilisation de boucles imbriquées, les optimisations suivantes peuvent être envisagées.

1. Interruption anticipée de boucle

   Si une condition spécifique est remplie à l'intérieur de la boucle, vous pouvez utiliser une instruction break pour sortir de la boucle. Cela peut éviter des boucles inutiles et améliorer les performances.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Déplacer les calculs à l'extérieur

   Au lieu d'exécuter le même calcul à l'intérieur de la boucle à chaque fois, vous pouvez l'effectuer une fois à l'extérieur de la boucle et utiliser le résultat pour rendre le processus plus efficace.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Résumé

Les boucles imbriquées sont très utiles pour gérer des structures de données complexes et des algorithmes en JavaScript. Cependant, si elles ne sont pas utilisées correctement, elles peuvent entraîner une dégradation des performances et une diminution de la lisibilité du code. Pour utiliser efficacement les boucles imbriquées, il est important de viser une optimisation des boucles et une organisation du code, et d'adopter des approches appropriées selon la situation.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video