Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Les méthodes accesseurs de tableau dans JavaScript

Par Jeferson PHILLIP Publié le 17/09/2017 à 06:55:23 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

Les tableaux en JavaScript consistent d’une liste d'éléments. JavaScript intègre de nombreuses méthodes utiles pour travailler avec ces derniers. Les méthodes qui modifient les tableaux d'origine sont connues sous le nom de méthodes mutateurs, et les méthodes qui renvoient une nouvelle valeur ou une représentation sont appelées méthodes accesseurs. Dans ce tutoriel, nous nous concentrerons sur les méthodes accesseurs.

Afin de tirer le meilleur parti de ce tutoriel, vous devriez avoir une certaine connaissance de la création, l'indexation, la modification et le parcours d’un tableau, que vous pouvez consulter dans l’article Comprendre les tableaux en JavaScript.

Dans cet article nous verrons les méthodes qui vont concaténer les tableaux, les convertir en chaînes de caractères, copier des parties d'un tableau vers autre et trouver les indices de tableaux.

Remarque : Les méthodes de tableau sont écritent correctement comme ceci Array.prototype.method(), comme Array.prototype se réfère à l'objet Array lui-même. Pour simplifier, nous appellerons simplement le nom method(). Array est également le nom de l’objet tableau en JavaScript dont vous retrouverez souvent.

concat()

La méthode concat() fusionne deux tableaux ou plus pour en former un nouveau.

Dans l'exemple ci-dessous, nous créerons deux tableaux de races de chiens et de chats et les combinerons dans un nouveau tableau.

// Création des tableaux chiens et chats
let chiens = [ "pitbull", "chihuahua" ];
let chats = [ "siamois", "sphynx", "bengal" ];

// Concaténation des deux tableaux chiens et chats pour créer un nouveau tableau animaux de compagnie
let animauxCompagnie = chiens.concat(chats);

Une fois que nous afficherons le nouveau tableau, nous verrons qu'il s'agit d'une combinaison des deux tableaux d’origine :

animauxCompagnie;
Résultat affiché:
["pitbull", "chihuahua", "siamois", "sphynx", "bengal"]

La méthode concat() peut prendre plusieurs arguments, ce qui nous permet de concaténer plusieurs tableaux avec une seule méthode.

join()

La méthode join() convertit tous les éléments d'un tableau en une nouvelle chaîne de caractères.

let poisson = [ "piranha", "barracuda", "carpe", "anguille" ];

Si aucun argument n'est donné, le résultat de join() sera une chaîne de caractères séparée par des virgules sans espace supplémentaire.

// Joindre les éléments d'un tableau dans une chaine de caractères
let chaineCaracteresPoisson = poisson.join();

chaineCaracteresPoisson;
Résultat affiché:
"piranha,barracuda,carpe,anguille"

Pour inclure un espace ou un autre séparateur, nous pouvons ajouter une chaîne de caractère pour notre séparateur en tant que paramètre à la méthode join(). Ce paramètre contiendra le séparateur que nous souhaitons entre chaque élément de tableau.

// Joindre les éléments d'un tableau dans une chaine de caractères
let chaineCaracteresPoisson = poisson.join(', ');

chaineCaracteresPoisson;
Résultat affiché:
"piranha, barracuda, carpe, anguille"

Dans l'exemple ci-dessus, écrire ‘, ’ avec un espace, sépare les éléments du tableau de manière plus lisible. Une chaîne vide fournie en tant qu'argument supprime complètement les virgules par défaut.

slice()

La méthode slice() copie une partie d'un tableau vers un nouveau tableau.

let poisson = [ "piranha", "barracuda", "carpe", "anguille" ];

Supposons que nous souhaitons copier les deux derniers éléments dans le tableau vers un nouveau tableau. Nous commencerions par le numéro d'index du premier élément que nous voulons, soit 2 pour carpe. Nous finirons avec le numéro d'index suivant le dernier élément que nous voulons. Parce que le dernier élément, anguille, a le numéro d'index de 3, nous mettrons 4.

// Couper un tableau de 2 vers 4
let deuxDerniersPoissons = poisson.slice(2, 4);

deuxDerniersPoissons;
Résultat affiché:
[ "carpe", "anguille" ]

Dans ce cas particulier, puisque l'anguille est le dernier élément dans le tableau, le deuxième argument est en fait inutile. slice() commencera au premier index et s'arrêtera à la fin du tableau si aucun second argument n'est fourni.

// Couper un tableau de 2 vers la fin du tableau
let deuxDerniersPoissons = poisson.slice(2);

deuxDerniersPoissons;
Résultat affiché:
[ "carpe", "anguille" ]

slice() ne doit pas être confondu avec la méthode mutateur splice(), qui peut ajouter ou supprimer des éléments du tableau d'origine.

indexOf()

La méthode indexOf() renvoie le numéro d'index de la première instance d'un élément.

Dans l'exemple ci-dessous, nous avons un tableau dans laquelle barracuda est listé deux fois.

let poisson = [ "piranha", "barracuda", "carpe", "barracuda" ];

Nous utiliserons indexOf() pour trouver la première instance.

// Trouver la première instance d'un element
poisson.indexOf("barracuda");
Résultat affiché:
1

Si l'argument donné est une valeur qui n'existe pas dans le tableau, la console renverra -1.

poisson.indexOf("requin");
Résultat affiché:
-1

La méthode indexOf() est particulièrement utile dans les tableaux qui contiennent de nombreux éléments.

lastIndexOf()

La méthode lastIndexOf() renvoie le numéro d'index de la dernière instance d'un élément.

Nous pouvons tester sur le même exemple de indexOf(), qui comprend deux fois le barracuda.

let poisson = [ "piranha", "barracuda", "carpe", "barracuda" ];

// Trouver la dernière instance d'un element
poisson.lastIndexOf("barracuda");
Résultat affiché:
3

lastIndexOf() recherche le tableau à partir de la fin et renvoie le premier numéro d'index qui est trouvé.

Conclusion

Dans cet article, nous avons vu les principales méthodes accesseur de tableau intégrées à JavaScript. Les méthodes accesseurs créent une copie ou une représentation d'un tableau, par opposition aux méthodes mutateurs ou à la modification de l'original.

Nous avons appris à concaténer des tableaux, ce qui les combinent de bout en bout, ainsi que la façon de convertir les tableaux en chaînes de caractères séparées par des virgules. Nous avons également appris à copier des portions d'un tableau dans un nouveau tableau et à trouver les premiers et derniers indices d'un élément donné dans un tableau.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels