Comprendre les tableaux en Javascript

Valentsea
Total
0
Shares

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.

casiers

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 = [];
Enter fullscreen mode

Exit fullscreen mode

💡 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']
Enter fullscreen mode

Exit fullscreen mode

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']
Enter fullscreen mode

Exit fullscreen mode



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']
Enter fullscreen mode

Exit fullscreen mode



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']
Enter fullscreen mode

Exit fullscreen mode

⚠️ 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']
Enter fullscreen mode

Exit fullscreen mode

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

Total
0
Shares

The Artistry of Front-End Development: Building Captivating User Experiences

Introduction Welcome to the fascinating world of front-end development, where technology and creativity come together to create the…

You May Also Like