Les tableaux JavaScript vous permettent de regrouper des valeurs et de les parcourir. Vous pouvez ajouter et supprimer des éléments de tableau de différentes manières. Malheureusement, il n’y a pas de tableau simple.supprimer la méthode.
alors, comment supprimer un élément d’un tableau JavaScript?,
Au lieu d’une méthode delete, le tableau JavaScript a une variété de façons de nettoyer les valeurs du tableau.
Vous pouvez supprimer des éléments de la fin d’un tableau en utilisant pop, du début en utilisant shift, ou du milieu en utilisant splice. La méthode JavaScript Array filter pour créer un nouveau tableau avec les éléments souhaités, un moyen plus avancé de supprimer les éléments indésirables.,Supprimer licitement des éléments de tableau à l’aide de L’opérateur Delete
Il existe différentes méthodes et techniques que vous pouvez utiliser pour supprimer des éléments des tableaux JavaScript:
- pop – supprime à la fin d’un tableau
- shift – supprime au début d’un tableau
- splice – supprime à partir D’un tableau
vous apprendrez également d’autres façons de supprimer des éléments d’un tableau qui ne sont peut – être pas si évidents, comme avec lodash.,
suppression D’éléments de la fin d’un tableau JavaScript
Les éléments du tableau JavaScript peuvent être supprimés de la fin d’un tableau en définissant la propriété length sur une valeur inférieure à la valeur actuelle. Tout élément dont l’index est supérieur ou égal à la nouvelle longueur sera supprimé.
var ar = ; ar.length = 4; // set length to remove elements console.log( ar ); // la méthode pop supprime le dernier élément du tableau, renvoie cet élément et met à jour la propriété length. La méthode pop modifie le tableau sur lequel elle est invoquée, Cela signifie que contrairement à l’utilisation de supprimer le dernier élément est complètement supprimé et la longueur du tableau réduit.,
var ar = ; ar.pop(); // returns 6 console.log( ar ); // supprimer les Éléments de Début d’un Tableau JavaScript
Comment supprimer le premier élément d’un tableau JavaScript?
la méthode shift fonctionne un peu comme la méthode pop sauf qu’elle supprime le premier élément d’un tableau JavaScript au lieu du dernier.
Il n’y a pas de paramètres car la méthode shift n’a supprimé que le premier élément du tableau. Lorsque l’élément est supprimé, les éléments restants sont décalés vers le bas.,
var ar = ; ar.shift(); // returns "zero" console.log( ar ); // la méthode shift renvoie l’élément qui a été supprimé, met à jour les index des éléments restants et met à jour la propriété length. Il modifie le tableau sur lequel il est invoqué.
S’il n’y a pas d’éléments, ou si la longueur du tableau est 0, la méthode renvoie undefined.
utiliser Splice pour supprimer des éléments de tableau en JavaScript
la méthode splice peut être utilisée pour ajouter ou supprimer des éléments d’un tableau. Le premier argument spécifie l’emplacement auquel commencer à ajouter ou à supprimer des éléments. Le deuxième argument spécifie le nombre d’éléments à supprimer., Le troisième argument et les suivants sont facultatifs; ils spécifient les éléments à ajouter au tableau.
ici, nous utilisons la méthode splice pour supprimer deux éléments à partir de la position trois (index basé sur zéro):
var arr = ; var removed = arr.splice(2,2); Un tableau contenant les éléments supprimés est renvoyé par la méthode splice. Vous pouvez voir le tableau supprimé contient et le tableau d’origine contient les valeurs restantes.
la jonction de La méthode peut également être utilisée pour supprimer une série d’éléments d’un tableau.,
var list = ; list.splice(0, 2); // Starting at index position 0, remove two elements and retains .suppression D’éléments de tableau par valeur en utilisant Splice
Si vous connaissez la valeur que vous souhaitez supprimer d’un tableau, vous pouvez utiliser la méthode splice. Vous devez d’abord identifier l’index de l’élément cible. Vous utilisez ensuite l’index comme élément de départ et supprimez un seul élément.
var arr = ; for( var i = 0; i < arr.length; i++){ if ( arr === 5) { arr.splice(i, 1); } } //=> Ceci est un exemple simple où les éléments sont des entiers. Si vous avez un tableau d’objets, vous auriez besoin d’une routine plus sophistiquée.
Cela fonctionne si vous ne voulez supprimer un seul élément., Si vous souhaitez supprimer plusieurs éléments qui correspondent à vos critères il y a un pépin.
lorsque les éléments sont supprimés du tableau, l’index incrémente toujours et l’élément suivant après que votre valeur correspondante est ignorée.
la solution simple consiste à modifier l’exemple ci-dessus pour décrémenter la variable d’index afin qu’elle ne saute pas l’élément suivant dans le tableau.
var arr = ; for( var i = 0; i < arr.length; i++){ if ( arr === 5) { arr.splice(i, 1); i--; } } //=> dans l’exemple modifié, j’ai ajouté 2 5 valeurs supplémentaires au tableau. J’ai également ajouté « i;; » après l’appel d’épissure.
maintenant, lorsque vous exécutez la boucle, il supprimera tous les éléments correspondants.,
Merci à Kristian Sletten d’avoir signalé le problème avec la boucle sautant l’élément suivant.
en utilisant la méthode Array filter pour supprimer des éléments par valeur
contrairement à la méthode splice, filter crée un nouveau tableau. filter () ne mute pas le tableau sur lequel il est appelé, mais renvoie un nouveau tableau.
filter() a un seul paramètre, une méthode de rappel. Le rappel est déclenché lorsque la méthode filter parcourt les éléments du tableau. Il transmettra trois valeurs au rappel: la valeur ou l’élément actuel, l’index du tableau actuel et le tableau complet.,
la méthode de rappel doit renvoyer true ou false. Il est de votre responsabilité de tester la valeur (élément) pour voir si elle répond à vos critères. Si c’est le cas, vous pouvez retourner true. Les éléments qui renvoient true sont ajoutés au nouveau tableau filtré.
var array = ; var filtered = array.filter(function(value, index, arr){ return value > 5; }); //filtered => //array => Vous devriez noter un nouveau tableau contenant les valeurs correspondantes est retournée. Le tableau d’origine est intacte. Je trouve cela utile car je veux souvent conserver une source de données d’origine, mais récupérer des sous-ensembles basés sur différents ensembles logiques.,
la méthode Lodash Array Remove
parfois, les bibliothèques utilitaires sont le meilleur moyen de résoudre des problèmes plus complexes. Lodash fournit un ensemble riche de méthodes de manipulation de tableau, l’une étant remove.
la méthode lodash remove fonctionne un peu comme la méthode array filter, mais en quelque sorte à l’envers. Il n’enregistre pas les valeurs du tableau d’origine, mais supprime les éléments correspondants. Il renvoie les éléments correspondants comme un nouveau tableau.
var array = ;var evens = _.remove(array, function(n) { return n % 2 === 0;});console.log(array);// => console.log(evens);// => faire une méthode de suppression
Comme je l’ai mentionné auparavant, il n’y a pas de tableau natif.supprimer la méthode., Le lodash lodash méthode ne résout ce problème, mais vous ne voudrez peut-être pas toujours utiliser Lodash. Cela ne signifie pas que vous ne pouvez pas créer une méthode utilitaire. John Resig nous a donné un modèle à suivre, mais il a étendu le prototype du tableau, ce qui est une mauvaise idée.
Au Lieu de cela, j’ai créé une méthode Array remove utility qui peut être ajoutée à une bibliothèque d’assistance ou d’utilitaire. Comme la méthode lodash remove, le premier paramètre est le tableau cible. Il utilise la Matrice.filtre pour renvoyer des éléments ne correspondant pas à une valeur.
cette méthode est simple, elle suppose des valeurs simples comme des nombres ou des chaînes., Vous pouvez modifier cette méthode pour utiliser une méthode customcomparison, mais je pense qu’il serait plus facile d’utiliser directement la méthode filter.
supprimer explicitement des éléments de tableau à l’aide de L’opérateur Delete
Vous pouvez supprimer des éléments de tableau spécifiques à l’aide de l’opérateur delete:
var ar = ; delete ar; // delete element with index 4 console.log( ar ); // alert( ar ); // 1,2,3,4,,6L’utilisation de l’opérateur delete n’affecte pas la propriété length. Cela n’affecte pas non plus les index des éléments suivants. Le tableau devient clairsemé, ce qui est une façon élégante de dire que l’élément supprimé n’est pas supprimé mais devient indéfini. Comparez l’utilisation de delete avec la méthode d’épissure décrite ci-dessous.,
l’opérateur delete est conçu pour supprimer les propriétés des objets JavaScript, qui sont des tableaux.
la raison pour laquelle l’élément n’est pas réellement supprimé du tableau est que l’opérateur delete vise plus à libérer de la mémoire qu’à supprimer un élément. La mémoire est libérée lorsqu’il n’y a plus de références à la valeur.
Effacer ou Réinitialiser un Tableau JavaScript
Que faire si vous souhaitez vider un tableau et simplement le jeter tous ses éléments?
Il existe quelques techniques que vous pouvez utiliser pour créer un tableau vide ou un nouveau tableau.,
la technique la plus simple et la plus rapide consiste à définir une variable de tableau sur un tableau vide:
var ar = ;//do stuffar = ;//a new, empty array!le problème que cela peut créer est lorsque vous avez des références à la variable. Les références à cette variable ne changeront pas, elles contiendront toujours les valeurs du tableau d’origine. Cela peut bien sûr créer un bug🐛.
Voici un exemple simplifié de ce scénario:
var arr1 = ;var arr2 = arr1; // Reference arr1 by another variable arr1 = ; console.log(arr2); // Output Une astuce simple pour effacer un tableau consiste à définir sa propriété length sur 0.,
var ar = ;console.log(ar); // Output ar.length = 0;console.log(ar); // Output Une autre technique non naturelle consiste à utiliser la méthode d’épissure, en passant la longueur du tableau comme 2ème paramètre. Cela renverra une copie des éléments originaux, ce qui peut être pratique pour votre scénario.
var ar = ;console.log(ar); // Output ar.splice(0, ar.length);console.log(ar); // Output Les deux dernières techniques ne créent pas de nouveau tableau, mais modifient les éléments du tableau. Cela signifie que les références doivent également être mises à jour.
Il existe un autre moyen, en utilisant une boucle while. Ça me semble un peu bizarre, mais en même temps ça a l’air chic, donc ça peut impressionner certains amis!,
var ar = ;console.log(ar); // Output while (ar.length) { ar.pop(); }console.log(ar); // Output Ce n’est pas une façon d’effacer un tableau JavaScript, mais cela fonctionne et il est lisible. Certains tests de performance ont également montré que c’était la technique la plus rapide, alors peut-être que c’est mieux que ce que je pensais à l’origine!
résumé
La suppression des éléments du tableau JavaScript est importante pour la gestion de vos données. Il n’y a pas une seule méthode « supprimer » disponible, mais il existe différentes méthodes et techniques que vous pouvez utiliser pour purger les éléments de tableau indésirables.
Cet article a passé en revue ces méthodes et comment elles peuvent être utilisées., Vous avez également vu comment créer une méthode d’aide qui rend la suppression d’éléments d’un tableau un peu plus facile et cohérente.
Merci à Rob Sherwood d’avoir signalé quelques fautes de frappe syntaxiques!