7.2 KiB
Principes de base de JavaScript : tableaux et boucles
Sketchnote par Tomomi Imura
Quiz préalable
Cette leçon couvre les bases de JavaScript, le langage qui offre de l'interactivité sur le Web. Dans cette leçon, vous découvrirez les tableaux et les boucles, qui sont utilisés pour manipuler des données.
🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles.
Vous pouvez suivre cette leçon sur Microsoft Learn!
Les tableaux
Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau.
✅ Les tableaux sont partout autour de nous ! Pouvez-vous penser à un exemple réel d'un tableau, tel qu'un tableau de panneaux solaires ?
La syntaxe d'un tableau est une paire de crochets.
let myArray = [];
Il s'agit d'un tableau vide, mais les tableaux peuvent être déclarés déjà remplis de données. Plusieurs valeurs d'un tableau sont séparées par une virgule.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
Les valeurs du tableau se voient attribuer une valeur unique appelée index, un nombre entier attribué en fonction de sa distance depuis le début du tableau. Dans l'exemple ci-dessus, la valeur de chaîne "Chocolate" a un index de 0 et l'index de "Rocky Road" est de 4. Utilisez l'index avec des crochets pour récupérer, modifier ou insérer des valeurs de 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 Wikipedia.
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"; //Changement de "Rocky Road" par "Butter Pecan"
Et vous pouvez insérer une nouvelle valeur à un index donné comme ceci :
iceCreamFlavors[5] = "Cookie Dough"; //Ajout de "Cookie Dough"
✅ Un moyen plus courant de pousser des valeurs vers un tableau consiste à utiliser des opérateurs de tableau tels que 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-le vous-même ! Utilisez la console de votre navigateur pour créer et manipuler un tableau de votre propre création.
Les boucles
Les boucles permettent des tâches répétitives ou itératives, et peuvent économiser beaucoup de temps et de code. Chaque itération peut varier dans ses variables, valeurs et conditions. Il existe différents types de boucles en JavaScript, et elles ont de petites différences, mais font essentiellement la même chose : boucler sur des données.
La boucle For
La boucle for nécessite 3 parties pour itérer :
- un compteur Une variable qui est généralement initialisée avec un nombre qui compte le nombre d'itérations.
- une condition Expression qui utilise des opérateurs de comparaison pour provoquer l'arrêt de la boucle lorsque true
- une expression d'itération S'exécute à la fin de chaque itération, généralement utilisé pour modifier la valeur du compteur
// Compter jusqu'à 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
✅ Exécutez ce code dans une console de navigateur. Que se passe-t-il lorsque vous apportez de petites modifications au compteur, à la condition ou à l'expression d'itération ? Pouvez-vous le faire fonctionner à l'envers, en créant un compte à rebours ?
La boucle While
Contrairement à la syntaxe de la boucle for, les boucles while ne nécessitent qu'une condition qui arrête la boucle lorsqu'elle est true (vrai). Les conditions dans les boucles reposent généralement sur d'autres valeurs telles que les compteurs et doivent être gérées pendant la boucle. Les valeurs de départ des compteurs doivent être créées en dehors de la boucle, et toutes les expressions répondant à une condition, y compris la modification du compteur, doivent être conservées à l'intérieur de la boucle.
//Compter jusqu'à 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
✅ Pourquoi choisiriez-vous une boucle for par rapport à une boucle while? 17K téléspectateurs ont eu la même question sur StackOverflow, et certaines des opinions pourraient être intéressantes pour vous.
Les boucles et les 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 être la valeur du compteur.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
for (let i = 0; i < iceCreamFlavors.length; i++) {
console.log(iceCreamFlavors[i]);
} //Se termine lorsque toutes les saveurs sont imprimées
✅ Exercez vous avec une boucle sur un tableau créé par vos soins dans la console de votre navigateur.
🚀 Défi
Il existe d'autres façons d'itérer sur des tableaux autres que les boucles for et while. Il y a forEach, for-of, et map. Réécrivez votre boucle de tableau en utilisant l'une de ces techniques.
Quiz de validation des connaissances
Quiz de validation des connaissances
Révision et étude personnelle
Les tableaux en JavaScript ont de nombreuses méthodes qui leur sont attachées, extrêmement utiles pour la manipulation de données. Lisez ces méthodes et essayez certaines d'entre elles (comme push, pop, slice et splice) sur un tableau de votre création.