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, busCela 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, truckParfois, 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, truckLe 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, truckPour 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, busSi 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, busIté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, 256Votre 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(\ - \)renverraa - 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 utilisantlastIndexOf(). - 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\)renverraittrue. - Création d'un tableau vide avec une longueur prédéterminée : vous pouvez utiliser le constructeur
Arraypour initialiser un tableau vide avec une longueur donnée.const myArr=new Array(10)créerait un tableau avec 10 index (0-9), chacun avecundefinedcomme 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éthodefilter(). La méthode ne renverratrueque si chaque invocation du rappel renvoietrue. Si vous voulez savoir si seulement certains des éléments du tableau correspondent, utilisez plutôt la méthodesome().
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:
- LFCS #1: Linux でのファイル操作に「sed」コマンドを使用する方法
- Manipuler les fichiers HTML et XML à partir de la ligne de commande
- Comment définir la vitesse de la carte Ethernet sous Linux avec ethtool
- Comment manipuler les tables de partition avec fdisk, cfdisk et sfdisk sous Linux
- 30 commandes pandas pour manipuler des DataFrames
- Comment les données sont-elles manipulées dans Seaborn pour créer les tracés ?
- Comment manipuler des images dans le terminal Linux
- Comment manipuler HTTP avec cURL
- Comment créer et manipuler des archives tar à l'aide de Python
- Comment manipuler les tables de partition gpt avec gdisk et sgdisk sous Linux
- Comment manipuler des feuilles de calcul Excel avec Python et openpyxl
- Comment manipuler les chaînes dans bash
- Comment utiliser Journalctl pour afficher et manipuler les journaux Systemd
- Comment indexer, diviser et manipuler des chaînes en JavaScript
- Les bases de l'utilisation de l'éditeur de flux Sed pour manipuler du texte sous Linux