Syntaxes fréquentes pour manipuler un tableau (Array)

Dans une application JavaScript (ou Angular), toutes les listes de données sont stockées sous forme de tableaux (Array). Il est donc essentiel de savoir les manipuler, c’est-à-dire les créer, ajouter ou retirer des éléments, trouver un élément, etc.

Créer un tableau :

const contacts = [];  // Vide
const contacts = ['Pierre', 'Paul', 'Joe'];  // Rempli

Ajouter un élément à la fin d’un tableau - Array.push() :

const contacts = ['Pierre', 'Paul', 'Joe'];
contacts.push('Marie');                        // Modifie le tableau original
const newContacts = contacts.concat('Marie');  // Renvoie un nouveau tableau

Retirer un élément d’un tableau - Array.splice() :

const contacts = ['Pierre', 'Paul', 'Joe'];
contacts.splice(2, 1);  // Retire "Joe" (1 élément à la position 2)

Trouver une valeur précise dans un tableau - indexOf(), find(), findIndex() :

const contacts = ['Pierre', 'Paul', 'Joe'];
const foundIndex = contacts.indexOf('Pierre');

const contacts2 = [{id: 10, name: 'Pierre'}, {id: 42, name: 'Paul'}];
const foundIndex = contacts2.findIndex(contact => contact.id == 10);
const foundContact = contacts2.find(contact => contact.id == 10);

Transformer tous les éléments d’un tableau - Array.map() :

const contacts = ['Pierre', 'Paul', 'Joe'];
const formalContacts = contacts.map(function(c) {
  return 'Monsieur ' + c;
});

// SYNTAXE ÉQUIVALENTE avec fonction fléchée (return implicite)
const formalContacts = contacts.map(c => 'Monsieur ' + c);
Informations

Tags : javascript

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé