8.0 KiB

Raw Permalink Blame History

Notions de base en JavaScript : Tableaux et Boucles

Sketchnote par Tomomi Imura

Quiz avant le cours

Cette leçon couvre les bases de JavaScript, le langage qui permet d'ajouter de l'interactivité sur le web. Dans cette leçon, vous apprendrez à utiliser les tableaux et les boucles, qui servent à manipuler des données.

🎥 Cliquez sur les images ci-dessus pour visionner des vidéos sur les tableaux et les boucles.

Vous pouvez suivre cette leçon sur Microsoft Learn !

Tableaux

Travailler avec des données est une tâche courante dans n'importe quel langage, et cela devient beaucoup plus simple lorsque les données sont organisées dans un format structuré, comme les tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. Un des grands avantages des tableaux est qu'ils peuvent contenir différents types de données dans un même tableau.

✅ Les tableaux sont partout autour de nous ! Pouvez-vous penser à un exemple concret de tableau, comme un ensemble de panneaux solaires ?

La syntaxe d'un tableau utilise une paire de crochets.

let myArray = [];

Ceci est un tableau vide, mais les tableaux peuvent être déclarés déjà remplis de données. Les différentes valeurs d'un tableau sont séparées par une virgule.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Les valeurs d'un tableau se voient attribuer un identifiant unique appelé index, un nombre entier qui est déterminé en fonction de leur position à partir du début du tableau. Dans l'exemple ci-dessus, la chaîne de caractères "Chocolate" a un index de 0, et l'index de "Rocky Road" est 4. Utilisez l'index avec des crochets pour récupérer, modifier ou insérer des valeurs dans le tableau.

✅ Cela vous surprend-il que les tableaux commencent à l'index zéro ? Dans certains langages de programmation, les index commencent à 1. Il y a une histoire intéressante à ce sujet, que vous pouvez lire sur Wikipédia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Vous pouvez utiliser l'index pour modifier une valeur, comme ceci :

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

Et vous pouvez insérer une nouvelle valeur à un index donné comme ceci :

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Une méthode plus courante pour ajouter des valeurs à un tableau est d'utiliser des opérateurs comme array.push().

Pour savoir combien d'éléments se trouvent dans un tableau, utilisez la propriété length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Essayez par vous-même ! Utilisez la console de votre navigateur pour créer et manipuler un tableau de votre propre création.

Boucles

Les boucles permettent d'effectuer des tâches répétitives ou itératives, et elles peuvent faire gagner beaucoup de temps et de lignes de code. Chaque itération peut varier en termes de variables, de valeurs et de conditions. Il existe différents types de boucles en JavaScript, qui ont toutes de petites différences, mais qui accomplissent essentiellement la même chose : parcourir des données.

Boucle For

La boucle for nécessite 3 éléments pour itérer :

compteur Une variable généralement initialisée avec un nombre qui compte le nombre d'itérations
condition Une expression utilisant des opérateurs de comparaison pour arrêter la boucle lorsque la condition devient false
expression d'itération Exécutée à la fin de chaque itération, généralement utilisée pour modifier la valeur du compteur

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

✅ Exécutez ce code dans la console de votre navigateur. Que se passe-t-il lorsque vous modifiez légèrement le compteur, la condition ou l'expression d'itération ? Pouvez-vous le faire fonctionner à l'envers, en créant un compte à rebours ?

Boucle While

Contrairement à la syntaxe de la boucle for, les boucles while nécessitent uniquement une condition qui arrêtera la boucle lorsque la condition deviendra false. Les conditions dans les boucles dépendent généralement d'autres valeurs comme des compteurs, et doivent être gérées pendant la boucle. Les valeurs initiales des compteurs doivent être créées en dehors de la boucle, et toutes les expressions nécessaires pour répondre à une condition, y compris la modification du compteur, doivent être maintenues à l'intérieur de la boucle.

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

✅ Pourquoi choisiriez-vous une boucle for plutôt qu'une boucle while ? 17 000 utilisateurs se sont posé la même question sur StackOverflow, et certaines des opinions pourraient vous intéresser.

Boucles et Tableaux

Les tableaux sont souvent utilisés avec des boucles, car la plupart des conditions nécessitent la longueur du tableau pour arrêter la boucle, et l'index peut également servir de valeur de compteur.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Expérimentez en parcourant un tableau de votre propre création dans la console de votre navigateur.

🚀 Défi

Il existe d'autres façons de parcourir des tableaux en dehors des boucles for et while. Découvrez forEach, for-of, et map. Réécrivez votre boucle de tableau en utilisant l'une de ces techniques.

Quiz après le cours

Révision et Étude personnelle

Les tableaux en JavaScript possèdent de nombreuses méthodes qui sont extrêmement utiles pour manipuler des données. Renseignez-vous sur ces méthodes et essayez-en quelques-unes (comme push, pop, slice et splice) sur un tableau de votre création.

Devoir

Parcourir un tableau

Avertissement :
Ce document a été traduit à l'aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.

8.0 KiB Raw Permalink Blame History