Recherchez l' index
élément de tableau que vous souhaitez supprimer à l'aide de indexOf
, puis supprimez cet index avec splice
.
La méthode splice () modifie le contenu d'un tableau en supprimant les éléments existants et / ou en ajoutant de nouveaux éléments.
const array = [2, 5, 9];
console.log(array);
const index = array.indexOf(5);
if (index > -1) {
array.splice(index, 1);
}
// array = [2, 9]
console.log(array);
Le deuxième paramètre de splice
est le nombre d'éléments à supprimer. Notez que splice
modifie le tableau en place et renvoie un nouveau tableau contenant les éléments qui ont été supprimés.
Pour des raisons d'exhaustivité, voici les fonctions. Première fonction supprime uniquement occurrence unique ( à savoir la suppression de la première partie 5
de [2,5,9,1,5,8,5]
), tandis que la deuxième fonction supprime toutes les occurrences:
function removeItemOnce(arr, value) {
var index = arr.indexOf(value);
if (index > -1) {
arr.splice(index, 1);
}
return arr;
}
function removeItemAll(arr, value) {
var i = 0;
while (i < arr.length) {
if(arr[i] === value) {
arr.splice(i, 1);
} else {
++i;
}
}
return arr;
}
array.indexOf(testValue)
sur un tableau vide sera -1, et si vous testez cela, alors aucune épissure. Peut-être que la réponse a changé depuis.Je ne sais pas comment tu t'attends à te
array.remove(int)
comporter. Il y a trois possibilités auxquelles je peux penser que vous voudrez peut-être.Pour supprimer un élément d'un tableau à un index
i
:Si vous souhaitez supprimer tous les éléments avec valeur
number
du tableau:Si vous voulez simplement que l'élément de l'index
i
n'existe plus, mais que vous ne voulez pas que les index des autres éléments changent:la source
delete
n'est pas la bonne façon de supprimer un élément d'un tableau!array.hasOwnProperty(i)
retournefalse
et que l'élément à cette position revienneundefined
. Mais je dois admettre que ce n'est pas une chose très courante à vouloir faire.delete
ne mettra pas à jour la longueur du tableau ni n'effacera vraiment l'élément, le remplacera uniquement par la valeur spécialeundefined
.undefined
: il supprime à la fois l'index et la valeur du tableau, c'est-à-dire aprèsdelete array[0]
,"0" in array
retournera false.delete
faire à comprendre pourquoi cela ne fonctionne pas comme prévu.Édité en octobre 2016
Dans cet exemple de code, j'utilise la fonction "array.filter (...)" pour supprimer les éléments indésirables d'un tableau. Cette fonction ne modifie pas le tableau d'origine et en crée un nouveau. Si votre navigateur ne prend pas en charge cette fonction (par exemple, Internet Explorer avant la version 9 ou Firefox avant la version 1.5), pensez à utiliser le filtre polyfill de Mozilla .
Suppression d'un élément (code ECMA-262 Edition 5 aka oldstyle JavaScript)
Suppression d'un élément (code ECMAScript 6)
IMPORTANT La syntaxe de la fonction de flèche ECMAScript 6 "() => {}" n'est pas du tout prise en charge dans Internet Explorer, Chrome avant la version 45, Firefox avant la version 22 et Safari avant la version 10. Pour utiliser la syntaxe ECMAScript 6 dans les anciens navigateurs, vous pouvez utiliser BabelJS .
Suppression de plusieurs éléments (code ECMAScript 7)
Un avantage supplémentaire de cette méthode est que vous pouvez supprimer plusieurs éléments
La fonction "array.includes (...)" n'est pas du tout prise en charge dans Internet Explorer, Chrome avant la version 47, Firefox avant la version 43, Safari avant la version 9 et Edge avant la version 14 donc voici polyfill de Mozilla .
Suppression de plusieurs éléments (à l'avenir, peut-être)
Si la proposition "This-Binding Syntax" est acceptée, vous pourrez le faire:
Essayez-le vous-même dans BabelJS :)
Référence
la source
filter
doit être beaucoup plus lent pour un grand tableau?filter
peut avoir des performances plus lentes mais c'est un code plus sûr et meilleur. En outre, vous pouvez filtrer par index en spécifiant un deuxième argument dans le lambda:arr.filter((x,i)=>i!==2)
Cela dépend si vous souhaitez conserver un emplacement vide ou non.
Si vous voulez un emplacement vide, la suppression est très bien:
Si vous ne le faites pas, vous devez utiliser la méthode d' épissage :
Et si vous avez besoin de la valeur de cet élément, vous pouvez simplement stocker l'élément du tableau retourné:
Dans le cas où vous souhaitez le faire dans un certain ordre, vous pouvez utiliser
array.pop()
pour le dernier ouarray.shift()
pour le premier (et les deux renvoient également la valeur de l'article).Et si vous ne connaissez pas l'index de l'élément, vous pouvez l'utiliser
array.indexOf(item)
pour l'obtenir (dans unif()
pour obtenir un élément ou dans unwhile()
pour les obtenir tous).array.indexOf(item)
renvoie l'index ou -1 s'il n'est pas trouvé.la source
delete
n'est pas la bonne façon de supprimer un élément d'un tableau !!array[index] = undefined;
. L'utilisationdelete
détruira l'optimisation.Un ami avait des problèmes Internet Explorer 8 et m'a montré ce qu'il avait fait. Je lui ai dit que c'était mal, et il m'a dit qu'il avait obtenu la réponse ici. La première réponse actuelle ne fonctionnera pas dans tous les navigateurs (Internet Explorer 8 par exemple) et supprimera uniquement la première occurrence de l'élément.
Supprimer TOUTES les instances d'un tableau
Il parcourt le tableau en arrière (puisque les indices et la longueur changeront à mesure que les éléments sont supprimés) et supprime l'élément s'il est trouvé. Cela fonctionne dans tous les navigateurs.
la source
i = arr.length -1
ou lai--
rend identique à l'index maxarr.length
est juste une valeur initiale pouri
.i--
sera toujours véridique (et réduira de 1 à chaque boucle) jusqu'à ce qu'il soit égal0
(une valeur fausse) et la boucle s'arrêtera alors.arr.filter(function (el) { return el !== item })
, en évitant d'avoir à muter le tableau plusieurs fois. Cela consomme un peu plus de mémoire, mais fonctionne beaucoup plus efficacement, car il y a moins de travail à faire.Il existe deux approches principales:
épissure () :
anArray.splice(index, 1);
supprimer :
delete anArray[index];
Soyez prudent lorsque vous utilisez la suppression pour un tableau. C'est bon pour supprimer les attributs des objets, mais pas si bon pour les tableaux. Il vaut mieux utiliser
splice
pour les tableaux.Gardez à l'esprit que lorsque vous utilisez
delete
un tableau, vous pouvez obtenir des résultats erronésanArray.length
. En d'autres termes,delete
supprimerait l'élément, mais ne mettrait pas à jour la valeur de la propriété length.Vous pouvez également vous attendre à avoir des trous dans les numéros d'index après avoir utilisé la suppression, par exemple, vous pourriez vous retrouver avec les index 1, 3, 4, 8, 9 et 11 et la longueur comme avant l'utilisation de la suppression. Dans ce cas, toutes les
for
boucles indexées se bloqueraient, car les index ne sont plus séquentiels.Si vous êtes obligé d'utiliser
delete
pour une raison quelconque, vous devez utiliser desfor each
boucles lorsque vous devez parcourir des tableaux. En fait, évitez toujours d'utiliser desfor
boucles indexées , si possible. De cette façon, le code serait plus robuste et moins sujet aux problèmes d'index.la source
la source
for in
sur un tableau, vous avez déjà un problème.for in
sur des tableaux, vous avez déjà de plus gros problèmes.Il n'est pas nécessaire d'utiliser
indexOf
ousplice
. Cependant, il fonctionne mieux si vous ne souhaitez supprimer qu'une seule occurrence d'un élément.Rechercher et déplacer (déplacer):
Utilisation
indexOf
etsplice
(index de):Utiliser uniquement
splice
(épissure):Temps d'exécution sur nodejs pour tableau avec 1000 éléments (moyenne sur 10000 exécutions):
indexof est environ 10 fois plus lent que déplacer . Même s'il est amélioré en supprimant l'appel à
indexOf
in splice, il est bien pire que déplacer .la source
Cela fournit un prédicat au lieu d'une valeur.
REMARQUE: il mettra à jour le tableau donné et renverra les lignes affectées.
Usage
Définition
la source
Vous pouvez le faire facilement avec la méthode de filtrage :
Cela supprime tous les éléments du tableau et fonctionne également plus rapidement qu'une combinaison de
slice
etindexOf
.la source
John Resig a publié une bonne mise en œuvre :
Si vous ne souhaitez pas étendre un objet global, vous pouvez faire quelque chose comme ceci, à la place:
Mais la raison principale pour laquelle je poste ceci est de mettre en garde les utilisateurs contre l'implémentation alternative suggérée dans les commentaires sur cette page (14 décembre 2007):
Cela semble bien fonctionner au début, mais grâce à un processus douloureux, j'ai découvert qu'il échouait en essayant de supprimer l'avant-dernier élément d'un tableau. Par exemple, si vous avez un tableau à 10 éléments et que vous essayez de supprimer le 9e élément avec ceci:
Vous vous retrouvez avec un tableau à 8 éléments. Je ne sais pas pourquoi, mais j'ai confirmé que l'implémentation d'origine de John n'a pas ce problème.
la source
Object.prototype.hasOwnProperty
toujours utiliser ¬¬Underscore.js peut être utilisé pour résoudre des problèmes avec plusieurs navigateurs. Il utilise des méthodes de navigateur intégrées si elles sont présentes. S'ils sont absents comme dans le cas des anciennes versions d'Internet Explorer, il utilise ses propres méthodes personnalisées.
Un exemple simple pour supprimer des éléments du tableau (du site Web):
la source
Vous pouvez utiliser ES6. Par exemple, pour supprimer la valeur «3» dans ce cas:
Production :
la source
Si vous souhaitez supprimer un nouveau tableau avec les positions supprimées, vous pouvez toujours supprimer l'élément spécifique et filtrer le tableau. Il pourrait avoir besoin d'une extension de l' objet tableau pour les navigateurs qui n'implémentent pas la méthode de filtrage, mais à long terme, c'est plus facile puisque tout ce que vous faites est le suivant:
Il devrait s'afficher
[1, 2, 3, 4, 6]
.la source
Consultez ce code. Il fonctionne dans tous les principaux navigateurs .
Appelez cette fonction
la source
for in
boucle et le fait que le script ait pu s'arrêter plus tôt, en renvoyant directement le résultat de la boucle. Les votes positifs sont raisonnables;)for( i = 0; i < arr.length; i++ )
serait une meilleure approche car il préserve les indices exacts par rapport à l'ordre dans lequel le navigateur décide de stocker les éléments (avecfor in
). Cela vous permet également d'obtenir l'index du tableau d'une valeur si vous en avez besoin.Vous pouvez utiliser lodash _.pull (tableau muté ), _.pullAt (tableau muté ) ou _ . Sans (ne mute pas le tableau),
la source
ES6 & sans mutation: (octobre 2016)
la source
filter
alors?array.filter((_, index) => index !== removedIndex);
.La suppression d'un élément / chaîne particulier d'un tableau peut être effectuée dans une seule ligne:
où:
theArray : le tableau dont vous souhaitez supprimer quelque chose de particulier
stringToRemoveFromArray : la chaîne que vous souhaitez supprimer et 1 est la quantité d'éléments que vous souhaitez supprimer.
REMARQUE : Si "stringToRemoveFromArray" ne se trouve pas dans votre tableau, cela supprimera le dernier élément du tableau.
C'est toujours une bonne pratique de vérifier si l'élément existe dans votre tableau avant de le supprimer.
Si vous avez accès à des versions plus récentes d'Ecmascript sur les ordinateurs de votre client (AVERTISSEMENT, peut ne pas fonctionner sur les stations plus anciennes):
Où «3» est la valeur que vous souhaitez supprimer du tableau. Le tableau deviendrait alors:
['1','2','4','5','6']
la source
"stringToRemoveFromArray"
ne se trouve pas dans votre tableau, cela supprimera le dernier élément du tableau.Voici quelques façons de supprimer un élément d'un tableau à l'aide de JavaScript .
Toutes les méthodes décrites ne modifient pas le tableau d'origine et en créent plutôt un nouveau.
Si vous connaissez l'index d'un article
Supposons que vous ayez un tableau et que vous souhaitiez supprimer un élément en position
i
.Une méthode consiste à utiliser
slice()
:slice()
crée un nouveau tableau avec les index qu'il reçoit. Nous créons simplement un nouveau tableau, du début à l'index que nous voulons supprimer, et concaténons un autre tableau de la première position suivant celle que nous avons supprimée à la fin du tableau.Si vous connaissez la valeur
Dans ce cas, une bonne option est d'utiliser
filter()
, qui offre une approche plus déclarative :Cela utilise les fonctions fléchées ES6. Vous pouvez utiliser les fonctions traditionnelles pour prendre en charge les anciens navigateurs:
ou vous pouvez utiliser Babel et transpiler le code ES6 vers ES5 pour le rendre plus digeste pour les anciens navigateurs, tout en écrivant du JavaScript moderne dans votre code.
Suppression de plusieurs éléments
Et si au lieu d'un seul élément, vous souhaitez supprimer plusieurs éléments?
Trouvons la solution la plus simple.
Par index
Vous pouvez simplement créer une fonction et supprimer des éléments en série:
Par valeur
Vous pouvez rechercher une inclusion dans la fonction de rappel:
Évitez de muter la matrice d'origine
splice()
(à ne pas confondre avecslice()
) mute le tableau d'origine et doit être évité.(initialement publié sur https://flaviocopes.com/how-to-remove-item-from-array/ )
la source
OK, par exemple, vous avez le tableau ci-dessous:
Et nous voulons supprimer le numéro 4. Vous pouvez simplement utiliser le code ci-dessous:
Si vous réutilisez cette fonction, vous écrivez une fonction réutilisable qui sera attachée à la fonction de tableau natif comme ci-dessous:
Mais que diriez-vous si vous avez le tableau ci-dessous à la place avec quelques [5] s dans le tableau?
Nous avons besoin d'une boucle pour les vérifier tous, mais un moyen plus simple et plus efficace utilise les fonctions JavaScript intégrées, nous écrivons donc une fonction qui utilise un filtre comme ci-dessous à la place:
Il existe également des bibliothèques tierces qui vous aident à le faire, comme Lodash ou Underscore. Pour plus d'informations, consultez lodash _.pull, _.pullAt ou _.without.
la source
this.splice(num.indexOf(x), 1);
=>this.splice(this.indexOf(x), 1);
Je suis assez nouveau sur JavaScript et j'avais besoin de cette fonctionnalité. J'ai simplement écrit ceci:
Puis quand je veux l'utiliser:
Sortie - Comme prévu. ["item1", "item1"]
Vous pouvez avoir des besoins différents des miens, vous pouvez donc facilement les modifier pour les adapter. J'espère que ça aidera quelqu'un.
la source
Si vous avez des objets complexes dans le tableau, vous pouvez utiliser des filtres? Dans les situations où $ .inArray ou array.splice n'est pas aussi facile à utiliser. Surtout si les objets sont peut-être peu profonds dans le tableau.
Par exemple, si vous avez un objet avec un champ Id et que vous souhaitez que l'objet soit supprimé d'un tableau:
la source
Je veux répondre sur la base d' ECMAScript 6 . Supposons que vous ayez un tableau comme ci-dessous:
Si vous souhaitez supprimer à un index spécial comme
2
, écrivez le code ci-dessous:Mais si vous souhaitez supprimer un élément spécial comme
3
et que vous ne connaissez pas son index, faites comme ci-dessous:Astuce : veuillez utiliser une fonction de flèche pour le rappel du filtre, sauf si vous obtiendrez un tableau vide.
la source
Mise à jour: cette méthode est recommandée uniquement si vous ne pouvez pas utiliser ECMAScript 2015 (anciennement ES6). Si vous pouvez l'utiliser, d'autres réponses ici fournissent des implémentations beaucoup plus soignées.
Cet élément résoudra votre problème et supprimera également toutes les occurrences de l'argument au lieu de seulement 1 (ou une valeur spécifiée).
Usage:
la source
Performance
Aujourd'hui (2019-12-09), je réalise des tests de performances sur macOS v10.13.6 (High Sierra) pour les solutions choisies. Je montre
delete
(A), mais je ne l'utilise pas en comparaison avec d'autres méthodes, car cela laisse un espace vide dans le tableau.Les conclusions
array.splice
(C) (sauf Safari pour les petits tableaux où il a la deuxième fois)array.slice+splice
(H) est la solution immuable la plus rapide pour Firefox et Safari;Array.from
(B) est le plus rapide dans ChromeDétails
Dans les tests, je supprime l'élément central du tableau de différentes manières. Les solutions A, C sont en place. Les B, D, E, F, G, H solutions sont immuables.
Résultats pour tableau avec 10 éléments
Dans Chrome, le
array.splice
(C) est la solution en place la plus rapide. Learray.filter
(D) est la solution immuable la plus rapide. Le plus lent estarray.slice
(F). Vous pouvez effectuer le test sur votre machine ici .Résultats pour tableau avec 1.000.000 éléments
Dans Chrome, le
array.splice
(C) est la solution en place la plus rapide (ledelete
(C) est similaire rapidement - mais il a laissé un emplacement vide dans le tableau (il n'effectue donc pas de `` suppression complète '')). Learray.slice-splice
(H) est la solution immuable la plus rapide. Le plus lent estarray.filter
(D et E). Vous pouvez effectuer le test sur votre machine ici .Afficher l'extrait de code
Comparaison pour les navigateurs: Chrome v78.0.0, Safari v13.0.4 et Firefox v71.0.0
la source
Vous ne devez jamais muter votre tableau. Comme c'est contre le modèle de programmation fonctionnelle. Vous pouvez créer un nouveau tableau sans référencer le tableau dont vous souhaitez modifier les données à l'aide de la méthode ECMAScript 6
filter
;Supposons que vous souhaitiez supprimer
5
du tableau, vous pouvez simplement le faire comme ceci:Cela vous donnera un nouveau tableau sans la valeur que vous vouliez supprimer. Le résultat sera donc:
Pour une meilleure compréhension, vous pouvez lire la documentation MDN sur Array.filter .
la source
Une approche plus moderne, ECMAScript 2015 (anciennement Harmony ou ES 6). Donné:
Alors:
Rendement:
Vous pouvez utiliser Babel et un service polyfill pour vous assurer que cela est bien pris en charge sur tous les navigateurs.
la source
.filter
renvoie un nouveau tableau, ce qui n'est pas exactement la même chose que la suppression de l'élément du même tableau. L'avantage de cette approche est que vous pouvez enchaîner des méthodes de tableau. par exemple:[1,2,3].filter(n => n%2).map(n => n*n) === [ 1, 9 ]
splice
ouslice
.items= items.filter(x=>x!=3)
. En outre, l'OP n'a indiqué aucune exigence pour un grand ensemble de données.Vous avez 1 à 9 dans le tableau et vous souhaitez supprimer 5. Utilisez le code ci-dessous:
Si vous souhaitez plusieurs valeurs. Exemple: - 1,7,8
Si vous souhaitez supprimer une valeur de tableau dans un tableau. Exemple: [3,4,5]
Comprend le navigateur pris en charge est un lien .
la source
Je sais qu'il y a déjà beaucoup de réponses, mais beaucoup d'entre elles semblent trop compliquer le problème. Voici un moyen simple et récursif de supprimer toutes les instances d'une clé - s'appelle soi jusqu'à ce que l'index ne soit pas trouvé. Oui, cela ne fonctionne que dans les navigateurs
indexOf
, mais c'est simple et peut être facilement rempli.Fonction autonome
Méthode prototype
la source
Vous pouvez faire une boucle arrière pour vous assurer de ne pas visser les index, s'il y a plusieurs instances de l'élément.
Démo en direct
la source