Dans cet article, nous allons explorer les différentes manières de supprimer un élément d’un tableau en JavaScript. Je vais également vous montrer des opérations mutables et immuables afin que vous sachiez comment votre code affectera vos structures de données et vos références.
Supprimer des éléments des tableaux revient simplement à trouver l’index de l’élément, ou du moins traditionnellement. De nos jours, nous avons d’autres options, telles que la recherche d’éléments dans un tableau par leur valeur., Ce qui signifie qu’il existe maintenant plusieurs approches pour supprimer des éléments.
cette prochaine courte section va plonger dans les index des tableaux et comment ils se présentent, c’est une plongée en profondeur plus agréable – mais si vous recherchez les solutions, faites défiler à droite.
comprendre les index des tableaux
en JavaScript, un tableau est un type particulier d’objet.
Cet objet tableau a plusieurs propriétés différentes, dont certaines sont des propriétés héritées qui existent sur le prototype, et d’autres sont des propriétés que l’objet tableau nous expose lorsque nous « ajoutons” des choses à un tableau.,
🎉 Télécharger gratuitement!
aller au-delà du tableau ForEach. Soyez confiant avec des méthodes plus avancées telles que Reduce, Find, Filter, Every, Some et Map et comprenez parfaitement comment gérer les Structures de données JavaScript.,
- comprendre parfaitement comment gérer les Structures de données JavaScript avec des opérations immuables
- 31 pages de syntaxe de plongée profonde, des exemples réels, des trucs et astuces
- écrire une programmation plus propre et mieux structurée logique dans les 3 heures
en bonus supplémentaire, nous vous enverrons également quelques goodies supplémentaires à travers quelques e-mails supplémentaires.,
Par exemple, lors de la déclaration d’un tableau à l’aide de , ce tableau contient Array.prototype propriétés et des méthodes qui nous permettent d’interagir avec notre tableau. L’intention avec cela était de nous permettre d’effectuer des mutations et des modifications de nos tableaux avec les belles fonctions Utilitaires « intégrées”.
Un utilitaire? Oui, pour l’exemple du Tableau.prototype.forEach () ou Array.prototype.pousser(). Ces deux méthodes sont héritées sur l’objet array. Cela dit, vous savez maintenant comment les tableaux ne sont en fait que des objets – et les objets ont des méthodes et des propriétés.,
l’objet array est spécial, il est différent. C’est toujours un objet, mais la façon dont nous « utilisons” un tableau est d’accéder à des propriétés qui font référence à un élément du tableau, via un index. Un indice? Oui – 0, 1, 2, 3 et au-delà! Les index de tableau commencent à zéro.
avec les tableaux, cela signifie que lorsque nous avons besoin d’accéder à une valeur, quelle qu’elle soit (une primitive / objet), cela se fait via une « recherche d’index”. Demandez l’index de votre tableau et vous récupérerez l’élément situé à cet index.,
Vraiment, vous pouvez penser de chaque indice comme un tiroir dans un classeur. Chaque tirage contient quelque chose d’unique! Les tableaux sont virtuels, donc la taille du classeur dépend de vous!
» pourquoi tu me dis tout ça, Todd?”
Parce que maintenant vous comprenez un tableau, vous savez comment travailler avec un!
sans plus tarder, explorons d’abord comment supprimer un élément d’un tableau en JavaScript par index et valeur.
en utilisant .indexOf() et .,splice () – modèle Mutable
Pour supprimer un élément du tableau via son index, nous allons d’abord introduire la méthode Array.prototype.splice, puis étudier un meilleur modèle en utilisant Array.prototype.filter, une API plus récente.
Splice est une méthode mutable qui vous permet de modifier le contenu d’un tableau. Cela pourrait être la suppression ou le remplacement des « éléments”, car les éléments du tableau sont connus.
prenons un tableau avec quelques valeurs de chaîne:
const drinks = ;Pour supprimer un élément par son indice, nous avons besoin de trouver l’indice.,
Il y a deux scénarios ici, 1) Nous connaissons l’index et 2) nous ne connaissons pas l’index mais connaissons la valeur.
Tout d’abord, si nous connaissons l’index, ci-dessous j’ai utiliséid pour contenir notre exemple d’index, alors il faut simplement passer cet index dans.splice()., Le premier argument de splice accepte la position de l’index pour commencer à supprimer des éléments, et le deuxième argument défini sur 1 représente la fin – ce qui signifie que nous ne voulons supprimer qu’un élément après cet index:
const drinks = ;const id = 2;const removedDrink = drinks.splice(id, 1); Si nous ne connaissons pas Dans ce cas, l’indice nous aimerions supprimer contient une valeur de 'Coffee'.
On pourrait utiliser de Tableau.prototype.,indexOf() pour obtenir le bien… « indice de” l’élément:
const drinks = ;const id = drinks.indexOf('Coffee'); // 2const removedDrink = drinks.splice(id, 1);Tableau.prototype.indexOf () retournera
-1si l’élément n’est pas trouvé, je recommanderais donc une vérification de sécurité autour de cela.
Vous remarquerez que j’ai ajouté const removedDrink. C’est parce que .splice() nous renvoie l’élément supprimé(s):
// console.log(removedDrink);// console.log(drinks);Essayez l’exemple de code pour ce ci-dessous:
Utilisation .,filter () – modèle immuable
alors maintenant nous comprenons un peu plus sur mutable et immuable, découvrons le modèle immuable pour « supprimer” un élément d’un tableau.
la meilleure façon de penser à cela est – au lieu de « supprimer” l’élément, vous « créerez” un nouveau tableau qui n’inclut tout simplement pas cet élément. Nous devons donc le trouver et l’omettre entièrement.
🎉 Télécharger gratuitement!
aller au-delà du tableau ForEach., Soyez confiant avec des méthodes plus avancées telles que Reduce, Find, Filter, Every, Some et Map et comprenez parfaitement comment gérer les Structures de données JavaScript.
- comprendre parfaitement comment gérer les Structures de données JavaScript avec des opérations immuables
- 31 pages de syntaxe de plongée profonde, des exemples réels, des trucs et astuces
- écrire une programmation plus propre et mieux structurée logique dans les 3 heures
en bonus supplémentaire, nous vous enverrons également quelques goodies supplémentaires à travers quelques e-mails supplémentaires.
cette dernière référence à votre tableau ne vivra alors que, et nous ne muterons pas le tableau d’origine. Nous en récupérerons une nouvelle copie à chaque fois avec nos modifications!
Alors, prenons le même tableau pour commencer:
const drinks = ;de plus, que l’objectif de supprimer le 'Coffee'., Tout d’abord, nous pourrions fournir une valeur destinée à représenter une valeur d’index, et la passer dans .filter():
const id = 2;const removedDrink = drinks;const filteredDrinks = drinks.filter((drink, index) => index !== id);Remarque Nous avons inclus (drink, index) comme paramètres de fonction et comparé les index à la constante id – afin que nous puissions trouver exactement celle dont nous avons besoin car les index correspondront!,
j’ai aussi inclus const removedDrink, qui offre un moyen de « demander” une référence de la boisson que vous souhaitez supprimer (de la même manière, vous pouvez utiliser la valeur de retour de .splice()).,
Si vous n’avez pas de référence à l’index, par exemple notre id pointe vers 'Coffee', alors nous pouvons utiliser .indexOf() (veuillez noter l’ajout de la variable idx pour capturer index):
en utilisant un modèle For Loop – traditional
Une version alternative, mais une version très valide qui est vraiment la version impérative de Array.prototype.filter car il se comporte de la même manière – construire un nouveau tableau pour nous et pousser de nouveaux éléments, nous laissant un tableau drinks ,
dans cet exemple, nous supprimons des éléments du tableau initial en renvoyant un nouveau tableau de seulement les éléments que nous voulons, en utilisant drinks nous permet de regarder et de comparer la valeur de l’élément du tableau (comme 'Coffee' en tant que chaîne nous donnerait alors les éléments que nous aimerions. Vous pouvez voir comment en apprenant les principes de la programmation, nous pouvons appliquer différents modèles et avoir une compréhension plus profonde de ce que nous faisons!,
Cette méthode suivante que j’ai incluse pour plus de clarté sur ce qu’il ne faut pas faire lors de la suppression d’éléments d’un tableau en JavaScript, même si elle est parfaitement « valide”
en évitant le mot – clé « supprimer”
quand je vois le mot-clé delete dans Cela dit, si nous apprenons ce que fait le mot-clé delete, alors nous pouvons prendre des décisions plus éclairées.,
Voici un exemple que vous pourriez voir sur le web:
vous remarquerez à partir de la sortieconsole.log ci-dessus qu’il souffle complètement la clé. J’ai inclus ceci pour plus de clarté, c’est toujours génial de voir et de comprendre les effets secondaires de vos opérations.
Ce qui est plus déroutant, c’est que delete n’affecte pas la propriété .length du tableau – voyez comment il est toujours dit length: 4?! Une autre raison d’éviter d’utiliser des delete.,
dans cet esprit – il est temps de conclure notre article sur la façon de supprimer un élément, ou « élément”, d’un tableau en JavaScript avec les bons outils. Nous avons compris différentes approches et paradigmes et avons plus de connaissances à prendre pour demain. Je vous remercie pour la lecture!
Si vous aimez apprendre et avez un désir ardent d’améliorer vos compétences JavaScript? J’enseigne des cours JavaScript ici à Ultimate Courses qui vont prendre vos compétences JavaScript au maximum – je vous garantis que vous ne serez pas déçu!
🎉 Télécharger gratuitement!,
aller au-delà du tableau ForEach. Soyez confiant avec des méthodes plus avancées telles que Reduce, Find, Filter, Every, Some et Map et comprenez parfaitement comment gérer les Structures de données JavaScript.
- comprendre parfaitement comment gérer les Structures de données JavaScript avec des opérations immuables
- 31 pages de syntaxe de plongée profonde, des exemples réels, des trucs et astuces
- écrire une programmation plus propre et mieux structurée logique dans les 3 heures
en bonus supplémentaire, nous vous enverrons également quelques goodies supplémentaires à travers quelques e-mails supplémentaires.
Vérifiez-les et profitez – merci pour la lecture!