Les tableaux en Javascript

Comprendre Les Tableaux en JavaScript

tableaux javascript image

 

Les tableaux (ou arrays) en JavaScript sont des structures de données essentielles qui permettent de stocker et de manipuler des collections d’éléments. Comprendre le tableau en javascript est crucial pour tout développeur, car ils sont omniprésents dans la programmation.

 

Qu’est-ce qu’un Tableau ?

 

Un tableau est une collection ordonnée d’éléments, qui peuvent être de n’importe quel type de données : nombres, chaînes de caractères, objets, autres tableaux, etc. Chaque élément dans un tableau a un index numérique qui commence à 0.

 

Création d’un Tableau

 

Il existe plusieurs façons de créer un tableau en JavaScript.

 

Utilisation de Crochets
 

La manière la plus courante et la plus simple :

 
 

let fruits = ['Pomme', 'Banane', 'Cerise'];
 
 
Utilisation de Array

 

Vous pouvez également utiliser le constructeur Array :

 
 

let fruits = new Array('Pomme', 'Banane', 'Cerise');
 
Ici on utilisera le tableau fruits stocker dans cette variable créer ci dessus pour les exemples suivants 
que l’on va pouvoir utiliser avec les tableaux
 
( Attention n‘oubliez pas d’avoir écrit ce tableau fruits d’abord dans votre script avant d’écrire les méthodes que l’on va voir ci dessous ) :
 
 

Accéder aux Éléments d’un Tableau

 

Pour accéder à un élément spécifique dans un tableau, utilisez son index. Les indices commencent à 0.

 

 

let premierFruit = fruits[0]; // 'Pomme' let secondFruit = fruits[1]; // 'Banane'
 

 

Modifier les Éléments d’un Tableau

 

Vous pouvez modifier les éléments d’un tableau en utilisant leur index :

 
 

fruits[1] = 'Orange'; console.log(fruits); // ['Pomme', 'Orange', 'Cerise']
 

Propriétés et Méthodes Utiles

 
Longueur du Tableau
 

La propriété length retourne le nombre d’éléments dans un tableau :

 
 

let nombreDeFruits = fruits.length; // 3

 

 
Ajouter des Éléments
 

Pour ajouter des éléments à la fin d’un tableau, utilisez la méthode push :

 

 
fruits.push('Raisin');
console.log(fruits); // ['Pomme', 'Orange', 'Cerise', 'Raisin']

 

 
Pour ajouter des éléments au début d’un tableau, utilisez la méthode unshift :
 
 
 
fruits.unshift('Fraise');
console.log(fruits); // ['Fraise', 'Pomme', 'Orange', 'Cerise', 'Raisin']

 

 
Supprimer des Éléments
 

Pour supprimer le dernier élément, utilisez la méthode pop :

 

 
let dernierFruit = fruits.pop();
console.log(dernierFruit); // 'Raisin'
console.log(fruits);       // ['Fraise', 'Pomme', 'Orange', 'Cerise']

 

 
Pour supprimer le premier élément, utilisez la méthode shift :
 
 
 
let premierFruit = fruits.shift();
console.log(premierFruit); // 'Fraise'
console.log(fruits);       // ['Pomme', 'Orange', 'Cerise']

 

 
Parcourir un Tableau
 

Vous pouvez utiliser une boucle for pour parcourir un tableau :

 

 
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

 

 
Ou une boucle for...of pour une syntaxe plus moderne :
 
 
 
for (let fruit of fruits) {
    console.log(fruit);
}

 

 

Méthodes Avancées

 
map

 

La méthode map crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d’origine :

 

 
let lengths = fruits.map(fruit => fruit.length);
console.log(lengths); // [5, 6, 6] (longueurs des chaînes 'Pomme', 'Orange', 'Cerise')

 

 
filter

 

La méthode filter crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie :

 

 
let longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits); // ['Orange', 'Cerise'] (Ils reste seulement les mots de plus 5 lettres)

 

 
reduce

 

La méthode reduce applique une fonction à un accumulateur et à chaque valeur du tableau (de gauche à droite) pour réduire le tableau à une seule valeur :

 

 
let totalLength = fruits.reduce((acc, fruit) => acc + fruit.length, 0);
console.log(totalLength); // 17 (nouveau tableau de 17 length. somme des chrs. de tous les fruits)

 

 
find

 

La méthode find retourne la première valeur du tableau qui satisfait une condition :

 

 
let fruitWithO = fruits.find(fruit => fruit.includes('o'));
console.log(fruitWithO); // 'Pomme' (renvoie le fruit qui contient un o)

 

 

Tableaux Multi-dimensionnels

 

Les tableaux peuvent contenir d’autres tableaux, créant ainsi des tableaux multi-dimensionnels :

 

 
let tableau2D = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(tableau2D[1][2]); // 6

 

 

Conclusion

 

Les tableaux en JavaScript sont des outils puissants et flexibles pour gérer des collections de données. Ils offrent une multitude de méthodes pour ajouter, modifier, supprimer et parcourir les éléments de manière efficace. En maîtrisant les tableaux, Tu seras capable de manipuler et transformer tes données avec aisance.

 

Pour aller encore plus loin et maîtriser pleinement le JavaScript, je te propose un guide bonus exclusif rempli d’astuces et de techniques en JS.

Ce guide t’aidera à développer des compétences solides et à écrire du code JavaScript performant et maintenable.

Télécharge le car il est totalement gratuit afin d’approfondir tes connaissances et de devenir un expert en manipulation de JavaScript !

 
 

Rejoignez notre Newsletter et Restez Informé !

Vous souhaitez rester à jour avec les dernières tendances et actualités du monde du développement et le métier de développeur. Comment devenir développeur pro ? Rejoignez notre newsletter pour obtenir un accès exclusif à du contenu premium, des astuces de codage, des mises à jour sur les nouvelles fonctionnalités et bien plus encore !

Avantages de l’Inscription

  • Restez Informé: Recevez des articles informatifs sur les dernières avancées et les meilleures pratiques de codage et les softkills.
  • Promos Exclusives: Accédez à des formations détaillés et à des exemples de code pour améliorer vos compétences en programmation.
  • Aperçus des Nouveautés: Soyez parmi les premiers à découvrir les nouvelles fonctionnalités et les frameworks émergents dans l’écosystème du développement FrontEnd et Backend.
  • Communauté Engagée: Rejoignez une communauté passionnée de développeurs et partagez vos idées, questions et expériences.

Comment S’Inscrire

C’est simple et rapide ! Remplissez le formulaire d’inscription avec votre adresse e-mail et cliquez sur « S’Inscrire ». Vous recevrez régulièrement notre newsletter dans votre boîte de réception.


L’inscription à notre newsletter est un moyen idéal de rester informé et de progresser dans le domaine de la programmation et du développement pour devenir un développeur professionnel ou une développeuse pro.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *