Les tableaux

Introduction aux tableaux

Les tableaux sont des structures de données couramment utilisées en programmation pour stocker et organiser des collections d'éléments. En JavaScript, un tableau est un type de données qui permet de regrouper plusieurs valeurs sous un seul nom.

Différence par rapport aux tableaux en PHP

En PHP, les tableaux sont des structures de données spécifiques qui peuvent être utilisées avec des clés numériques ou des chaînes de caractères, leur permettant d'être utilisés comme des structures de type hashmap. Cela signifie que les tableaux en PHP peuvent être indexés à l'aide de clés personnalisées plutôt que seulement des indices numériques. En outre, en PHP, les tableaux ne sont pas des objets.

Exemple en PHP avec clés numériques :

$tableau = [1, 2, 3];
echo $tableau[0]; // Affiche 1

Exemple en PHP avec clés de chaînes de caractères :

$tableau = ["nom" => "John", "age" => 30];
echo $tableau["nom"]; // Affiche John

D'autre part, en JavaScript, les tableaux sont des objets et peuvent être utilisés pour stocker des collections ordonnées d'éléments. Les tableaux en JavaScript sont principalement indexés à l'aide d'indices numériques, qui commencent à partir de zéro.

Exemple en JavaScript :

const tableau = [1, 2, 3];
console.log(tableau[0]); // Affiche 1

Pour compter le nombre d'éléments dans un tableau en PHP, on utilise la fonction count() :

Exemple en PHP :

$tableau = array(1, 2, 3);
echo count($tableau); // Affiche 3

En revanche, en JavaScript, pour obtenir la taille d'un tableau, on utilise la propriété length :

Exemple en JavaScript :

const tableau = [1, 2, 3];
console.log(tableau.length); // Affiche 3

Ces exemples illustrent la différence entre les tableaux en PHP et en JavaScript, ainsi que la façon de compter le nombre d'éléments dans chaque langage.

Déclaration et initialisation des tableaux

En JavaScript, il existe plusieurs façons de déclarer et d'initialiser des tableaux. Voici quelques exemples :

Déclaration et initialisation d'un tableau vide

On peut déclarer un tableau vide et lui assigner des valeurs ultérieurement.

const tableau = [];

Déclaration et initialisation d'un tableau avec des valeurs

On peut déclarer un tableau et l'initialiser avec des valeurs dès sa création.

const tableau = [1, 2, 3, 4, 5];

Déclaration et initialisation d'un tableau multidimensionnel

Un tableau multidimensionnel est un tableau qui contient d'autres tableaux à l'intérieur.

const tableauMultidimensionnel = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

Accès aux éléments d'un tableau

Une fois que nous avons déclaré et initialisé un tableau, nous pouvons accéder à ses éléments en utilisant des indices.

const tableau = [1, 2, 3, 4, 5];
console.log(tableau[0]); // Affiche 1
console.log(tableau[2]); // Affiche 3

Modification des éléments d'un tableau

Nous pouvons également modifier les éléments d'un tableau en utilisant les indices.

const tableau = [1, 2, 3, 4, 5];
tableau[0] = 10;
console.log(tableau); // Affiche [10, 2, 3, 4, 5]

Ajout d'éléments à un tableau

Pour ajouter un nouvel élément à la fin d'un tableau, nous pouvons utiliser la méthode push().

const tableau = [1, 2, 3];
tableau.push(4);
console.log(tableau); // Affiche [1, 2, 3, 4]

Suppression d'éléments d'un tableau

Pour supprimer le dernier élément d'un tableau, nous pouvons utiliser la méthode pop().

const tableau = [1, 2, 3, 4];
tableau.pop();
console.log(tableau); // Affiche [1, 2, 3]

Méthodes sur les tableaux

JavaScript propose de nombreuses méthodes intégrées pour manipuler et effectuer des opérations sur les tableaux. Ces méthodes permettent d'ajouter, de supprimer, de rechercher, de trier et de transformer les éléments d'un tableau. Voici quelques-unes des méthodes les plus couramment utilisées :

1. push() et pop()

La méthode push() permet d'ajouter un ou plusieurs éléments à la fin d'un tableau. La méthode pop() permet de supprimer le dernier élément d'un tableau et de le renvoyer.

Exemple :

const tableau = [1, 2, 3];
tableau.push(4);
console.log(tableau); // Affiche [1, 2, 3, 4]

const dernierElement = tableau.pop();
console.log(dernierElement); // Affiche 4
console.log(tableau); // Affiche [1, 2, 3]

2. shift() et unshift()

La méthode shift() permet de supprimer le premier élément d'un tableau et de le renvoyer. La méthode unshift() permet d'ajouter un ou plusieurs éléments au début d'un tableau.

Exemple :

const tableau = [1, 2, 3];
tableau.shift();
console.log(tableau); // Affiche [2, 3]

tableau.unshift(0);
console.log(tableau); // Affiche [0, 2, 3]

3. concat()

La méthode concat() permet de fusionner deux tableaux (ou plus) en créant un nouveau tableau.

Exemple :

const tableau1 = [1, 2];
const tableau2 = [3, 4];
const nouveauTableau = tableau1.concat(tableau2);
console.log(nouveauTableau); // Affiche [1, 2, 3, 4]

4. slice()

La méthode slice() permet de créer une copie superficielle d'une partie d'un tableau dans un nouveau tableau.

Exemple :

const tableau = [1, 2, 3, 4, 5];
const sousTableau = tableau.slice(1, 3);
console.log(sousTableau); // Affiche [2, 3]

5. indexOf() et lastIndexOf()

La méthode indexOf() permet de rechercher la première occurrence d'un élément dans un tableau et de renvoyer son index. La méthode lastIndexOf() permet de rechercher la dernière occurrence d'un élément dans un tableau et de renvoyer son index.

Exemple :

const tableau = [1, 2, 3, 2, 1];
console.log(tableau.indexOf(2)); // Affiche 1
console.log(tableau.lastIndexOf(2)); // Affiche 3

6. sort()

La méthode sort() permet de trier les éléments d'un tableau dans l'ordre lexicographique (par défaut) ou en utilisant une fonction de comparaison personnalisée.

Exemple :

const tableau = [3, 1, 2];
tableau.sort();
console.log(tableau); // Affiche [1, 2, 3]

7. reverse()

La méthode reverse() permet d'inverser l'ordre des éléments d'un tableau.

Exemple :

const tableau = [1, 2, 3];
tableau.reverse();
console.log(tableau); // Affiche [3, 2, 1]

Ces exemples illustrent quelques-unes des méthodes les plus couramment utilisées pour manipuler les tableaux en JavaScript. Il en existe bien d'autres, chacune avec ses spécificités et son utilité.

Exemples pratiques d'utilisation des tableaux

Les tableaux en JavaScript sont utilisés dans de nombreux cas pratiques. Voici quelques exemples concrets d'utilisation des tableaux :

Exemple 1 : Calcul de la somme des éléments d'un tableau

Supposons que nous ayons un tableau de nombres et que nous voulions calculer la somme de tous les éléments. Nous pouvons utiliser une boucle for pour itérer à travers le tableau et accumuler la somme.

const tableau = [1, 2, 3, 4, 5];
let somme = 0;

for (let i = 0; i < tableau.length; i++) {
  somme += tableau[i];
}

console.log(somme); // Affiche 15

Exemple 2 : Filtrage des éléments d'un tableau

Supposons que nous ayons un tableau de nombres et que nous voulions filtrer les éléments qui sont supérieurs à une valeur donnée. Nous pouvons utiliser la méthode filter() pour créer un nouveau tableau contenant uniquement les éléments filtrés.

const tableau = [10, 5, 8, 3, 12];
const valeurLimite = 7;

const tableauFiltre = tableau.filter(function(element) {
  return element > valeurLimite;
});

console.log(tableauFiltre); // Affiche [10, 8, 12]

Exemple 3 : Recherche d'un élément dans un tableau

Supposons que nous ayons un tableau de noms et que nous voulions vérifier si un nom spécifique est présent dans le tableau. Nous pouvons utiliser la méthode includes() pour effectuer cette vérification.

const noms = ["Alice", "Bob", "Charlie", "Dave"];
const nomRecherche = "Charlie";

if (noms.includes(nomRecherche)) {
  console.log("Le nom est présent dans le tableau.");
} else {
  console.log("Le nom n'est pas présent dans le tableau.");
}

Exemple 4 : Transformation d'un tableau en chaîne de caractères

Supposons que nous ayons un tableau de mots et que nous voulions les concaténer pour former une seule chaîne de caractères. Nous pouvons utiliser la méthode join() pour réaliser cela.

const mots = ["Bonjour", "le", "monde!"];
const chaine = mots.join(" ");

console.log(chaine); // Affiche "Bonjour le monde!"

Ces exemples illustrent quelques-unes des utilisations pratiques des tableaux en JavaScript. Les tableaux sont des structures de données polyvalentes et puissantes qui permettent de stocker et de manipuler des collections d'éléments de manière efficace.

Conclusion

Les tableaux sont des structures de données essentielles en JavaScript. Ils permettent de regrouper et d'organiser des collections d'éléments de manière efficace. Dans ce chapitre, nous avons exploré les différentes facettes des tableaux en JavaScript, en mettant l'accent sur leur déclaration, leur initialisation, l'accès aux éléments, la modification des éléments et les méthodes intégrées pour manipuler les tableaux.

Nous avons également comparé les tableaux en JavaScript avec ceux en PHP, en soulignant leurs différences clés. En PHP, les tableaux peuvent être utilisés avec des clés numériques ou des chaînes de caractères, tandis qu'en JavaScript, les tableaux sont principalement indexés à l'aide d'indices numériques. De plus, en JavaScript, les tableaux sont des objets et possèdent des méthodes intégrées pour faciliter la manipulation des données.

Il est important de comprendre les fonctionnalités et les méthodes disponibles pour travailler avec les tableaux en JavaScript, car ils sont couramment utilisés dans le développement web. Les tableaux permettent de résoudre de nombreux problèmes courants et offrent une flexibilité pour organiser et manipuler les données.

Nous avons également exploré des exemples pratiques d'utilisation des tableaux, tels que le calcul de la somme des éléments, le filtrage des éléments, la recherche d'un élément et la transformation d'un tableau en chaîne de caractères. Ces exemples illustrent la polyvalence des tableaux et leur utilité dans des scénarios réels.

En conclusion, les tableaux en JavaScript sont des outils puissants pour gérer des collections d'éléments. En comprenant leur utilisation et les méthodes disponibles, vous serez en mesure d'exploiter pleinement leur potentiel dans vos projets de développement web.

Exercices

Exercice 1: Accès aux éléments d'un tableau

Considérez le tableau suivant :

const tableau = [10, 20, 30, 40, 50];
const resultat = tableau[2] + tableau[4];
console.log(resultat);

Quelle sera la valeur affichée dans la console ?

Exercice 2: Modification d'éléments d'un tableau

Considérez le tableau suivant :

const tableau = [1, 2, 3, 4, 5];
tableau[1] = tableau[3] + 2;
console.log(tableau[1]);

Quelle sera la valeur affichée dans la console ?

Exercice 3: Ajout d'éléments à un tableau

Considérez le tableau suivant :

const tableau = [1, 2, 3];
tableau.push(tableau[0] + tableau[1]);
console.log(tableau.length);

Quelle sera la valeur affichée dans la console ?

Exercice 4: Utilisation de la méthode concat()

Considérez les deux tableaux suivants :

const tableau1 = [1, 2];
const tableau2 = [3, 4];
const nouveauTableau = tableau1.concat(tableau2);
console.log(nouveauTableau.length);

Quelle sera la valeur affichée dans la console ?

Exercice 5: Utilisation de la méthode slice()

Considérez le tableau suivant :

const tableau = [1, 2, 3, 4, 5];
const sousTableau = tableau.slice(1, 4);
console.log(sousTableau);

Quels éléments seront affichés dans la console ?

Sources

1. JavaScript Arrays - W3Schools : Cette page de W3Schools explique pourquoi utiliser les tableaux en JavaScript, comment créer et accéder aux éléments d'un tableau, ainsi que les différentes méthodes disponibles pour manipuler les tableaux.

2. Array - JavaScript | MDN : Cette page de la documentation MDN fournit une référence complète sur les tableaux en JavaScript. Vous y trouverez des informations détaillées sur les propriétés et méthodes des tableaux, ainsi que des exemples d'utilisation.

3. JavaScript Array Reference - W3Schools : Cette page de W3Schools répertorie toutes les méthodes et propriétés disponibles pour manipuler les tableaux en JavaScript. Vous y trouverez des exemples d'utilisation de chaque méthode et des explications détaillées de leur fonctionnement.