Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente Prochaine révisionLes deux révisions suivantes | ||
web:javascript:fondamentaux:tableaux [2020/09/25 16:39] – [3. Accéder aux éléments d'un tableau] admin | web:javascript:fondamentaux:tableaux [2021/08/11 09:19] – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[|{{ : | ||
+ | ===== Les tableaux ===== | ||
+ | |||
+ | [Mise à jour le 25/9/2020] | ||
+ | {{ : | ||
+ | |||
+ | * **Sources** et compléments sur **MDN Web Docs** | ||
+ | * < | ||
+ | |||
+ | * ** Lectures connexes** | ||
+ | * Wikis WebPEM : [[: | ||
+ | |||
+ | {{ : | ||
+ | <note important> | ||
+ | |||
+ | ==== 1. Créer un tableau ==== | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | // Tableau vide | ||
+ | // Première forme de déclaration | ||
+ | var messages = new Array(); | ||
+ | // Deuxième forme de déclaration | ||
+ | var smartphones=[]; | ||
+ | |||
+ | // Tableau initialisé | ||
+ | // Avec deux éléments | ||
+ | var messages = new Array(" | ||
+ | |||
+ | // Avec trois éléments. | ||
+ | var smartphones=[" | ||
+ | // Forme d' | ||
+ | var smartphones=[ | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | smartphones; | ||
+ | </ | ||
+ | |||
+ | ====2. Dimensionner un tableau ==== | ||
+ | < | ||
+ | |||
+ | Si on souhaite le faire on écrira : | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var messages = new Array(5); | ||
+ | var smartphones=[5]; | ||
+ | </ | ||
+ | |||
+ | ====3. Accéder aux éléments d'un tableau==== | ||
+ | < | ||
+ | |||
+ | // | ||
+ | <code javascript *.js> | ||
+ | var smartphones=[" | ||
+ | smartphone[0]; | ||
+ | </ | ||
+ | |||
+ | ====4. Attribuer des valeurs aux éléments d'un tableau==== | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var smartphones = []; | ||
+ | smartphones[1] = " | ||
+ | smartphones[33] = " | ||
+ | smartphones; | ||
+ | </ | ||
+ | |||
+ | ====5.Mélanger des éléments de type différent dans un tableau==== | ||
+ | Tous les éléments d'un tableau ne sont pas obligatoirement de même type (**un tableau est une liste en JavaScript**). Il est également possible de placer un tableau dans un autre. | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript | ||
+ | var voitures = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | var voitures = [ // Tableau à deux dimensions | ||
+ | [" | ||
+ | [" | ||
+ | [" | ||
+ | ]; | ||
+ | |||
+ | voitures[2]; | ||
+ | |||
+ | voitures[2][1]; | ||
+ | // résultat dans la console: " | ||
+ | </ | ||
+ | |||
+ | ==== 6. Manipuler des tableaux ==== | ||
+ | En JavaScript, il existe des **propriétés** et des **méthodes** pour manipuler facilement des tableaux. Les propriétés fournissent des informations au sujet des tableaux et les méthodes permettent de les modifier ou de les renvoyer. | ||
+ | |||
+ | === 6.1 Connaître la longueur d'un tableau === | ||
+ | < | ||
+ | |||
+ | // | ||
+ | <code javascript | ||
+ | var voitures = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | voitures.length; | ||
+ | </ | ||
+ | |||
+ | {{ : | ||
+ | === 6.2 Insérer des éléments dans un tableau === | ||
+ | |||
+ | * **À la fin** du tableau | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var voitures = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | voitures.push(" | ||
+ | |||
+ | voitures; // résultat dans la console : Array(8) [" | ||
+ | </ | ||
+ | |||
+ | * **Au début** du tableau | ||
+ | < | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var voitures = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | voitures.unshift(" | ||
+ | |||
+ | voitures; // résultat dans la console : Array(8) [" | ||
+ | </ | ||
+ | |||
+ | {{ : | ||
+ | === 6.3 Supprimer des éléments dans un tableau === | ||
+ | * **A la fin** du tableau | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var voitures = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | voitures.pop(); | ||
+ | voitures.pop(); | ||
+ | </ | ||
+ | |||
+ | * **Au début** du tableau | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var voitures = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | voitures.shift(); | ||
+ | voitures.shift(); | ||
+ | </ | ||
+ | |||
+ | === 6.4 Concaténer des tableaux === | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var marquesv1 = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | // Tableau à une dimension | ||
+ | var marquesv2 = [ | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | marquesv1.concat(marquesv2); | ||
+ | // résultat dans la console : Array(8) [" | ||
+ | </ | ||
+ | |||
+ | <note tip>Il est possible de concaténer plusieurs tableaux en séparant leur nom par des virgules : tableau1.// | ||
+ | |||
+ | === 6.5 Trouver la position d'un élément particulier dans un tableau === | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var marquesv1 = [ // Tableau à une dimension | ||
+ | " | ||
+ | " | ||
+ | ]; | ||
+ | |||
+ | marquesv1.indexOf(" | ||
+ | |||
+ | </ | ||
+ | |||
+ | === 6.6 Convertir un tableau en une chaîne de caractères === | ||
+ | < | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | var prenom = [" | ||
+ | prenom.join(); | ||
+ | |||
+ | </ | ||
+ | |||
+ | === 6.7 Parcourir un tableau avec une boucle for === | ||
+ | Pour parcourir un tableau, il faut faire autant d' | ||
+ | |||
+ | // | ||
+ | |||
+ | <code javascript | ||
+ | var smartphones=[" | ||
+ | |||
+ | for (var i = 0; i < smartphones.length; | ||
+ | |||
+ | console.log(smartphones[i]); | ||
+ | } | ||
+ | // résultat dans la console : | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | </ | ||
+ | |||
+ | ==== 7. Tableau associatif ==== | ||
+ | * Lien à consulter sur XUL : < | ||
+ | |||
+ | ==== 8. pour aller plus loin... ==== | ||
+ | < |