Comment afficher les éléments d’un tableau en JavaScript

Pour afficher les éléments d’un tableau JavaScript, vous pouvez écrire chaque valeur sur sa propre ligne, afficher le tableau ou créer une chaîne mise en forme. Utilisez une boucle avec index ou forEach pour afficher les valeurs ligne par ligne, console.log() pour examiner le tableau entier, et map() avec join() pour ajouter une numérotation ou choisir un séparateur. Pour sélectionner certaines valeurs, utilisez slice() ; pour combiner des tableaux, utilisez concat(). Les méthodes pop() et shift() renvoient aussi des valeurs, mais les retirent du tableau d’origine.

Afficher un élément par ligne avec des boucles et forEach

Une boucle for avec index donne un accès direct à chaque valeur et à sa position. Une boucle while peut faire de même si vous initialisez l’index avant la boucle et l’incrémentez à chaque passage. Pour appliquer une action simple à chaque valeur, forEach accepte une fonction de rappel qui reçoit l’élément courant et, facultativement, son index. Ces méthodes affichent une valeur par appel à console.log() :

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
names.forEach((name) => console.log(name));

mehvish
tahir
aftab
martell

Choisissez une boucle avec index si la suite du traitement a besoin de cette position ou si vous devez contrôler l’itération. forEach est concise lorsque l’objectif consiste simplement à traiter chaque élément du tableau. Elle renvoie undefined et ne crée pas de tableau transformé.

Afficher le tableau entier avec console.log()

Passez le tableau lui-même à console.log() pour examiner tous ses éléments en un seul appel. C’est pratique lors du débogage, mais l’affichage dépend de la console d’exécution : les navigateurs et Node.js peuvent présenter les tableaux différemment. Si une autre partie du programme a besoin d’une chaîne au format prévisible, convertissez plutôt les valeurs avec join().

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names);

[ 'mehvish', 'tahir', 'aftab', 'martell' ]

console.log() est une méthode de console, tandis que forEach, map et les méthodes de conversion ci-dessous sont des méthodes de tableau. L’affichage dans la console ne constitue pas un format sérialisé destiné aux fichiers ou aux données réseau.

Mettre en forme ou numéroter les éléments dans une chaîne

Utilisez map() pour créer un nouveau tableau d’étiquettes, puis join() pour réunir ces étiquettes dans une chaîne. La fonction de rappel reçoit l’élément et son index, qui commence à zéro ; ajouter un à cet index permet d’obtenir une numérotation destinée à la lecture. map() laisse le tableau d’origine inchangé et join() renvoie une chaîne.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const numberedNames = names.map((name, index) => `${index + 1}. ${name}`);
console.log(numberedNames.join(' | '));

1. mehvish | 2. tahir | 3. aftab | 4. martell

Pour obtenir une chaîne simple avec des éléments séparés par des virgules, la méthode toString() convertit le tableau en chaîne. Elle sépare les éléments par des virgules sans permettre de choisir un autre séparateur. La méthode join() vous laisse en choisir un, comme une espace ou une barre verticale. Ces deux méthodes renvoient une chaîne, mais ne l’affichent pas elles-mêmes ; passez le résultat à console.log() pour l’afficher.

Afficher certains éléments avec slice()

Appelez slice(start, end) pour obtenir une copie superficielle d’une partie du tableau, puis affichez le tableau renvoyé. L’index de début est inclus et celui de fin est exclu : slice(0, 2) sélectionne donc les deux premiers éléments. slice() ne retire aucune valeur du tableau d’origine.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
console.log(names.slice(0, 2));

[ 'mehvish', 'tahir' ]

Les valeurs sélectionnées conservent leur ordre d’origine. Pour la méthode de chaîne qui utilise des arguments d’index similaires, consultez la référence de slice() ; ici, c’est un tableau qui appelle la méthode.

Combiner des tableaux avec concat()

Utilisez concat() pour créer un nouveau tableau qui contient d’abord les éléments du tableau appelant, puis ceux du tableau fourni. Affichez directement le résultat pour l’examiner, ou appelez join() si vous voulez obtenir une chaîne avec le séparateur de votre choix. Aucun des deux tableaux d’entrée n’est modifié.

const fruitsArrayOne = ['apple', 'banana', 'grapes'];
const fruitsArrayTwo = ['mango', 'water-melon'];
const combined = fruitsArrayOne.concat(fruitsArrayTwo);
console.log(combined.join(', '));

apple, banana, grapes, mango, water-melon

L’ordre compte : le tableau placé avant .concat() apparaît en premier dans le résultat. La méthode accepte également des valeurs individuelles ou d’autres tableaux comme arguments.

Afficher et retirer un élément à une extrémité

Utilisez pop() pour récupérer et retirer le dernier élément, ou shift() pour récupérer et retirer le premier. Chaque méthode modifie le tableau d’origine et renvoie la valeur retirée, que vous pouvez passer à console.log(). Utilisez-les seulement si cette modification est voulue ; choisissez slice() ou lisez un index si le tableau source doit rester intact.

const names = ['mehvish', 'tahir', 'aftab', 'martell'];
const lastName = names.pop();
console.log(lastName);
console.log(names.join(', '));

martell
mehvish, tahir, aftab

pop() et shift() sont des méthodes de tableau, et non des opérations sur les chaînes. Le premier appel ci-dessus affiche la valeur qui se trouvait à la fin ; la ligne suivante montre le tableau restant. Pour examiner le premier élément tout en le retirant, remplacez pop() par shift().