Samuel Gomez - Accéder à la page d'accueil

Javascript : les tableaux

Publié le :

Introduction Introduction

Les tableaux en Javascript sont des objets qui permettent de stocker plusieurs valeurs dans une seule variable.

Déclaration de tableau Déclaration de tableau

Déclaration d’un tableau avec des valeurs Déclaration d’un tableau avec des valeurs

Dans sa forme la plus simple un tableau est une liste de valeurs séparées par des virgules et entourées de crochets.

const fruits = ['pomme', 'banane', 'orange'];

ou

const fruits = Array.of('pomme', 'banane', 'orange');
console.log(fruits); // ['pomme', 'banane', 'orange']

Créer un tableau vide Créer un tableau vide 

const fruits = [];
// ou
const fruits = new Array();
// ou
const fruits = Array();
// ou
const fruits = Array.of();

Créer un tableau avec une longueur Créer un tableau avec une longueur 

const fruits = new Array(3);
console.log(fruits); // [undefined, undefined, undefined]

Créer un tableau avec des valeurs répétées Créer un tableau avec des valeurs répétées 

const fruits = Array(3).fill('pomme');
console.log(fruits); // ['pomme', 'pomme', 'pomme']

Créer un tableau de nombres Créer un tableau de nombres 

const nombres = [...Array(5).keys()];
console.log(nombres); // [0, 1, 2, 3, 4]

or

const nombres = Array.from(Array(5).keys());
console.log(nombres); // [0, 1, 2, 3, 4]

or

const nombres = Array.from({ length: 5 }, (value, index) => index);
console.log(nombres); // [0, 1, 2, 3, 4]

Créer un tableau à partir d’une chaîne de caractères Créer un tableau à partir d’une chaîne de caractères 

const fruits = 'pomme,banane,orange';
const tableauFruits = fruits.split(',');
console.log(tableauFruits); // ['pomme', 'banane', 'orange']

Créer une chaîne de caractères à partir d’un tableau Créer une chaîne de caractères à partir d’un tableau 

const fruits = ['pomme', 'banane', 'orange'];
const chaîneFruits = fruits.join(',');
console.log(chaîneFruits); // 'pomme,banane,orange'

Créer un tableau de nombres aléatoires sans doublons Créer un tableau de nombres aléatoires sans doublons 

const nombres = Array.from({ length: 5 }, () => Math.floor(Math.random() * 10));
const nombresUniques = [...new Set(nombres)];
console.log(nombresUniques); // [2, 5, 7, 3, 8]

Créer un tableau non modifiable Créer un tableau non modifiable 

const fruits = ['pomme', 'banane', 'orange'];
const fruitsNonModifiable = Object.freeze(fruits);
fruitsNonModifiable.push('fraise');
console.log(fruitsNonModifiable); // ['pomme', 'banane', 'orange']

Créer un tableau non modifiable avec un tuple Créer un tableau non modifiable avec un tuple 

// experimental
const aliment = #[
  ['pomme', 'banane', 'orange'],
  ['carotte', 'poireau', 'courgette'],
];
aliment[0].push('fraise');
console.log(aliment); // [['pomme', 'banane', 'orange'], ['carotte', 'poireau', 'courgette']]

Propriétés de base Propriétés de base

La longueur d’un tableau La longueur d’un tableau

La propriété length d’un tableau permet de connaître le nombre d’éléments qu’il contient.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.length); // 3

Vérifier si un tableau est vide Vérifier si un tableau est vide 

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.length === 0); // false

Lecture de valeurs Lecture de valeurs

Accéder à une valeur par son index Accéder à une valeur par son index

Chaque valeur d’un tableau est accessible par son index, les index d’un tableau démarre à 0. Pour accéder à un élément d’un tableau, on utilise la notation crochet et on indique l’index de l’élément que l’on souhaite récupérer.

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits[0]); // pomme

Récupérer l’index d’une valeur Récupérer l’index d’une valeur 

const fruits = ['pomme', 'banane', 'orange'];
console.log(fruits.indexOf('banane')); // 1

Modifier un tableau Modifier un tableau

Modifier la valeur d’un élément Modifier la valeur d’un élément

Pour modifier un élément d’un tableau, on utilise la notation crochet et on indique l’index de l’élément que l’on souhaite modifier.

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits[0] = 'fraise';
console.log(fruits); // ['fraise', 'banane', 'orange']

Modifier des éléments d’un tableau par son index Modifier des éléments d’un tableau par son index

La méthode with permet de créer un nouveau tableau en remplaçant un ou plusieurs éléments d’un tableau existant par de nouveaux éléments. On ne peut pas ajouter des éléments à la fin du tableau avec cette méthode.

// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsAvecFraise = fruits.with(2, 'fraise');
console.log(fruits); // ['pomme', 'banane', 'orange']
console.log(fruitsAvecFraise); // ['pomme', 'banane', 'fraise']

Ajouter un élément en fin de tableau Ajouter un élément en fin de tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.push('fraise');
console.log(fruits); // ['pomme', 'banane', 'orange', 'fraise']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsAvecFraise = [...fruits, 'fraise'];
console.log(fruitsAvecFraise); // ['pomme', 'banane', 'orange', 'fraise']
console.log(fruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsAvecFraise = fruits.toSpliced(fruits.length, 0, 'fraise');
console.log(fruitsAvecFraise); // ['pomme', 'banane', 'orange', 'fraise']
console.log(fruits); // ['pomme', 'banane', 'orange']

Supprimer le dernier élément d’un tableau Supprimer le dernier élément d’un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.pop();
console.log(fruits); // ['pomme', 'banane']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansOrange = fruits.toSpliced(fruits.length - 1, 1);
console.log(fruitsSansOrange); // ['pomme', 'banane']
console.log(fruits); // ['pomme', 'banane', 'orange']

Extraire une partie de tableau Extraire une partie de tableau 

// mutable
const fruits = [
  'pomme',
  'banane',
  'orange',
  'fraise',
  'carotte',
  'poireau',
  'courgette',
];
const aliment = fruits.splice(2, 3);
console.log(aliment); // ['orange', 'fraise', 'carotte']
console.log(fruits); // ['pomme', 'banane', 'poireau', 'courgette']
// immutable
const mixed = [
  'pomme',
  'banane',
  'orange',
  'fraise',
  'carotte',
  'poireau',
  'courgette',
];
const fruits = mixed.toSpliced(2, 3);
const aliments = mixed.toSpliced(0, 2).toSpliced(3, 2);
console.log(aliments); // ['orange', 'fraise', 'carotte']
console.log(fruits); // ['pomme', 'banane', 'poireau', 'courgette']
console.log(mixed); // ['pomme', 'banane', 'orange', 'fraise', 'carotte', 'poireau', 'courgette']
// immutable
const mixed = [
  'pomme',
  'banane',
  'orange',
  'fraise',
  'carotte',
  'poireau',
  'courgette',
];
const fruits = [...mixed.slice(2, 5)];
const aliments = [...mixed.slice(0, 2), ...mixed.slice(5)];
console.log(aliments); // ['orange', 'fraise', 'carotte']
console.log(fruits); // ['pomme', 'banane', 'poireau', 'courgette']
console.log(mixed); // ['pomme', 'banane', 'orange', 'fraise', 'carotte', 'poireau', 'courgette']

Insérer un élément dans un tableau Insérer un élément dans un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.splice(2, 0, 'fraise');
console.log(fruits); // ['pomme', 'banane', 'fraise', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsWithFraise = fruits.toSpliced(2, 0, 'fraise');
console.log(fruits); // ['pomme', 'banane', 'orange']
console.log(fruitsWithFraise); // ['pomme', 'banane', 'fraise', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsWithFraise = [...fruits.slice(0, 2), 'fraise', ...fruits.slice(2)];
console.log(fruits); // ['pomme', 'banane', 'orange']
console.log(fruitsWithFraise); // ['pomme', 'banane', 'fraise', 'orange']

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

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.unshift('fraise');
console.log(fruits); // ['fraise', 'pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsWithFraise = ['fraise', ...fruits];
console.log(fruitsWithFraise); // ['fraise', 'pomme', 'banane', 'orange']
console.log(fruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsWithFraise = fruits.toSpliced(0, 0, 'fraise');
console.log(fruitsWithFraise); // ['fraise', 'pomme', 'banane', 'orange']
console.log(fruits); // ['fraise', 'pomme', 'banane', 'orange']

Supprimer un élément au début d’un tableau Supprimer un élément au début d’un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.shift();
console.log(fruits); // ['banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansPomme = fruits.toSpliced(0, 1);
console.log(fruitsSansPomme); // ['banane', 'orange']
console.log(fruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansPomme = fruits.slice(1);
console.log(fruitsSansPomme); // ['banane', 'orange']
console.log(fruits); // ['pomme', 'banane', 'orange']

Inverser un tableau Inverser un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.reverse();
console.log(fruits); // ['orange', 'banane', 'pomme']
// immutable
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

Aplatir un tableau Aplatir un tableau 

console.log([0, 1, 2, [3, 4]].flat()); // [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat()); // [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2)); // [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(3)); // [0, 1, 2, 3, 4, 5]

Aplatir et appliquer un traitement Aplatir et appliquer un traitement

La méthode flatMap permet d’aplatir un tableau et d’appliquer une fonction de transformation sur chaque élément.

const nombres = [1, 2, 3, 4];

// Utilisation de flatMap pour dupliquer chaque nombre
const nombresDupliqués = nombres.flatMap(nombre => [nombre, nombre]);

console.log(nombresDupliqués); // [1, 1, 2, 2, 3, 3, 4, 4]

Supprimer des éléments Supprimer des éléments

Supprimer les doublons d’un tableau Supprimer les doublons d’un tableau 

const fruits = ['pomme', 'banane', 'orange', 'pomme', 'banane', 'orange'];
const fruitsUniques = [...new Set(fruits)];
console.log(fruitsUniques); // ['pomme', 'banane', 'orange']

Vider un tableau Vider un tableau 

const fruits = ['pomme', 'banane', 'orange'];
fruits.length = 0;
console.log(fruits); // []

Supprimer les éléments vides du tableau Supprimer les éléments vides du tableau 

const fruits = ['pomme', '', 'banane', 'orange', '', 'fraise'];
const fruitsNonVides = fruits.filter(Boolean);
console.log(fruitsNonVides); // ['pomme', 'banane', 'orange', 'fraise']

Supprimer le dernier élément d’un tableau Supprimer le dernier élément d’un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.pop();
console.log(fruits); // ['pomme', 'banane']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansOrange = fruits.slice(0, -1);
console.log(fruitsSansOrange); // ['pomme', 'banane']
console.log(fruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansOrange = fruits.toSpliced(fruits.length - 1, 1);
console.log(fruitsSansOrange); // ['pomme', 'banane']
console.log(fruits); // ['pomme', 'banane', 'orange']

Supprimer le premier élément d’un tableau Supprimer le premier élément d’un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
fruits.shift();
console.log(fruits); // ['banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansPomme = fruits.slice(1);
console.log(fruitsSansPomme); // ['banane', 'orange']
console.log(fruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsSansPomme = fruits.toSpliced(0, 1);
console.log(fruitsSansPomme); // ['banane', 'orange']
console.log(fruits); // ['pomme', 'banane', 'orange']

Parcourir un tableau Parcourir un tableau

Boucler sur un tableau avec un forEach Boucler sur un tableau avec un forEach 

const fruits = ['pomme', 'banane', 'orange'];
fruits.forEach(fruit => {
  console.log(fruit);
});

// pomme
// banane
// orange

Boucler sur le tableau avec un for…of Boucler sur le tableau avec un for…of 

const fruits = ['pomme', 'banane', 'orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

// pomme
// banane
// orange

Copier un tableau Copier un tableau

Copier un tableau à un niveau Copier un tableau à un niveau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
const copieFruits = fruits.slice();
console.log(copieFruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const copieFruits = [...fruits];
console.log(copieFruits); // ['pomme', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const copieFruits = fruits.toSpliced();
copieFruits[0] = 'fraise';
console.log(fruits); // ['pomme', 'banane', 'orange']
console.log(copieFruits); // ['fraise', 'banane', 'orange']
// immutable
const fruits = ['pomme', 'banane', 'orange'];
const copieFruits = fruits.slice();
copieFruits[0] = 'fraise';
console.log(copieFruits); // ['fraise', 'banane', 'orange']
console.log(fruits); // ['pomme', 'banane', 'orange']

Copier un tableau à plusieurs niveaux Copier un tableau à plusieurs niveaux 

// immutable
const ingredientsList = ['noodles', ['eggs', 'flour', ['water', 'butter']]];
const ingredientsListDeepCopy = JSON.parse(JSON.stringify(ingredientsList));
ingredientsListDeepCopy[1][2][1] = 'oil';
console.log(ingredientsList); // ["noodles",  ["eggs", "flour", ["water", "butter"]]]
console.log(ingredientsListDeepCopy); // ["noodles",  ["eggs", "flour", ["water", "oil"]]]

Fusionner des tableaux Fusionner des tableaux

Concaténer un tableau Concaténer un tableau 

const fruits = ['pomme', 'banane', 'orange'];
const légumes = ['carotte', 'poireau', 'courgette'];
const aliment = fruits.concat(légumes);
console.log(aliment); // ['pomme', 'banane', 'orange', 'carotte', 'poireau', 'courgette']
const fruits = ['pomme', 'banane', 'orange'];
const légumes = ['carotte', 'poireau', 'courgette'];
const aliment = [...fruits, ...légumes];
console.log(aliment); // ['pomme', 'banane', 'orange', 'carotte', 'poireau', 'courgette']

Opérations sur les tableaux Opérations sur les tableaux

Filtrer un tableau Filtrer un tableau 

// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsJaunes = fruits.filter(fruit => fruit === 'banane');
console.log(fruitsJaunes); // ['banane']

Mapper un tableau Mapper un tableau 

// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsMajuscule = fruits.map(fruit => fruit.toUpperCase());
console.log(fruitsMajuscule); // ['POMME', 'BANANE', 'ORANGE']

Réduire un tableau Réduire un tableau 

// immutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsConcatenés = fruits.reduce((acc, fruit) => acc + ' ' + fruit);
console.log(fruitsConcatenés); // 'pomme banane orange'

Somme un tableau de nombres avec une valeur initiale Somme un tableau de nombres avec une valeur initiale 

// immutable
const numbers = [1, 2, 3, 4, 5];
const somme = numbers.reduce((acc, num) => acc + num, 0);
console.log(somme); // 15

Trier un tableau Trier un tableau 

// mutable
const fruits = ['pomme', 'banane', 'orange'];
const fruitsTrier = fruits.sort();
console.log(fruitsTrier); // ['banane', 'orange', 'pomme']
// immutable
const months = ['Mar', 'Jan', 'Feb', 'Dec'];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

Regrouper les éléments d’un tableau Regrouper les éléments d’un tableau 

const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
];
// method 1 with reduce
const groupedByAge = people.reduce((acc, person) => {
  const age = person.age;
  if (!acc[age]) {
    acc[age] = [];
  }
  acc[age].push(person);
  return acc;
}, {});
console.log(groupedByAge);
// {
//    '25': [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 } ],
//    '30': [ { name: 'Bob', age: 30 }, { name: 'David', age: 30 } ]
// }

// method 2 with Object.groupBy
const groupedByAge = Object.groupBy(people, person => person.age);
console.log(groupedByAge);
// {
//    '25': [ { name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 } ],
//    '30': [ { name: 'Bob', age: 30 }, { name: 'David', age: 30 } ]
// }

Autres fonctions Autres fonctions

Vérifier si tous les éléments d’un tableau vérifient une condition Vérifier si tous les éléments d’un tableau vérifient une condition 

const fruits = ['pomme', 'banane', 'orange'];
const estFruit = fruits.every(fruit => fruit === 'pomme');
console.log(estFruit); // false

Vérifier si au moins un élément d’un tableau vérifie une condition Vérifier si au moins un élément d’un tableau vérifie une condition 

const fruits = ['pomme', 'banane', 'orange'];
const estFruit = fruits.some(fruit => fruit === 'pomme');
console.log(estFruit); // true

Trouver le premier élément d’un tableau qui vérifie une condition Trouver le premier élément d’un tableau qui vérifie une condition 

const fruits = ['pomme', 'banane', 'orange'];
const fruit = fruits.find(fruit => fruit === 'banane');
console.log(fruit); // banane

Trouver l’index du premier élément d’un tableau qui vérifie une condition Trouver l’index du premier élément d’un tableau qui vérifie une condition 

const fruits = ['pomme', 'banane', 'orange', 'banane'];
const index = fruits.findIndex(fruit => fruit === 'banane');
console.log(index); // 1

un exemple avec array.findLast un exemple avec array.findLast 

const fruits = ['pomme', 'banane', 'orange', 'banane'];
const fruit = fruits.findLast(fruit => fruit === 'banane');
console.log(fruit); // banane

un exemple avec array.findLastIndex un exemple avec array.findLastIndex 

const fruits = ['pomme', 'banane', 'orange', 'banane'];
const index = fruits.findLastIndex(fruit => fruit === 'banane');
console.log(index); // 3
Tous les articles de Javascript
Github de Samuel Gomez Linkedin de Samuel Gomez Twitter de Samuel Gomez Instagram de Samuel Gomez
Allez en haut