Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Utilisation des méthodes de tableau dans JavaScript

Par Jeferson PHILLIP Publié le 12/09/2017 à 01:00:55 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 les tableaux. Les méthodes qui modifient le tableau 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 mutateurs.

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.

Les tableaux sont semblables aux chaînes de caractères, en ce sens qu'ils comportent tous deux une séquence d'éléments auxquels on peut accéder via le numéro d'index. Cependant, il est important de se rappeler que les chaînes sont un type de données immuable, ce qui signifie qu'elles ne peuvent pas être modifiées. Les tableaux, d'autre part, sont mutables, ce qui signifie que de nombreuses méthodes de tableau affecteront le tableau d'origine, pas une copie du tableau.

Cet article passera par l'ajout et la suppression d'éléments, l'inversion, le remplacement et la modification d'éléments dans un tableau.

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.

isArray()

Avant d’entamer les méthodes mutateurs, regardons la méthode isArray() pour tester si les objets sont des tableaux. Il s'agit d'une méthode booléenne qui renvoie true si la valeur d'une variable est égale à un tableau. Si l'objet n'est pas un tableau, cette méthode renvoie false.

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

// Test si la variable poisson est un tableau
Array.isArray(poisson);
Résultat affiché:
true

La méthode isArray() est utile parce que l'opérateur typeof que nous utilisons habituellement renvoie objet lorsqu'il est utilisé avec des tableaux, parfois il est nécessaire de faire la distinction entre un objet et un objet Array.

Notez que isArray() est écrit différemment de la plupart des méthodes de tableau, la variable de tableau étant fournie comme argument à la méthode.

Maintenant que nous savons comment vérifier si un objet est un tableau, passons à des méthodes mutateurs.

pop()

La première méthode mutateur que nous allons voir est la méthode pop (), qui supprime le dernier élément de la fin d'un tableau.

Commenssons par notre gamme de poissons.

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

Initialisons la méthode pop() pour supprimer le dernier élément. Dans ce cas, ce sera le littérale "anguille".

// Utilisation de la méthode pop pour supprimer un élément de la fin du tableau
poisson.pop();

Faisons un appel de notre tableau pour s'assurer qu'il soit renvoyé sans le dernier élément:

poisson;
Résultat affiché:
[ "piranha", "barracuda", "carpe" ]

Nous avons supprimé avec succès anguille du tableau poisson. La méthode pop() ne prend aucun paramètre supplémentaire.

shift()

Une autre méthode de décalage, la méthode shift() supprime le premier élément du début d'un tableau.

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

Utiliseons shift() pour supprimer "piranha" de l'index 0 et décaler tout le reste des éléments par un numéro d'index.

// Utilisation de la méthode shift pour supprimer un élément au début du tableau
poisson.shift();
poisson;
Résultat affiché:
[ "barracuda", "carpe", "anguille" ]

Dans cet exemple, "piranha" a été supprimé et chaque élément a décalé un numéro d'index. Pour cette raison, il est préférable d'utiliser la méthode pop() c’est possible, car les autres éléments du tableau maintiendront leurs positions d'index.

push()

La méthode mutateur push ()ajoute un nouvel élément ou des éléments à la fin d'un tableau.

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

Afin d'ajouter un élément à la fin, nous écrivons le nouvel élément comme paramètre de la fonction.

// Utilisation de la méthode push pour ajouter un élément à la fin d'un tableau
poisson.push("espadon");
poisson;
Résultat affiché:
[ "piranha", "barracuda", "carpe", "anguille", "espadon" ]

Il est également possible d'ajouter plusieurs nouvelles valeurs au tableau. Par exemple, poisson.push("espadon", "maquereau") aurait ajouté des éléments aux index 4 et 5.

unshift()

La méthode mutateur unshift() ajoute un nouvel élément ou des éléments au début d'un tableau.

let poisson = [ "piranha", "barracuda", "carpe", "anguille" ];
// Utilisation de la méthode unshift pour ajouter un élément au début d'un tableau
poisson.unshift("requin");
poisson;
Résultat affiché:
[ "requin", "piranha", "barracuda", "carpe", "anguille" ]

Dans l'exemple ci-dessus, "requin" a été ajouté à la position d'index 0, en déplaçant tous les autres éléments du tableau par un numéro d'index. Tout comme avec shift(), vous pouvez ajouter plusieurs éléments à la fois séparés par des virgules.

pop() et push() affectent la fin d'un tableau, shift() et unshift() affectent le début d'un tableau. Un moyen simple de se souvenir de cela est de garder à l'esprit que shift() et unshift() changent tous les numéros d'index du tableau renvoyé.

splice()

La méthode splice() peut ajouter ou supprimer un élément de n'importe quelle position dans un tableau. La méthode mutateur, splice() peut soit ajouter ou supprimer, soit ajouter et supprimer simultanément.

splice() prend trois paramètres: le numéro d'index où commencer, le nombre d'éléments à supprimer et les éléments à ajouter (facultatif).

splice(numéro d'index où commencer, nombre d'éléments à supprimer, éléments à ajouter)

splice(0, 0, "nouveau") ajouterait la chaîne de caractère "nouveau" au début d'un tableau mais ne supprimerait aucun élément.

Examinons quelques exemples ci-dessous sur la façon dont splice() peut ajouter et supprimer des éléments dans un tableau.

Ajouter avec splice()

Si nous définissons notre deuxième paramètre (éléments à supprimer) comme 0, splice() supprime zéro des éléments. De cette façon, nous pouvons choisir d'ajouter uniquement un élément à partir de n'importe quel numéro d'index, ce qui rend splice() plus puissante que push() ou unshift(), qui n'ajoute que des éléments à la fin ou au début d'un tableau.

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

// Ajout avec splice d'un nouvelle élément à la position d'index 1
poisson.splice(1, 0, "raie");
poisson;
Résultat affiché:
[ "piranha", "raie", "barracuda", "carpe", "anguille" ]

La nouvelle chaîne de caractère, "raie", a été ajoutée dans le tableau, à partir de l'index 1.

Suppression avec splice()

Si nous laissons le troisième paramètre (éléments à ajouter) vierge, nous pouvons simplement supprimer un élément de n'importe quel point du tableau.

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

// Suppression de deux éléments en commençant par position d'index 1
poisson.splice(1, 2);
poisson;
Résultat affiché:
[ "piranha", "anguille" ]

Nous avons supprimé deux éléments du tableau, en commençant par l'index 1, "barracuda". Si le second argument est supprimé, tous les éléments à la fin du tableau seront supprimés.

Ajouter et supprimer avec splice()

En utilisant tous les paramètres à la fois, nous pouvons ajouter et supprimer des éléments du tableau en même temps.

Pour démontrer cela, supprimons les mêmes éléments que plus haut, et ajoutons un nouvel élément à leurs positions.

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

// Remove two items and add one
poisson.splice(1, 2, "raie");
poisson;
Résultat affiché:
[ "piranha", "raie", "anguille" ]

splice() est une méthode puissante pour modifier n'importe quelle partie d'un tableau. Notez que splice() ne doit pas être confondue avec une slice() un accesseur qui fera une copie d'une section d'un tableau.

reverse()

La méthode reverse() inverse l'ordre des éléments dans un tableau.

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

En utilisant reverse(), le dernier élément sera le premier et le premier élément sera le dernier.

// Inverser l'ordre des éléments du tableau poisson
poisson.reverse();
poisson;
Résultat affiché:
[ "anguille", "carpe", "barracuda", "piranha" ]

La méthode reverse() array n'a pas de paramètres.

fill()

La méthode fill() remplace tous les éléments d'un tableau avec une valeur statique.

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

Dans le tableau poisson, nous avons quatre éléments. Appliquons la méthode fill() avec le littérale "requin".

// Remplacement de toutes les valeurs du tableau par "requin"
poisson.fill("requin");
poisson;
Résultat affiché:
[ "requin", "requin", "requin", "requin" ]

Les quatre éléments du tableau ont été remplacés par la même valeur, "requin". fill() prend également des arguments facultatifs tel que où commencer et où finir.

poisson.fill("requin", 1) // > [ 'piranha', 'requin', 'requin', 'requin' ]
poisson.fill("requin", 1, 3); // > [ 'piranha', 'requin', 'requin', 'anguille' ]

En utilisant fill(), nous pouvons remplacer un ou plusieurs éléments dans un tableau avec une valeur statique.

sort()

La méthode sort() classe les éléments dans un tableau en fonction du premier caractère de l'élément. Dans le cas où le premier caractère est identique, il continuera en bas de la ligne et comparera le second caractère, et ainsi de suite.

Par défaut, sort() classe par ordre alphabétique un tableau de chaînes de caractère qu’ils soient en majuscules ou minuscules.

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

// Classer les éléments dans un tableau
poisson.sort();
poisson;
Résultat affiché:
[ "anguille", "barracuda", "carpe", "piranha" ]

Puisque sort() est basé sur le premier caractère unicode, il trie les éléments majuscules avant les minuscules.

Modifions notre tableau d'origine afin que l'une de nos chaînes commence par une lettre majuscule.

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

// Classer les éléments dans un tableau
poisson.sort();
poisson;
Résultat affiché:
[ "Carpe", "anguille", "barracuda", "piranha" ]

Les chiffres viennent avant les caractères en majuscules et en minuscules.

Nous pouvons à nouveau modifier le tableau pour inclure un numéro dans l'un des éléments du tableau.

let poisson = [ "piranha", "1 barracuda", "Carpe", "anguille" ];

// Classer les éléments dans un tableau
poisson.sort();
poisson;
Résultat affiché:
[ "1 barracuda", "Carpe", "anguille", "piranha" ]

Par défaut sort() ne triera pas un tableau de nombres par taille. Au lieu de cela, il ne vérifiera seulement le premier caractère du numéro.

let nombres = [ 56, 96, 95, 43, 5, 9 ];
nombres.sort();
Résultat affiché:
[43, 5, 56, 9, 95, 96]

Afin de trier correctement les nombres, nous pouvons créer une fonction de comparaison comme argument.

// Fontion pour trier les numéros par taille
const triNumerique = (a, b) => {
  return a - b;
}

nombres.sort(triNumerique);
Résultat affiché:
[5, 9, 43, 56, 95, 96]

La fonction de comparaison triNumerique nous a permis de trier comme prévu. sort() appliquera la modification au tableau d'origine.

Conclusion

Dans cet article, nous avons examiné les principales méthodes mutateurs de tableaux en JavaScript. Les méthodes mutateurs modifient le tableau d'origine auquel elles sont utilisées, par opposition à la création d'une copie comme les méthodes accesseurs. Nous avons appris comment ajouter et supprimer des éléments au début ou à la fin d'un tableau, ainsi que trier, inverser et remplacer la valeur des éléments d’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