Accueil/Notions/Index (JavaScript, array methods)

Index (JavaScript, array methods)

En JavaScript, un index est une position dans un tableaux, commençant à 0 pour le premier élément, 1 pour le second, et ainsi de suite. Plusieurs méthodes de tableau utilisent les indices pour accéder, modifier ou parcourir les éléments d'un tableau.

Voici quelques méthodes de tableau importantes qui utilisent les indices :

  1. Array.forEach : Parcourt chaque élément du tableau.
  2. Array.map : Crée un nouveau tableau en appliquant une fonction à chaque élément.
  3. Array.findIndex : Renvoie l'indice du premier élément qui satisfait une condition.
  4. Array.splice : Ajoute ou supprime des éléments à partir d'un certain indice.

Je vais te montrer des exemples en TypeScript pour chacune de ces méthodes :

1. forEach

Parcourt chaque élément du tableau et exécute une fonction pour chacun d'eux. L'indice est accessible en tant que second paramètre.

let fruits: string[] = ["apple", "banana", "cherry"];

fruits.forEach((fruit, index) => {
    console.log(`Index: ${index}, Fruit: ${fruit}`);
});

2. map

Crée un nouveau tableau en appliquant une fonction à chaque élément. La fonction peut utiliser l'indice pour générer les nouveaux éléments.

let numbers: number[] = [1, 2, 3, 4];

let squares = numbers.map((num, index) => {
    return num * num + index;
});

console.log(squares); // Output: [1, 5, 11, 19]

3. findIndex

Renvoie l'indice du premier élément qui satisfait une conditions donnée. Si aucun élément ne correspond, il renvoie -1.

let ages: number[] = [3, 10, 18, 20];

let adultIndex = ages.findIndex((age) => age >= 18);

console.log(adultIndex); // Output: 2 (puisque l'élément 18 est à l'indice 2)

4. splice

Permet d'ajouter ou de supprimer des éléments à partir d'un certain indice.

let animals: string[] = ["dog", "cat", "rabbit", "elephant"];

// Supprime 1 élément à l'indice 2 et ajoute "hamster"
animals.splice(2, 1, "hamster");

console.log(animals); // Output: ["dog", "cat", "hamster", "elephant"]

Explication détaillée

  1. forEach :

    • La méthode forEach prend une fonction de rappel qui est exécutée pour chaque élément du tableau.
    • Cette fonction de rappel peut prendre jusqu'à trois arguments : l'élément courant, l'indice de l'élément, et le tableau d'origine.

  2. map :

    • La méthode map crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
    • Elle prend une fonction de rappel similaire à forEach, où l'indice peut être utilisé pour transformer les éléments.

  3. findIndex :

    • La méthode findIndex renvoie l'indice du premier élément qui satisfait la condition fournie dans une fonction de rappel.
    • Si aucun élément ne satisfait la condition, findIndex renvoie -1.

  4. splice :

    • La méthode splice modifie le contenu d'un tableau en supprimant, remplaçant ou ajoutant des éléments.
    • Elle prend au moins deux arguments : l'indice de départ et le nombre d'éléments à supprimer. Ensuite, tu peux ajouter des éléments à insérer à cet indice.

Ces méthodes montrent comment les indices peuvent être utilisés de différentes manières pour parcourir, transformer et manipuler des tableaux en JavaScript. Les indices sont fondamentaux pour travailler avec les tableaux de manière efficace et flexible.

Bien sûr, voici une liste de notions avancées et intermédiaires en JavaScript et TypeScript pour approfondir tes compétences en manipulation des tableaux et en programmation en général :

Notions Intermédiaires

  1. Filtres et Réductions

    • Array.filter
    • Array.reduce
    • Array.reduceRight

  2. Manipulation Avancée de Tableaux

    • Array.concat
    • Array.slice
    • Array.flat et Array.flatMap
    • Array.some et Array.every

  3. Itération et Transformation

    • map avancé avec des fonctions complexes
    • find et findLast
    • Utilisation de for...of et for...in

  4. Tri et Recherche

    • Array.sort
    • Array.reverse
    • Recherche binaire

Notions Avancées

  1. fonctions (programmation) et Programmation Fonctionnelle

  2. Structures de Données Avancées

    • Set et WeakSet
    • Map et WeakMap
    • Typed Arrays et Buffers (notamment en TypeScript)

  3. Async & Await et Programmation asynchrone

    • Promises (JavaScript)
    • Utilisation de async et await
    • Manipulation de tableaux avec des fonctions asynchrones (map, filter, reduce asynchrones)

  4. ES6+ et Nouvelles Fonctionnalités

    • Destructuring d'objets et de tableaux
    • Utilisation des rest et spread operators (rest, spread operator)
    • Utilisation des modules et du système de ES6 Modules

  5. Types Avancés en TypeScript

    • types génériques
    • Types conditionnels
    • Intersections et Unions
    • Mapped types et Types utilitaires

  6. Programmation Réactive

Ressources Supplémentaires

  1. Documentation Officielle

  2. Livres

    • "You Don't Know JS" (série) de Kyle Simpson
    • "Eloquent JavaScript" de Marijn Haverbeke
    • "Programming TypeScript" de Boris Cherny

  3. Cours et Tutoriels

En explorant ces notions et en pratiquant avec des projets réels, tu deviendras rapidement plus à l'aise avec la manipulation avancée des tableaux et la programmation en JavaScript et TypeScript en général.