Comprendre les tableaux en Javascript

Après avoir vu les méthodes de chaînes de caractères, passons aux tableaux.

Un tableau (ou array en anglais) est similaire à un casier dans des vestiaires.

On peut mettre un élément de notre choix dans chaque casier et il peut y avoir autant d'éléments que souhaité.

// Je peux mettre des nombres dans mon tableau
let nums = [23, 56, 12, 0, 54];

// Ou des chaînes de caractères
let prenoms = ["Marcel", "Pascal", "Michelle"];

// Ou mettre plusieurs types ou
// même mettre des tableaux dans les tableaux #inception
let memo = ["samedi", [453, 23, "pizza"]];

// Ou avoir un tableau vide
let mesAmis = [];

💡 Que peut-on faire avec les tableaux ?

Il y a plusieurs méthodes très pratiques pour manipuler les tableaux et organiser nos données.

Comment ajouter ou supprimer des éléments

Ajouter ou extraire un élément

Il est fréquent de devoir modifier un tableau en ajoutant ou en supprimant des éléments.

array.push() ajoute un élément à la fin du tableau

array.unshift() ajoute un élément au début du tableau

// Je commence avec cet array
let nourriturePreferee = ["pain", "fromage", "chocolat"]

// ajoute un élément au début de la liste
nourriturePreferee.unshift("pâtes")
console.log(nourriturePreferee) // ['pâtes', 'pain', 'fromage', 'chocolat']

// ajoute quelque chose en fin de liste
nourriturePreferee.push("chou-fleur")
console.log(nourriturePreferee) // ['pâtes', 'pain', 'fromage', 'chocolat', 'chou-fleur']

Pour extraire un élément de notre tableau, nous avons les méthodes suivantes :

array.pop() extrait le dernier élément du tableau

array.shift() extrait le premier élément du tableau

// On reprend le même exemple
let nourriturePreferee = ["pain", "fromage", "chocolat"]

// extrait le premier élément de la liste
nourriturePreferee.shift()
console.log(nourriturePreferee) // ['fromage', 'chocolat']

// extrait le dernier élément
nourriturePreferee.pop()
console.log(nourriturePreferee) // ['fromage']

Ajouter ou supprimer un ou plusieurs éléments

En plus de ces méthodes de base, il en existe d'autres qui retournent un nouveau tableau sans modifier les tableaux d'origine.

concat(valeur0, valeur1) : fusionne deux ou plusieurs tableaux en les concaténant*

concaténer : mettre bout à bout

let sports1 = ["foot", "judo", "basket"]
let sports2 = ["rugby", "pétanque"]
let sportsTotal = sports1.concat(sports2)
console.log(sportsTotal) 
// ['foot', 'judo', 'basket', 'rugby', 'pétanque']

arr.slice(début, fin) : renvoie un tableau, contenant une copie superficielle d'une portion du tableau d'origine

let mesSports = ["danse", "musculation", "course", "karaté", "ski"]
sportsDuMardi = mesSports.slice(1,3)
console.log(sportsDuMardi)
// ['musculation', 'course']

⚠️ On note que l'élément 1 de notre tableau est "musculation" et non pas "danse". C'est parce que la numérotation des tableau commence toujours à partir de 0.

La méthode slice est très pratique, mais si je veux modifier mon tableau d'origine en remplaçant ou supprimant un ou des éléments ?

Il existe une autre méthode.

arr.splice(début, nbASupprimer[, élem1[, élem2[, ...]]]) : insère, retire, remplace un ou des éléments. Change le contenu du tableau.

let mesSports = ["danse", "musculation", "course", "karaté", "ski"]
mesSports.splice(2, 1, "rugby") 
// sélection le 3ème élément du tableau et le remplace par rubgy
console.log(mesSports)
// ['danse', 'musculation', 'rugby', 'karaté', 'ski']

Dans un prochain article, nous verrons davantage de méthodes pour manipuler les tableaux.
Merci d'avoir lu cet article.