Collections indexes

Le type Array

Un tableau (array en anglais) est un ensemble ordonn de valeurs auxquelles on peut faire rfrence avec un nom et un indice. Par exemple, si on a un tableau emp qui contient les noms d'employs indexs par leurs numros d'employ, on pourrait utiliser emp[0] pour accder l'employ 0, emp[1] pour accder au suivant et ainsi de suite.

JavaScript ne possde pas de type particulier pour reprsenter un tableau de donnes. En revanche, il est possible d'utiliser l'objet natif Array ainsi que ses mthodes pour manipuler des tableaux. L'objet Array possde plusieurs mthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possde une proprit de longueur ainsi que d'autres proprits qui peuvent tre utilises avec les expressions rationnelles.

Crer un tableau

Les instructions qui suivent sont quivalentes et permettent de crer le mme tableau :

let arr = new Array(lment0, lment1, ..., lmentN);
let arr = Array(lment0, lment1, ..., lmentN);
let arr = [lment0, lment1, ..., lmentN];

lment0, lment1, ..., lmentN est une liste de valeurs qui formeront les lments du tableau. Lorsque ces valeurs sont dfinies, le tableau initialisera la valeur des lments correspondants. La proprit length du tableau permet de connatre le nombre d'arguments du tableau.

Parmi les instructions prcdentes, une utilise des crochets, on appelle ceci un  littral de tableau  ou un  initialisateur de tableau . Cette notation est plus courte que les autres et est souvent prfre pour sa lisibilit. Pour plus d'informations sur cette notation, voir la page sur les littraux de tableaux pour plus dtails.

Afin de crer un tableau de longueur non nulle mais sans aucun lment initialis, on peut utiliser l'une des deux instructions suivantes :

let arr = new Array(longueurTableau);

// sera quivalent  :
let arr = Array(longueurTableau);

// et aura le mme effet que :
let arr = [];
arr.length = longueurTableau;

On a vu comment crer un tableau, il est aussi possible d'affecter des tableaux des proprits d'objets (que ce soit lors de leur cration ou pour les modifier) :

let obj = {};
// ...
obj.prop = [lment0, lment1, ..., lmentN];

// OU
let obj = {prop: [lment0, lment1, ...., lmentN]}

Si on souhaite initialiser un tableau avec un seul lment et que cet lment est un nombre, il est ncessaire d'utiliser la notation littrale. En effet, si un nombre est pass la fonction Array() pour construire le tableau, celui-ci sera interprt comme une longueur et non comme la valeur d'un lment.

let arr1 = [42]; // Le tableau cr contient bien un lment qui vaut 42
let arr2 = Array(42); // Cre un tableau sans lment
// mais dont arr.length vaut 42

// Le code ci-dessus est quivalent 
let arr = [];
arr.length = 42;

Si N est un nombre dcimal dont la partie fractionnaire n'est pas nulle, tout appel Array(N) renverra une exception RangeError. Par exemple :

let arr = Array(9.3); // RangeError: Invalid array length

Si on souhaite crer un tableau d'un seul lment et ce quel que soit le type de donnes, il sera prfrable d'utiliser les littraux de tableaux. Sinon, on peut crer un tableau vide puis lui ajouter un seul lment.

Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la mthode Array.of afin de crer un tableau compos d'un seul lment :

let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"

Remplir un tableau

Il est possible de remplir un tableau en affectant des valeurs ses lments. Par exemple :

let emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";

let arr = [];
arr[3.4] = "Oranges";
console.log(arr.length); // 0
console.log(arr.hasOwnProperty(3.4)); // true

Il est aussi possible de remplir un tableau directement lors de sa cration :

let monTableau = new Array("Coucou", maVar, 3.14159);
let monTableau = ["Mangue", "Pomme", "Orange"];

Faire rfrence aux lments d'un tableau

Il est possible de faire rfrence aux lments d'un tableau en utilisant un nombre ordinal li l'lment. Ainsi, si on dfinit le tableau suivant :

let monTableau = ["Air", "Eau", "Feu"];

On pourra accder au premier lment du tableau en utilisant monTableau[0], on accdera au deuxime lment avec monTableau[1]. Les indices des lments sont compts partir de 0.

let arr = ["un", "deux", "trois"];
arr[2]; // "trois" - on accde  un lment du tableau
arr["length"]; // 3 - on accde  une proprit du tableau

Comprendre la proprit length

En termes d'implmentation, les tableaux JavaScript stockent leurs lments comme des proprits normales, l'indice tant utilis comme nom pour dsigner la valeur de la proprit. La proprit length est elle un peu spciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est plac l'indice 30, chats.length renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent partir de 0 et pas partir de 1. Cela signifie que la valeur de la proprit length sera plus grande, de 1, par rapport l'indice le plus lev :

let chats = [];
chats[30] = ["Biduche"];
console.log(chats.length); // 31

Il est aussi possible d'affecter une valeur la proprit length. Si la valeur fournie est infrieure au nombre d'lments stocks, cela tronquera le tableau. Si la valeur est 0, cela videra le tableau :

let chats = ["Marie", "Toulouse", "Berlioz"];
console.log(chats.length); // 3

chats.length = 2;
console.log(chats); // affiche "Marie,Toulouse" - Berlioz a t retir

chats.length = 0;
console.log(chats); // affiche [], le tableau est vide

chats.length = 3;
console.log(chats); // [ <3 empty slots> ]

Parcourir un tableau

Un tableau est une structure de donnes qui se prte particulirement aux boucles, on pourra utiliser ces dernires pour parcourir les lments du tableau de faon itrative. Voici un exemple de parcours simple :

let couleurs = ["rouge", "vert", "bleu"];
for (let i = 0; i < couleurs.length; i++) {
  console.log(couleurs[i]);
}

Si on sait qu'aucun des lments ne vaut false dans un contexte boolen (par exemple, si le tableau contient des nuds du DOM), on peut utiliser une formulation encore plus concise :

let divs = document.getElementsByTagName("div");
for (let i = 0, div; (div = divs[i]); i++) {
  /* On effectue un traitement sur les div */
}

Cette syntaxe permet d'viter d'avoir vrifier la longueur du tableau et de grer l'affectation de la variable div pour chaque lment du tableau.

La mthode forEach() fournit une autre mthode pour parcourir un tableau :

let couleurs = ["rouge", "vert", "bleu"];
couleurs.forEach(function (couleur) {
  console.log(couleur);
});

Avec les fonctions flches (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :

let couleurs = ["rouge", "vert", "bleu"];
couleurs.forEach((couleur) => console.log(couleur));

La fonction passe comme argument forEach() est excute une fois pour chacun des lments du tableau (l'lment du tableau sera pass comme argument de cette fonction). Les lments qui n'ont pas de valeur affecte ne sont pas parcourus lors d'une boucle forEach.

On notera que les lments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur affecte. Cependant, si on a affect la valeur undefined de faon explicite un lment, il sera pris en compte lors de la boucle :

let tableau = ["premier", "deuxime", , "quatrime"];

// affiche ['premier', 'deuxime', 'quatrime'];
tableau.forEach(function (lment) {
  console.log(lment);
});

if (tableau[2] === undefined) {
  console.log("tableau[2] vaut undefined");
} // true

let tableau = ["premier", "deuxime", undefined, "quatrime"];

// renvoie ['premier', 'deuxime', undefined, 'quatrime'];
tableau.forEach(function (lment) {
  console.log(lment);
});

tant donn que les lments des tableaux sont stocks comme des proprits classiques, il n'est pas conseill d'utiliser des boucles forin pour parcourir les tableaux car cela listerait galement les proprits numrables (en plus des lments).

Mthodes des tableaux

L'objet Array possde les mthodes suivantes :

• concat() permet de fusionner deux ou plusieurs tableaux et de renvoyer le rsultat dans un nouveau tableau :

  js

  let monTableau = new Array("1", "2", "3");
  monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"]
  

• join(dlimiteur = ',') permet de fusionner les lments du tableau en une chane de caractres :

  js

  let monTableau = new Array("Air", "Eau", "Feu");
  let list = monTableau.join(" - "); // list sera "Air - Eau - Feu"
  

• push() permet d'ajouter un ou plusieurs lments la fin d'un tableau et renvoie la longueur du tableau :

  js

  let monTableau = new Array("1", "2");
  monTableau.push("3"); // monTableau vaut dsormais ["1", "2", "3"]
  

• pop() permet de retirer le dernier lment (le plus droite) du tableau et renvoie cet lment :

  js

  let monTableau = new Array("1", "2", "3");
  let dernier = monTableau.pop(); // monTableau vaut dsormais ["1", "2"], dernier = "3"
  

• shift() retire le premier lment d'un tableau (le plus gauche) et renvoie cet lment :

  js

  let monTableau = new Array("1", "2", "3");
  let premier = monTableau.shift(); // monTableau vaut dsormais ["2", "3"], premier vaut "1"
  

• unshift() ajoute un ou plusieurs lments au dbut du tableau et renvoie la longueur du tableau ainsi modifi :

  js

  let monTableau = new Array("1", "2", "3");
  monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]
  

• slice(indice_dbut, indice_fin) extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment :

  js

  let monTableau = new Array("a", "b", "c", "d", "e");
  monTableau = monTableau.slice(1, 4); // extrait les lments entre l'indice 1 et jusqu'
  // celui d'indice 3 (4-1), elle renvoie
  // [ "b", "c", "d"]
  

• splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...) retire des lments du tableau et (ventuellement) les remplace :

  js

  let monTableau = new Array("1", "2", "3", "4", "5");
  monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut dsormais ["1", "a", "b", "c", "d", "5"]
  // Le code remplace  partir de l'indice 1 (o il y avait la valeur "2"), supprime trois lments puis
  // insre les arguments fournis  la suite.
  

• reverse() transpose les lments du tableau mme ce tableau : le premier lment devient le dernier, le dernier devient le premier et ainsi de suite :

  js

  let monTableau = new Array("1", "2", "3");
  monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ]
  

• sort() trie les lments d'un tableau mme ce tableau :

  js

  let monTableau = new Array("Air", "Feu", "Eau");
  monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ]
  

  sort() peut galement utiliser une fonction de rappel (callback) qui dtermine comment les lments sont compars. La fonction compare deux arguments et renvoie une valeur selon les rgles suivantes :

  • Si a est infrieur b selon l'ordre, renvoie -1 (ou un autre nombre ngatif)
  • Si a est suprieur b selon l'ordre, renvoie 1 (ou un autre nombre positif)
  • Si a et b sont considrs gaux, renvoie 0.

  Par exemple, on peut utilise la fonction suivante pour trier par rapport la dernire lettre du mot :

  js

  let sortFn = function (a, b) {
    if (a[a.length - 1] < b[b.length - 1]) return -1;
    if (a[a.length - 1] > b[b.length - 1]) return 1;
    if (a[a.length - 1] == b[b.length - 1]) return 0;
  };
  monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]
  

  Du code permettant d'muler ces fonctions est disponible sur chacune des pages (polyfill). Le support natif de ces fonctionnalits dans les diffrents navigateurs peut tre trouv ici.

• indexOf(lmentRecherch[, indiceDpart]) recherche la valeur lmentRecherch dans le tableau et renvoie l'indice du premier lment qui correspond :

  js

  let a = ["a", "b", "a", "b", "a"];
  console.log(a.indexOf("b")); // Affiche 1
  // On recherche aprs la premire correspondance :
  console.log(a.indexOf("b", 2)); // Affiche 3
  console.log(a.indexOf("z")); // Affiche -1 car 'z' n'a pas t trouv
  

• lastIndexOf(lmentRecherch[, fromIndex]) fonctionne comme indexOf, mais recherche partir de la fin du tableau :

  js

  let a = ["a", "b", "c", "d", "a", "b"];
  console.log(a.lastIndexOf("b")); // Affiche 5
  // On continue la recherche aprs la premire correspondance en fin de tableau
  console.log(a.lastIndexOf("b", 4)); // Affiche 1
  console.log(a.lastIndexOf("z")); // Affiche -1
  

• forEach(callback[, objetThis]) excute la fonction callback sur chaque lment du tableau.

  js

  let a = ["a", "b", "c"];
  a.forEach(console.log); // Affichera la valeur de chaque lment dans la console
  

• map(callback[, objetThis]) renvoie un nouveau tableau dont les lments sont les images des lments du tableau courant par la fonction callback :

  js

  let a1 = ["a", "b", "c"];
  let a2 = a1.map(function (item) {
    return item.toUpperCase();
  });
  console.log(a2); // affichera A,B,C dans la console
  

• filter(callback[, objetThis]) renvoie un nouveau tableau qui contient les lments du tableau courant pour lesquels callback a renvoy true.

  js

  let a1 = ["a", 10, "b", 20, "c", 30];
  let a2 = a1.filter(function (item) {
    return typeof item == "number";
  });
  console.log(a2); // Affichera 10,20,30 dans la console
  

• every(callback[, objetThis]) renvoie true si callback renvoie true pour chaque lment du tableau.

  js

  function isNumber(value) {
    return typeof value === "number";
  }
  let a1 = [1, 2, 3];
  console.log(a1.every(isNumber)); // affiche true
  let a2 = [1, "2", 3];
  console.log(a2.every(isNumber)); // affiche false
  

• some(callback[, objetThis]) renvoie true si callback renvoie true pour au moins un lment du tableau.

  js

  function isNumber(value) {
    return typeof value === "number";
  }
  let a1 = [1, 2, 3];
  console.log(a1.some(isNumber)); // Affiche true
  let a2 = [1, "2", 3];
  console.log(a2.some(isNumber)); // Affiche true
  let a3 = ["1", "2", "3"];
  console.log(a3.some(isNumber)); // Affiche false
  

  Les mthodes prsentes ci-avant qui prennent une fonction de rappel (callback) en argument sont appeles mthodes itratives, car elles parcourent le tableau de faon itrative. Chacune de ces mthodes peut prendre en compte un deuxime argument (optionnel) qui sera l'objet this pris en compte par le callback. Si ce deuxime argument n'est pas fourni, this vaudra la valeur de l'objet global.

  La fonction de rappel est appele avec trois arguments : le premier tant la valeur de l'lment courant, le deuxime est l'indice de cet lment et le troisime reprsente le tableau lui-mme. Les fonctions JavaScript ignorent les arguments supplmentaires qui ne sont pas dclars explicitement dans la liste des paramtres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.

• reduce(callback[, valeurInitiale]) applique callback(premireValeur, secondeValeur) au fur et mesure sur le tableau pour le rduire en une seule valeur, c'est cette valeur qui est renvoye par la fonction :

  js

  let a = [10, 20, 30];
  let total = a.reduce(function (premier, deuxime) {
    return premier + deuxime;
  }, 0);
  console.log(total); // Affiche 60
  

• reduceRight(callback[, valeurInitiale]) fonctionne comme reduce(), mais dbute avec le dernier lment (parcourt le tableau de droite gauche).

  reduce() et reduceRight() sont utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, rcursivement, partir des diffrents lments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se rfrer leurs pages : Array.reduceRight et Array.reduce

Tableaux multi-dimensionnels

Les tableaux peuvent tre imbriqus les uns dans les autres. Cela signifie qu'un tableau peut avoir un lment dont la valeur est un tableau. En utilisant ce comportement, on peut donc crer des matrices, voire des tableaux plusieurs dimensions.

Par exemple, avec le code suivant :

let a = new Array(4);
for (i = 0; i < 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j < 4; j++) {
    a[i][j] = "[" + i + "," + j + "]";
  }
}

On pourra avoir le tableau suivant sur deux dimensions :

Ligne 0 : [0,0] [0,1] [0,2] [0,3]
Ligne 1 : [1,0] [1,1] [1,2] [1,3]
Ligne 2 : [2,0] [2,1] [2,2] [2,3]
Ligne 3 : [3,0] [3,1] [3,2] [3,3]

Utiliser les tableaux pour stocker d'autres proprits

Il est aussi possible d'utiliser les tableaux comme des objets afin de stocker d'autres informations avec des proprits.

const tableau = [1, 2, 3];
tableau.propriete = "valeur";
console.log(tableau.propriete); // Affiche "valeur" dans la console

Les tableaux et les expressions rationnelles

Lorsqu'un tableau est le rsultat d'une correspondance entre une expression rationnelle et une chane de caractres, les lments et proprits du tableau fournissent des informations sur la correspondance. Les mthodes suivantes peuvent renvoyer un tableau : RegExp.exec(), String.match(), String.split(). Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur les expressions rationnelles.

Manipuler des objets semblables des tableaux

Certains objets JavaScript tels que NodeList (renvoy par document.getElementsByTagName()) ou l'objet arguments (disponible au sein d'une fonction) ressemblent des tableaux mais n'en sont pas (ils n'ont pas toutes les mthodes dcrites ci-avant par exemple). Ainsi, l'objet arguments fournit une proprit length mais n'implmente pas la mthode forEach().

Les mthodes du prototype des tableaux permettent d'utiliser les mthodes d'objets Array sur des objets semblables des tableaux. Attention, elles ne sont pas appelables directement depuis ces objets :

function printArguments() {
  arguments.forEach(function (item) {
    // TypeError: arguments.forEach is not a function
    console.log(item);
  });
}

function printArguments() {
  Array.prototype.forEach.call(arguments, function (item) {
    console.log(item);
  });
}

Il est possible d'utiliser ces mthodes gnriques sur des chanes de caractres :

Array.prototype.forEach.call("une chane", function (chr) {
  console.log(chr);
});

Les tableaux typs

Les tableaux typs JavaScript sont des objets semblables des tableaux qui fournissent un moyen d'accder des donnes binaires. Comme on l'a vu ci-avant, les objets Array grandissent et rtrcissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent tre utiliss rapidement. Cependant, avec le dveloppement des applications web, les applications viennent manipuler des donnes audio, vido, binaires et accdent des donnes brutes via les WebSockets d'autres outils. Il apparat donc ncessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des donnes binaires, organises au sein de tableaux typs.

Les vues et les tampons de mmoire (buffers) : l'architecture des tableaux typs

Afin de permettre un maximum de flexibilit et d'efficacit, les tableaux typs JavaScript sparent l'implmentation entre les tampons (buffers) et les vues (views). Un tampon de mmoire, implment par l'objet ArrayBuffer, est un objet reprsentant un fragment de donnes. Un tampon n'a pas de format proprement parler et il ne fournit aucun mcanisme pour accder son contenu. Afin d'accder la mmoire contenue dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est--dire un type de donne, un indice de dpart et un nombre d'lments, qui permet de traiter les donnes initiales comme un vrai tableau typ.

[Tableaux typs dans un ArrayBuffer]

ArrayBuffer

Le type ArrayBuffer est un type de donne utilis pour reprsenter un tampon de donnes binaire gnrique dont la longueur est fixe. Un tampon de donnes ne peut pas tre manipul directement. Pour manipuler les donnes, il faut crer une vue sur le tableau typ ou un objet DataView qui reprsente le tampon dans un format spcifique et qui pourra tre utilis pour lire et crire des informations du tampon.

Les vues sur les tableaux typs

Les vues de tableaux typs possdent des noms explicites et fournissent des vues pour les types numriques usuels tels que Int8, Uint32, Float64 et ainsi de suite. Il existe un type de vue spcial qui est Uint8ClampedArray. Ce type ramne les diffrentes valeurs exploites entre 0 et 255. Cela peut notamment tre utile pour le traitement des donnes d'un canvas.

Pour plus d'informations sur les tableaux typs, voir l'article de la rfrence sur les diffrents objets TypedArray.

• Prcdent
• Suivant