Les tableaux ou Array en Javascript

Les tableaux ou Array en Javascript

Les tableaux ou Array en Javascript sont des variables qui permettent de stocker plus d'une valeur ou un groupe de valeurs sous une seule variable.

Les tableaux en JavaScript peuvent stocker toute valeur valide, y compris des chaînes de caractères, des nombres, des objets, des fonctions et même d'autres tableaux, ce qui permet de créer des structures de données plus complexes telles qu'un tableau d'objets ou un tableau de tableaux.

Comment créer un tableau en Javascript ?

Il existe différentes façons de créer un tableau en Javascript.
Le plus simple est de définir une variable comme suit :

let monArray = [1, 2, 3, 4, 5];

Un tableau peut également être créé à l'aide du constructeur Javascript Array(), comme le montre la syntaxe suivante.
Cependant la norme est d'utiliser la première solution car plus lisible.

let monArray = new Array(1, 2, 3, 4, 5);

Vous pouvez également créer un tableau à partir d'un autre tableau comme suit :

let premierTableau = [1, 2, 3];
let deuxiemeTableau = [];

deuxiemeTableau = premierTableau.map(x => x);

console.log(deuxiemeTableau);
// log
// [1, 2, 3]

Obtenir la longueur d'un tableau en Javascript

La longueur d'un tableau peut être résumée simplement au nombre d'éléments composant celui-ci.

La longueur d'un tableau est très utile pour de nombreux cas d'usages notamment pour utiliser une boucle for en javascript.

Voici comment obtenir la longueur d'un array en javascript :

let premierTableau = [1, 2, 3];
console.log(premierTableau.length)

// log 
// 3

Accéder aux éléments d'un tableau en Javascript

On peut accéder aux éléments d'un tableau par leur index en utilisant la notation entre crochets.

Un index est un nombre qui représente la position d'un élément dans un tableau ou array.

Les index des tableaux commencent par 0 et non 1.

Cela signifie que le premier élément d'un tableau est stocké à l'index 0, et non 1, le deuxième élément est stocké à l'index 1, et ainsi de suite. Les indices de tableau commencent à 0 et vont jusqu'au nombre d'éléments moins 1.

Si votre tableau a 10 éléments, Les index iront alors de 0 à 9.

Vous pouvez accéder aux différents éléments de votre tableau de la façon suivante :

let monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff'];
console.log(monPremierArray[0]);
console.log(monPremierArray[1]);
console.log(monPremierArray[monPremierArray.length - 1]);

// logs

// Michel
// Elon
// Jeff

Pour boucler sur votre tableau, vous pouvez lire notre article sur le sujet ici.

Rechercher une valeur dans un tableau en Javascript

Il existe de nombreuses techniques pour savoir si une valeur fait partie de votre tableau ou même de trouver l'index exact de cette valeur.

Voici quelques-unes des méthodes que vous pouvez utiliser :

  • array.indexOf(); - utile pour trouver l'index d'une valeur primitive dans un tableau. Retourne l'index exact si la valeur est présente sinon retourne -1.
  • array.findIndex(): - utile pour trouver l'index d'une valeur non-primitive dans un tableau. Retourne l'index exact si la valeur est présente sinon retourne -1.
  • array.includes(); - utile si vous souhaitez simplement savoir si la valeur est présente. Retourne true si vrai ou false si faux.
  • array.find(); - utile pour retourner l'index de la 1ère valeur qui matche certaines conditions.
let voitures = ['Peugeot', 'Tesla', 'Ferrari'];
voitures.indexOf('Tesla') // 1
voitures.includes('Renault') // false

let cars = [{marque: 'Peugeot', annee: '1990'},{marque: 'Tesla', annee: '2019'}, {marque: 'Ferrari', annee: '2010'}];

cars.findIndex(c => c.marque === 'Tesla'); // 1

Ajouter un élément à un tableau en Javascript

Vous pouvez simplement ajouter un élément à votre tableau avec la méthode push();

let monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff'];
monPremierArray.push('Nicolas', 'Julien');

// monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff', 'Nicolas', 'Julien'];

La méthode push() permet d'ajouter un élément à la fin de votre array.

Enlever un élément d'un tableau en Javascript

Pour enlever le premier élément d'un array vous pouvez utiliser la méthode shift(). Attention cette méthode retourne la valeur qui a été enlevée.

let monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff'];
monPremierArray.shift();

// monPremierArray = ['Elon', 'Jack', 'Jeff']

Pour enlever le dernier élément d'un array vous pouvez utiliser la méthode pop(). Cette méthode renvoie également la valeur qui a été enlevée

let monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff'];
monPremierArray.pop();

// monPremierArray = ['Michel', 'Elon', 'Jack']

Pour enlever ou ajouter un élément basé sur son index, vous pouvez utiliser la méthode splice().

array.splice(indexDebut, nbElement, element1, ..., elementN);

Cette méthode prend trois paramètres en compte :

  • Le premier paramètre est l'indice auquel il faut commencer à épisser le tableau, il est obligatoire.
  • Le deuxième paramètre est le nombre d'éléments à enlever (utilisez 0 si vous ne voulez pas enlever d'éléments), il est facultatif .
  • Le troisième paramètre est un ensemble d'éléments de remplacement, il est également facultatif.
let monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff'];
// Suppression des 2 premiers éléments
monPremierArray.splice(0, 2);

// monPremierArray = ['Jack', 'Jeff']


let monDeuxiemeArray = ['Paris', 'Marseille', 'Lyon', 'Rennes'];
// Ajout de 2 éléments au début de l'array (index 0)
monDeuxiemeArray.splice(0, 0, "Lille", "Limoges"); 

// monDeuxiemeArray = ['Lille', 'Limoges', 'Paris', 'Marseille', 'Lyon', 'Rennes']

Comment fusionner deux tableaux en Javascript

Pour fusionner plusieurs tableaux ensemble vous pouvez utiliser la méthode concat().

Vous pouvez fusionner 2 tableaux ensemble ou plus en ajoutant simplement les différents tableaux en paramètres de la méthode concat().

let monPremierArray = ['Michel', 'Elon', 'Jack', 'Jeff'];
let monDeuxiemeArray = ['Paris', 'Marseille'];
let nb = [1, 2, 3];

let total = monPremierArray.concat(monDeuxiemeArray, nb);



// total = ['Michel', 'Elon', 'Jack', 'Jeff', 'Paris', 'Marseille', 1, 2, 3];