web:javascript:fondamentaux:tableaux [WEBGE Wikis]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]

===== JavaScript - Les tableaux =====

[Mise à jour le 25/9/2020]

  * **Sources** et compléments sur **MDN Web Docs**
    * <html><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Arrays" target="_blank">Les tableaux</a></html>

  * ** Lectures connexes**
    * Wikis WebPEM : [[:outils:vscode:web|"Préparer un projet de site Web avec l'IDE VSCode"]]

{{ :web:javascript:fondamentaux:tableaux.png?nolink&150|}}
<note important>En JavaScript, les tableaux sont des **listes** qui contiennent des valeurs de **différents types de données**. \\ Ils permettent de rassembler **différentes informations** sous **une seule variable**.</note>

==== 1. Créer un tableau ====
<note>Pour **initialiser** un tableau, il faut insérer des crochets **[ ]**.</note>

//Exemples//

<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("Bonjour","Hello");

// Avec trois éléments.
var smartphones=["GalaxyS8", "iPhone7", "Honor9"]; 
// Forme d'écriture lorsque la liste est longue
var smartphones=[
"GalaxyS8", 
"iPhone7", 
"Honor9"
]; 

smartphones; // résultat dans la console : Array(3) ["iphone8", "iPhone7", "Honor9"]
</code>

====2. Dimensionner un tableau ====
<note>Il n'est **pas nécessaire de préciser la taille** d'un tableau lors de sa déclaration.</note> 

Si on souhaite le faire on écrira :

//Exemples//

<code javascript *.js>
var messages = new Array(5);
var smartphones=[5];
</code>

====3. Accéder aux éléments d'un tableau====
<note>Pour accéder à un élément d'un tableau, il suffit de placer son **indice** (sa position dans le tableau) entre crochets à la suite du nom de la variable. **Le premier élément a pour indice 0**.</note>

//Exemples//
<code javascript *.js>
var smartphones=["GalaxyS8", "iPhone7", "Honor9"];
smartphone[0]; // résultat dans la console: "GalaxyS8"
</code>

====4. Attribuer des valeurs aux éléments d'un tableau====

//Exemples//

<code javascript *.js>
var smartphones = [];
smartphones[1] = "iPhone4"; // résultat dans la console: "iPhone4" remplace "iPhone7"
smartphones[33] = "iphone6";
smartphones; // résultat dans la console: Array(34) [undefined × 1, "iPhone4", undefined × 31, "iphone6"]
</code>

====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.

//Exemples//

<code javascript  *.js>
var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];

var voitures = [		// Tableau à deux dimensions
["Peugeot","3008", 10],
["Renault", "Captur",5],
["Ford", "C-Max", 15]
];

voitures[2]; // résultat dans la console : (3) ["Ford", "C-Max", 15]

voitures[2][1];
// résultat dans la console: "C-Max" (l'accès à un élément nécessite une deuxième paire de crochets
</code>

==== 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 ===
<note>Il suffit de **lier** la propriété **//length//** à la variable du tableau.</note>

//Exemples//
<code javascript  *.js>
var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];

voitures.length; // résultat dans la console : 6
</code>

{{ :web:javascript:fondamentaux:push.jpg?nolink&300|}}
=== 6.2 Insérer des éléments dans un tableau ===

  * **À la fin** du tableau
<note>On utilise la méthode //**push(**//éléments(s)//**)**// pour ajouter un ou plusieurs éléments **à la fin d'un tableau**.</note>

//Exemples//

<code javascript *.js>
var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];
voitures.push("Citroën",3);

voitures; // résultat dans la console : Array(8) ["Peugeot", 10, "Renault", 5, "Ford", 15, "Citroën", 3]
</code>

  * **Au début** du tableau
<note>On utilise la méthode //**unshift(**//éléments(s)//**)**// pour ajouter un ou plusieurs éléments **au début** d'un tableau.</note>

<code javascript *.js>
var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15
];
voitures.unshift("Citroën",3);

voitures; // résultat dans la console : Array(8) ["Citroën", 3, "Peugeot", 10, "Renault", 5, "Ford", 15]
</code>

{{ :web:javascript:fondamentaux:push.jpg?nolink&300|}}
=== 6.3 Supprimer des éléments dans un tableau ===
  * **A la fin** du tableau
<note>On utilise la méthode //**pop()**// pour enlever un élément **à la fin** d'un tableau.</note>

//Exemples//

<code javascript *.js>
var voitures = [ 		// Tableau à une dimension
"Peugeot", 10,
"Renault", 5,
"Ford", 15,
"Citroën", 3
];

voitures.pop(); // résultat dans la console : Array(7) ["Peugeot", 10, "Renault", 5, "Ford", 15, "Citroën"]
voitures.pop(); // résultat dans la console : Array(6) ["Peugeot", 10, "Renault", 5, "Ford", 15]
</code>

  * **Au début** du tableau
<note>On utilise la méthode //**shift()**// pour enlever un élément **au début** d'un tableau.</note>

//Exemples//

<code javascript *.js>
var voitures = [ 		// Tableau à une dimension
"Citroën", 3,
"Peugeot", 10,
"Renault", 5,
"Ford", 15,
];

voitures.shift(); // résultat dans la console : Array(7) [3, "Peugeot", 10, "Renault", 5, "Ford", 15]
voitures.shift(); // résultat dans la console : Array(6) ["Peugeot", 10, "Renault", 5, "Ford", 15]
</code>

=== 6.4 Concaténer des tableaux ===
<note>JavaScript donne la possibilité d'associer deux tableaux pour en faire un nouveau. On utilise la méthode //**concat(**//tableau//**)**//.</note>

//Exemples//

<code javascript *.js>
var marquesv1 = [ 		// Tableau à une dimension
"Citroën", 3,
"Peugeot", 10
];
// Tableau à une dimension
var marquesv2 = [
"Renault", 5,
"Ford", 15
];

marquesv1.concat(marquesv2);
// résultat dans la console : Array(8) ["Citroën", 3, "Peugeot", 10, "Renault", 5, "Ford", 15]
</code>

<note tip>Il est possible de concaténer plusieurs tableaux en séparant leur nom par des virgules : tableau1.//**concat(**////tableau2, tableau3, etc.////**)**//</note>

=== 6.5 Trouver la position d'un élément particulier dans un tableau ===
<note>On utilise la méthode //**indexOf(**//element//**)**//.</note>

//Exemples//

<code javascript *.js>
var marquesv1 = [ 		// Tableau à une dimension
"Citroën", 3,
"Peugeot", 10
];

marquesv1.indexOf("Peugeot"); // résultat dans la console : 2

</code>

=== 6.6 Convertir un tableau en une chaîne de caractères ===
<note>Avec la méthode //**join()**//, on peut concaténer tous les éléments d'un tableau</note>

//Exemples//

<code javascript *.js>
var prenom = ["Vincent", "Benoît", "Georges"];
prenom.join(); // résultat dans la console : "Vincent,Benoît,Georges"

</code>

=== 6.7 Parcourir un tableau avec une boucle for ===
Pour parcourir un tableau, il faut faire autant d'**itérations** qu'il y a d'**items**. Le nombre d'items d'un tableau se récupère avec la propriété **length**, exactement comme pour le nombre de caractères d'une chaîne. \\ À chaque itération, on va avancer d'un item dans le tableau, en utilisant la variable de boucle i. Comme elle s'incrémente, cela permet d'avancer dans le tableau item par item. 

//Exemples//

<code javascript  *.js>
var smartphones=["GalaxyS8", "iPhone7", "Honor9"];

for (var i = 0; i < smartphones.length; i++) {
	
    console.log(smartphones[i]);
}
// résultat dans la console :
"GalaxyS8"
"iPhone7"
"Honor9"
</code>

==== 7. Tableau associatif ====
  * Lien à consulter sur XUL : <html><a href="https://www.xul.fr/ecmascript/associatif.php" target="_blank">Tableau associatif en JavaScript</a></html> 

==== 8. pour aller plus loin... ====
<html><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array" target="_blank" title="Objets globaux - Array">MDN web docs Mozilla</a></html>