Les tableaux en JavaScript

Les tableaux en JavaScript sont des structures de données cruciales pour le stockage et la manipulation de collections d’éléments. Leur grande polyvalence permet de gérer une diversité de données, les rendant incontournables pour des opérations avancées de traitement de données, de rendu d’interface utilisateur dynamique et de résolution de problèmes algorithmiques.

Les tableaux servent à stocker des collections d’éléments : des nombres, des chaînes de caractères, d’objets ou encore des fonctions.

Un tableau en JavaScript est une liste ordonnée d’éléments, où chaque élément est repéré par un numéro spécifique appelé « indice » ou « index ».

Création et initialisation de tableaux

// Notation littérale
let tableau1 = [];

// Utilisation du constructeur Array()
let tableau2 = new Array();

Initialiser un tableau avec des éléments

let couleurs = ['rouge', 'vert', 'bleu', 'orange', 'noir', 'blanc', 'violet', 'rose'];

Accèder aux éléments d’un tableau

Les éléments d’un tableau sont accessibles via leur indice. L’indice du premier élément commence à zéro.

console.log(couleurs[0]);        // rouge
console.log(couleurs[1]);        // vert
console.log(couleurs[5]);        // blanc

Ajouter des éléments à la fin du tableau

La méthode push() permet d’ajouter un ou plusieurs éléments à la fin d’un tableau.

couleurs.push('jaune');
console.log(couleurs);        // ['rouge', 'vert', 'bleu', 'orange', 'noir', 'blanc', 'violet', 'rose', 'jaune']

Retirer le dernier élément du tableau

La méthode pop() retire le dernier élément d’un tableau et renvoie cet élément.

let derniereCouleur = couleurs.pop();    // 'jaune'
console.log(derniereCouleur);
console.log(couleurs);        // ['rouge', 'vert', 'bleu', 'orange', 'noir', 'blanc', 'violet', 'rose']

Retirer le premier élément du tableau

La méthode shift() retire le premier élément d’un tableau et renvoie cet élément.

let premiereCouleur = couleurs.shift();        // 'rouge'
console.log(couleurs);        // ['vert', 'bleu', 'orange', 'noir', 'blanc', 'violet', 'rose', 'jaune']

Ajouter un élément au début du tableau

couleurs.unshift('gris');
console.log(couleurs);        // ['gris', 'vert', 'bleu', 'orange', 'noir', 'blanc', 'violet', 'rose', 'jaune']

Parcourir un tableau

La boucle for est utilisée pour parcourir un tableau javascript. Elle utilise un compteur pour accéder aux éléments du tableau par leur indice.

for (let i = 0; i < couleurs.length; i++) {
  console.log(couleurs[i]);
}

Parcourir un tableau

Autre méthode pour parcourir un tableau, la méthode forEach().

couleurs.forEach(function (couleur) {
  console.log(couleur);
});

La méthode forEach() prends comment premier argument un callback. On peut également l’écrire de cette façon :

couleurs.forEach((couleur) => console.log(couleur) );

Déboguer un tableau

console.log($couleurs);
console.table($couleurs);

Filtrer un tableau

La function filter() doit retourner un boolean (true/false). Si l’élément match avec startsWith() alors il sera retourné dans un tableau filtré.

let couleursCommencantParV = couleurs.filter((couleur) => couleur.startsWith("v"));

console.log(couleursCommencantParV);

Transformer un tableau

La fonction map() prend en argument une fonction de rappel qui sera appliquée à chaque élément du tableau.

let majusculeCouleurs = couleurs.map((couleur) => couleur.toUpperCase());
console.log(majusculeCouleurs);

Agréger un tableau

La méthode reduce() permet d’agréger les éléments d’un tableau en un seul résultat en utilisant une fonction de rappel.

let lesCouleurs = couleurs.reduce((accumulator, currentValue) => {
    return accumulator + `<li>${currentValue}</li>`;
}, "<ul>") + "</ul>";
console.log(lesCouleurs);

Trier un tableau

La méthode sort() trie les éléments d’un tableau et retourne le tableau trié.

couleurs.sort();
console.log(couleurs);