Recherche de site Web

Comment manipuler les tableaux JavaScript


Les tableaux JavaScript sont des structures de données qui vous permettent de stocker plusieurs valeurs sous un seul nom de variable. Les tableaux sont un type d'objet. Ils viennent avec plusieurs méthodes utilitaires que vous pouvez utiliser pour manipuler leurs données.

Les tableaux en JavaScript ont des restrictions très souples sur ce que vous pouvez y placer. Ils n'ont ni longueur fixe ni type spécifique. Ils se comportent plus comme une liste de valeurs que les tableaux classiques des langages fortement typés.

Déclarer un tableau

Les tableaux JavaScript utilisent des crochets. Vous pouvez les initialiser vides ou ajouter une série de valeurs par défaut. Les valeurs sont séparées par des virgules. Vous pouvez utiliser n'importe quelle valeur JavaScript valide, telle qu'une chaîne, un entier, un objet ou un autre tableau.

let emptyArray class="sy0">= class="br0">[class="br0">]class="sy0">;
 
let filledArray class="sy0">= class="br0">[class="st0">"hello"class="sy0">, class="nu0">123class="sy0">, class="br0">{fooclass="sy0">: class="st0">"bar"class="br0">}class="sy0">, class="br0">[class="st0">"x"class="sy0">, class="st0">"y"class="br0">]class="br0">]class="sy0">;

Accéder aux valeurs du tableau

Vous récupérez une valeur d'un tableau en spécifiant l'index auquel vous souhaitez accéder. Les index des tableaux sont numérotés à partir de 0. Utilisez la syntaxe entre crochets pour définir l'index du tableau à récupérer.

let myArray class="sy0">= class="br0">[class="st0">"foo"class="sy0">, class="st0">"bar"class="sy0">, class="st0">"example"class="br0">]class="sy0">;
 
class="co1">// logs "bar"
console.class="me1">logclass="br0">(myArrayclass="br0">[class="nu0">1class="br0">]class="br0">)class="sy0">;

Les index de tableau sont toujours des entiers en JavaScript. Vous ne pouvez pas utiliser de chaînes comme index - utilisez plutôt un objet si vous en avez besoin.

Vous pouvez modifier la valeur d'un index de tableau en le définissant directement :

arrclass="br0">[class="nu0">1class="br0">] class="sy0">= class="st0">"test"class="sy0">;

myArray montré ci-dessus contiendrait maintenant les valeurs foo, test, example.

Ajout d'éléments aux tableaux

Vous ajoutez de nouveaux éléments aux tableaux à l'aide de la méthode push() :

class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="br0">].class="me1">pushclass="br0">(class="st0">"bus"class="br0">)class="sy0">;
class="co1">// car, truck, bus

Cela ajoute l'élément à la fin du tableau. Si vous souhaitez que le nouvel élément soit inséré au début du tableau, utilisez plutôt la méthode unshift().

class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="br0">].class="me1">unshiftclass="br0">(class="st0">"bus"class="br0">)class="sy0">;
class="co1">// bus, car, truck

Parfois, vous devrez peut-être insérer un élément au milieu d'un tableau. Vous pouvez utiliser la méthode splice() pour ajouter un élément à un index spécifique :

class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="br0">].class="me1">spliceclass="br0">(class="nu0">1class="sy0">, class="nu0">0class="sy0">, class="st0">"bus"class="br0">)class="sy0">;
class="co1">// car, bus, truck

Le premier argument de splice() est l'index auquel effectuer l'insertion. Vient ensuite le nombre d'éléments à supprimer depuis le début du tableau. Lorsque vous ajoutez un nouvel élément, celui-ci doit être 0 afin que les éléments existants soient conservés. L'argument final est l'élément à ajouter.

Suppression d'éléments des tableaux

Pour supprimer un élément du tableau, utilisez la méthode pop(). Cela éjectera le dernier élément du tableau :

class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="sy0">, class="st0">"bus"class="br0">].class="me1">popclass="br0">(class="br0">)class="sy0">;
class="co1">// car, truck

Pour supprimer le premier élément du tableau, utilisez plutôt la méthode shift() :

class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="sy0">, class="st0">"bus"class="br0">].class="me1">shiftclass="br0">(class="br0">)class="sy0">;
class="co1">// truck, bus

Si vous souhaitez supprimer un élément spécifique, vous devrez à nouveau utiliser la méthode splice(). Vous devez d'abord connaître l'index que vous souhaitez supprimer. Si vous travaillez à partir de l'une des valeurs du tableau, appelez d'abord indexOf() pour obtenir son index. Vous pouvez ensuite le passer à splice(), en définissant le deuxième argument sur 1 pour supprimer un élément à l'index donné.

class="kw1">const arr class="sy0">= class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="sy0">, class="st0">"bus"class="br0">]class="sy0">;
arr.class="me1">spliceclass="br0">(arr.class="me1">indexOfclass="br0">(class="st0">"truck"class="br0">)class="sy0">, class="nu0">1class="br0">)class="sy0">;
class="co1">// car, bus

Itérer sur des tableaux

Il existe plusieurs façons d'itérer sur un tableau. L'approche traditionnelle consiste à utiliser une boucle for :

class="kw1">const arr class="sy0">= class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="sy0">, class="st0">"bus"class="br0">]class="sy0">;
class="kw1">for class="br0">(let i class="sy0">= class="nu0">0class="sy0">; i class="sy0">< arr.class="me1">lengthclass="sy0">; iclass="sy0">++class="br0">) class="br0">{
    console.class="me1">logclass="br0">(`Vehicle at position $class="br0">{iclass="br0">} is $class="br0">{arrclass="br0">[iclass="br0">]class="br0">}`class="br0">)class="sy0">;
class="br0">}

Une alternative plus courte consiste à utiliser la méthode forEach() du tableau. Il faut lui donner une fonction. La fonction est appelée une fois pour chaque élément du tableau. Il reçoit la valeur et l'index de chaque élément comme paramètres.

class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="sy0">, class="st0">"bus"class="br0">].class="me1">forEachclass="br0">(class="br0">(vehicleclass="sy0">, iclass="br0">) class="sy0">=> class="br0">{
    console.class="me1">logclass="br0">(`Vehicle at position $class="br0">{iclass="br0">} is $class="br0">{vehicleclass="br0">}`class="br0">)class="sy0">;
class="br0">}class="br0">)class="sy0">;

forEach() est souvent plus facile à utiliser qu'une boucle for. Vous devez cependant faire attention lorsque vous renvoyez des valeurs. Le retour de la fonction passée à forEach() n'annulera pas la boucle :

class="kw1">const arr class="sy0">= class="br0">[class="st0">"car"class="sy0">, class="st0">"truck"class="sy0">, class="st0">"bus"class="br0">]class="sy0">;
 
class="co1">// logs "car"
class="kw1">for class="br0">(let i class="sy0">= class="nu0">0class="sy0">; i class="sy0">< arr.class="me1">lengthclass="sy0">; iclass="sy0">++class="br0">) class="br0">{
    console.class="me1">logclass="br0">(arrclass="br0">[iclass="br0">]class="br0">)class="sy0">;
    class="kw1">if class="br0">(arrclass="br0">[iclass="br0">] class="sy0">=== class="st0">"truck"class="br0">) class="kw1">returnclass="sy0">;
class="br0">}
 
class="co1">// logs "car", "truck", "bus"
arr.class="me1">forEachclass="br0">(class="br0">(vehicleclass="sy0">, iclass="br0">) class="sy0">=> class="br0">{
    console.class="me1">logclass="br0">(vehicleclass="br0">)class="sy0">;
    class="kw1">if class="br0">(vehicle class="sy0">=== class="st0">"truck"class="br0">) class="kw1">returnclass="sy0">;
class="br0">}class="br0">)class="sy0">;

Avec forEach(), l'instruction return revient de la fonction anonyme. La boucle est créée par la portée externe, elle continue donc à appeler à nouveau la fonction pour les éléments restants du tableau.

Tableaux de mappage

map() est l'une des méthodes de tableau les plus puissantes de JavaScript. Il accepte une fonction qui sera appelée pour chaque élément du tableau. Un nouveau tableau contenant les résultats de chaque appel de fonction est alors retourné.

class="kw1">const arr class="sy0">= class="br0">[class="nu0">2class="sy0">, class="nu0">4class="sy0">, class="nu0">8class="sy0">, class="nu0">16class="br0">]class="sy0">;
class="kw1">const mapped class="sy0">= arr.class="me1">mapclass="br0">(v class="sy0">=> class="br0">(v class="sy0">* vclass="br0">)class="br0">)class="sy0">;
class="co1">// mapped contains 4, 16, 64, 256

Votre fonction de rappel reçoit en fait trois arguments : la valeur à la position actuelle, l'index de la position actuelle et le tableau auquel map() est appelé.

class="br0">[class="nu0">1class="sy0">, class="nu0">2class="sy0">, class="nu0">3class="br0">].class="me1">mapclass="br0">(class="br0">(valueclass="sy0">, indexclass="sy0">, arrclass="br0">) class="sy0">=> class="br0">(value class="sy0">* valueclass="br0">)class="br0">)class="sy0">;

Le mappage est utile lorsque vous devez itérer sur un tableau, accéder à chaque valeur, puis dériver une nouvelle valeur de cette itération. La technique est également utile lorsque vous travaillez avec des frameworks d'interface utilisateur tels que React, où vous pouvez mapper des données pour les transformer en un nœud DOM :

class="kw1">const MyComponent class="sy0">= users class="sy0">=> class="br0">(
    users.class="me1">mapclass="br0">(user class="sy0">=> class="br0">(
        class="sy0"><divclass="sy0">>
            class="sy0"><pclass="sy0">>class="br0">{user.class="me1">Nameclass="br0">}class="sy0"></pclass="sy0">>
            class="sy0"><pclass="sy0">>class="br0">{user.class="me1">Emailclass="br0">}class="sy0"></pclass="sy0">>
        class="sy0"></divclass="sy0">>
    class="br0">)class="br0">)
class="br0">)class="sy0">;

Envisagez d'utiliser map() chaque fois que vous devez effectuer une action sur chaque élément d'un tableau, même si vous n'êtes pas intéressé par la valeur de retour de votre rappel.

Tableaux de filtrage

Une autre tâche courante consiste à filtrer un tableau pour exclure certains éléments. Vous pourriez être enclin à créer un nouveau tableau vide et à utiliser une boucle for pour tester des éléments dans votre original. Une approche plus simple consisterait à utiliser la méthode intégrée filter() de JavaScript.

Comme map(), filter() prend une fonction de rappel qui est invoquée à chaque itération. La valeur actuelle, l'index et le tableau sont passés au rappel en tant que paramètres. Le rappel doit renvoyer soit true soit false pour indiquer si la valeur actuelle doit être incluse dans le nouveau tableau filtré.

class="kw1">const filtered class="sy0">= class="br0">[class="nu0">1class="sy0">, class="nu0">2class="sy0">, class="nu0">3class="br0">].class="me1">filterclass="br0">(v class="sy0">=> class="br0">(v class="sy0">% class="nu0">2 class="sy0">=== class="nu0">0class="br0">)class="br0">)class="sy0">;
class="co1">// filtered is [2]

L'utilisation de filter() rend le filtrage rapide et concis. Vous n'avez pas besoin de créer une boucle for et de configurer vous-même le nouveau tableau. La méthode renvoie toujours un nouveau tableau et ne modifie pas l'original.

Méthodes utilitaires

Voici quelques autres méthodes qui pourraient vous être utiles.

  • Joindre deux tableaux : utilisez la méthode concat() pour joindre deux tableaux. Il renverra un tableau nouveau, avec son argument ajouté au tableau sur lequel il a été appelé. [\a, \b\, \c\].concat([\x\, \y\, \z\]) renvoie [\a\, \b\, \c\, \x\, \y\, \z\].
  • Conversion d'un tableau en chaîne : utilisez la méthode join() pour combiner les valeurs d'un tableau en une seule chaîne. Vous pouvez spécifier le séparateur comme premier paramètre de la fonction. [\a\, \b\, \c\].join(\ - \) renverra a - b - c.
  • Obtenir des index de valeur : si vous savez qu'une valeur existe dans un tableau, vous pouvez obtenir son index numérique avec indexOf(). Si la valeur existe plusieurs fois dans le tableau, l'index de la première occurrence est renvoyé. Vous pouvez obtenir l'index de la dernière occurrence en utilisant lastIndexOf().
  • Déterminer si une valeur existe dans un tableau : la méthode includes() accepte une valeur et vous permet de vérifier si elle existe dans un tableau. Il renvoie un booléen indiquant si la valeur a été trouvée. [\a\, \b\, \c\].includes(\a\) renverrait true.
  • Création d'un tableau vide avec une longueur prédéterminée : vous pouvez utiliser le constructeur Array pour initialiser un tableau vide avec une longueur donnée. const myArr=new Array(10) créerait un tableau avec 10 index (0-9), chacun avec undefined comme valeur.
  • Tester si tous les éléments d'un tableau correspondent à une condition : parfois, vous souhaiterez peut-être vérifier si chaque élément d'un tableau répond à une condition. La méthode every() vous permet de faire cela. Il accepte un rappel qui fonctionne de manière similaire à la méthode filter(). La méthode ne renverra true que si chaque invocation du rappel renvoie true. Si vous voulez savoir si seulement certains des éléments du tableau correspondent, utilisez plutôt la méthode some().

Conclusion

Les tableaux JavaScript sont une structure de données polyvalente avec des méthodes intégrées utiles. Comparé à d'autres langages, travailler avec des tableaux en JavaScript est simple et concis. Vous pouvez rapidement itérer, mapper et filtrer les valeurs à l'aide de fonctions de flèches intégrées qui maintiennent votre code propre et lisible.

Articles connexes:


Tous les droits sont réservés. © Linux-Console.net • 2019-2026