7- Les Tableaux
Les variables de type Array, ou variables tableaux, sont des variables particulières qu’on retrouve dans de nombreux langages de programmation et qui permettent de stocker plusieurs valeurs à la fois avec un système de clef ou d’indice associé à chaque valeur.
En JavaScript, les tableaux sont avant tout des objets qui dépendent de l’objet global Array.
Dans cette nouvelle leçon, nous allons voir de que sont les tableaux et comment définir des tableaux en JavaScript. Nous nous intéresserons ensuite aux propriétés et méthodes de l’objet Array.
Présentation et création de tableaux en JavaScript
Le principe des tableaux est relativement simple : un indice ou clef va être associé à chaque valeur du tableau. Pour récupérer une valeur dans le tableau, on va utiliser les indices qui sont chacun unique dans un tableau.
Les tableaux vont s’avérer très pratique lorsqu’on voudra stocker des listes de valeurs dans une variable et pour pouvoir ensuite accéder à certaines valeurs en particulier.
Notez que dans la majorité des langages de programmation, on distingue deux types de tableaux : les tableaux dont les clefs ou indices sont des chiffres et qu’on appelle tableaux numérotés et les tableaux dont les clefs ou indices sont des chaines de caractères définies par le développeur et qu’on appelle tableaux associatifs.
Création d’un tableau en JavaScript
Les tableaux ne sont pas des valeurs primitives. Cependant, nous ne sommes pas obligés d’utiliser le constructeur Array() avec le mot clef new pour créer un tableau en JavaScript.
En effet, une syntaxe alternative et plus performante (et qu’on préfèrera donc toujours à la syntaxe new Array()) est disponible en JavaScript et nous permet des créer des tableaux qui vont tout de même pouvoir utiliser les propriétés et méthodes du constructeur Array().
let tab = new Array()
console.log(tab)
Un élément d’un tableau correspond donc à une propriété d’une instance de l’objet Array
let tab = new Array()
tab[0] = "bentaleb"
tab[1] =56
console.log(tab)
On peut créer des tableaux
let tabValeur =[15,2,145,89,74]
let produits =['Livre',20,'Ordinateur',5,['magnets,100']]Accéder à une valeur dans un tableau
Lorsqu’on crée un tableau, un indice est automatiquement associé à chaque valeur du tableau. Chaque indice dans un tableau est toujours unique et permet d’identifier et d’accéder à la valeur qui lui est associée. Pour chaque tableau, l’indice 0 est automatiquement associé à la première valeur, l’indice 1 à la deuxième et etc.
Pour accéder à une valeur en particulier dans un tableau, il suffit de préciser le nom du tableau puis l’indice associé à la valeur à laquelle on souhaite accéder entre crochets.
Dans le cas où un tableau stocke un autre tableau, il faudra utiliser deux paires de crochets : la première paire va mentionner l’indice relatif à la valeur à laquelle on souhaite accéder dans notre tableau de base (c’est-à-dire l’indice lié au sous tableau en l’occurrence, tandis que la deuxième parie de crochets va nous permettre de préciser l’indice lié à la valeur à laquelle on souhaite accéder dans notre sous tableau.
Les propriétés et les méthodes du constructeur Array()
Le constructeur Array() ne possède que deux propriétés : la propriété length qui retourne le nombre d’éléments d’un tableau et la propriété prototype qui est une propriété que possèdent tous les constructeurs en JavaScript.
Array() possède également une trentaine de méthodes et certaines d’entre elles vont être très puissantes et vont pouvoir nous être très utiles. Nous allons ici étudier celles qu’il faut connaitre.
Les méthodes push() et pop()
La méthode push() va nous permettre d’ajouter des éléments en fin de tableau et va retourner la nouvelle taille du tableau. Nous allons passer les éléments à ajouter en argument.
La méthode pop() va elle nous permettre de supprimer le dernier élément d’un tableau et va retourner l’élément supprimé.
Les méthodes unshift() et shift()
La méthode unshift() va nous permettre d’ajouter des éléments en début de tableau et va retourner la nouvelle taille du tableau. Nous allons passer les éléments à ajouter en argument.
La méthode shift() va elle nous permettre de supprimer le premier élément d’un tableau et va retourner l’élément supprimé.
Ces deux méthodes sont donc les équivalentes des méthodes push() et pop() à la différence que les éléments vont être ajoutés ou supprimés en début de tableau et non pas en fin.
La méthode splice()
Pour ajouter, supprimer ou remplacer des éléments dans un tableau, on peut également utiliser splice().
L’avantage de cette méthode est qu’elle nous permet d’ajouter, de supprimer ou de remplacer des éléments n’importe où dans un tableau.
La méthode splice() va pouvoir prendre trois arguments : une position de départ à partir d’où commencer le changement, le nombre d’éléments à remplacer et finalement les éléments à ajouter au tableau.
La méthode join()
La méthode join() retourne une chaine de caractères créée en concaténant les différentes valeurs d’un tableau. Le séparateur utilisé par défaut sera la virgule mais nous allons également pouvoir passer le séparateur de notre choix en argument de join().
La méthode slice()
La méthode slice() renvoie un tableau créé en découpant un tableau de départ.
La méthode concat()
La méthode concat() va nous permettre de fusionner différents tableaux entre eux pour en créer un nouveau qu’elle va renvoyer.
Cette méthode va prendre en arguments les tableaux que l’on souhaite concaténer à un premier de départ qu’on va pouvoir choisir arbitrairement.
Notez que l’on peut fusionner autant de tableaux que l’on veut entre eux. Les tableaux de départ ne sont pas modifiés.
