Les méthodes de l’objet Array | Développement Web

Les méthodes de l’objet Array

Différentes méthodes s’appliquant sur les tableaux (objets de type Array) sont nativement disponibles en javascript. Elles apportent notamment un confort en terme de programmation et permettent d’effectuer différentes opérations sur les tableaux.

Accès direct aux méthodes:
concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice(), unshift(), constructor.

Liste des méthodes de l’objet de type Array

concat()

Le méthode concat() regroupe 2 tableaux et renvoie le résultat sous forme d’un troisième tableau.
Ce troisième tableau représente donc la fusion des 2 autres tableaux.

   var tab1 = new Array('javascript','php');
   var tab2 = new Array('html','ajax');
   var tab3 = tab1.concat(tab2);

   document.write(tab3.join(', '));
   // affiche "javascript, php, html, ajax"

join()

La méthode join() appliquée sur un tableau permet de lire le contenu de ce tableau comme une chaîne de caractères. Cette méthode attend un séparateur comme argument. Elle s’avère être très pratique pour lister le contenu d’un tableau (besoin fréquent en programmation) et pourrait être comparée à la fonction print_r($tab) du langage PHP.

   var tab = new Array('html','ajax','php','javascript');

   document.write(tab.join(' | '));
   // affiche "html | ajax | php | javascript"

pop()

La méthode pop() supprime le dernier élément d’un tableau et ne retourne aucun résultat. Seul le tableau sur lequel est appliquée cette méthode est affecté ( »amputé » de son dernier élément).

   var tab = new Array('html','ajax','php','javascript');

   tab.pop(); // suppression du dernier élément du tableau tab

   document.write(tab.join(' | '));
   // affiche "html | ajax | php"

push()

La méthode push() quant à elle ajoute des éléments à la fin du tableau. Elle attend en paramètre une ou plusieurs valeurs. Elle ne retourne aucun résultat mais affecte le tableau sur lequel elle est appelée.

   var tab = new Array('html','ajax','php','javascript');

   tab.push('css','sql'); // ajoute des éléments au tableau tab

   document.write(tab.join(' | '));
   // affiche "html | ajax | php | javascript | css | sql"

reverse()

La méthode reverse() inverse l’ordre des éléments du tableau. Ce tableau est directement affecté et la méthode ne retourne aucun résultat.

   var tab = new Array('html','ajax','php','javascript');

   tab.reverse(); // inverse l'ordre du tableau tab

   document.write(tab.join(' | '));
   // affiche "javascript | php | ajax | html"

shift()

La méthode shift() joue le même rôle que la méthode join() à la différence près qu’elle supprime le premier élément du tableau affecté et décale ainsi les indices du tableau. Elle ne retourne pas de résultat.

   var tab = new Array('html','ajax','php','javascript');

   tab.shift(); // suppression du premier élément du tableau tab

   document.write(tab.join(' | '));
   // affiche "ajax | php | javascript"

   document.write(tab[0]);
   // affiche "ajax"

slice()

La méthode slice() extrait une tranche du tableau sur lequel la méthode est appliquée. Elle attend 2 arguments, à savoir : le début et la fin de la tranche à extraire.

Cette méthode renvoie un tableau composé de la tranche extraite et s’écrit tab.slice(début,fin).

La longueur du tableau est égale à fin -(moins) début.

   var tab = new Array('html','ajax','php','javascript');

   var tabSlice = tab.slice(1,3); // Extraction d'une tranche du tableau tab

   document.write(tabSlice .join(' | '));
   // affiche "ajax | php"
   // On commence l'extraction à l'indice 1
   // La longueur de la tranche est égale à 3 - 1 soit 2
   // On s'arrête donc à l'indice 2

sort()

La méthode sort() organise les éléments du tableau (par ordre croissant ou alphabétique). Elle ne retourne aucun résultat, le tableau sur lequel est appliquée cette méthode est directement modifié.

Pour trier un tableau dans un ordre décroissant, on peut appliquer la méthode sort() suivie de la méthode reverse().

   var tab = new Array('html','ajax','php','javascript');

   tab.sort(); // Trie le tableau tab

   document.write(tab.join(' | '));
   // affiche "ajax | html | javascript | php"

   tab.reverse(); // Trie le tableau tab dans l'ordre décroissant

   document.write(tab.join(' | '));
   // affiche "php | javascript  | html  | ajax"

splice()

La méthode splice() peut affecter un tableau de deux manières différentes en fonction des arguments qu’on lui fournit.

En lui envoyant 2 arguments qui seront le début et la longueur, cette méthode écrasera, effacera la tranche du tableau affecté par cette méthode et s’écrira tab.splice(debut,longueur).

Avec des arguments en plus, la méthode splice() remplacera une tranche du tableau affecté par une autre (envoyée en paramètre) et s’écrira tab.splice(debut,longueur,element1, element2, …).

   var tab = new Array('html','ajax','php','javascript');

   tab.splice(2,1); // Ecrase / efface une tranche du tableau tab
   // Ici, on efface une tranche de longueur 1 à partir de l'indice 2
   // Cela revient en fait à suprrimer (dans notre exemple) l'élément php

   document.write(tab.join(' | '));
   // affiche "html | ajax | javascript"

  // Remplacement d'une tranche par une autre
   tab.splice(2,2,'mysql'); // Ici, on remplace la tranche 'php','javascript'
   // par la tranche 'mysql'

   document.write(tab.join(' | '));
   // affiche "html | ajax | mysql"

unshift()

La méthode unshift() ajoute quant à elle des éléments au début du tableau et décale les indices. Elle ne retourne aucun résultat et affecte directement le tableau concerné.

   var tab = new Array('html','ajax','php','javascript');

   tab.unshift('mysql','css'); // ajoute les élément mysql et css au tableau

   document.write(tab.join(' | '));
   // affiche "mysql | css | html | ajax | javascript"

constructor

La méthode constructor permet de vérifier si la variable tab est bien un objet de type Array. Cette propriété contient le constructeur de l’objet Array.

   var tab = new Array('html','ajax','php','javascript');

    if(tab.constructor.name == 'Array'){
     document.write('La variable tab est un tableau');
   }
   // Vérifie si tab est bien un objet de type Array