Supprimer des éléments de tableau dans JavaScript-supprimer vs splice
Quelle est la différence entre utiliser l'opérateur delete
sur l'élément de réseau par opposition à utiliser la méthode Array.splice
la méthode ?
par exemple:
myArray = ['a', 'b', 'c', 'd'];
delete myArray[1];
// or
myArray.splice (1, 1);
pourquoi même avoir la méthode splice si je peux supprimer des éléments de tableau comme je peux avec des objets?
23 réponses
delete
supprimera la propriété object, mais ne réindexera pas le tableau ou ne mettra pas à jour sa longueur. Il apparaît donc comme s'il n'était pas défini:
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> delete myArray[0]
true
> myArray[0]
undefined
notez qu'il n'est pas en fait défini à la valeur undefined
, la propriété est plutôt retirée du tableau, ce qui le apparaît Non défini. Les outils Chrome dev rendent cette distinction claire en imprimant empty
lors de la journalisation du tableau.
> myArray[0]
undefined
> myArray
[empty, "b", "c", "d"]
myArray.splice(start, deleteCount)
supprime en fait l'élément, réindexe le tableau, et change sa longueur.
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> myArray.splice(0, 2)
["a", "b"]
> myArray
["c", "d"]
tableau.Méthode remove ()
John Resig , créateur de jQuery a créé une méthode très pratique Array.remove
que je l'utilise toujours dans mes projets.
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
et voici quelques exemples de la façon dont il pourrait être utilisé:
// Remove the second item from the array
array.remove(1);
// Remove the second-to-last item from the array
array.remove(-2);
// Remove the second and third items from the array
array.remove(1,2);
// Remove the last and second-to-last items from the array
array.remove(-2,-1);
Parce que seulement supprimer supprime l'objet de l'élément dans le tableau, la longueur du tableau ne change pas. Splice supprime l'objet et raccourcit le tableau.
le code suivant affichera "a"," b"," undefined"," d "
myArray = ['a', 'b', 'c', 'd']; delete myArray[2];
for (var count = 0; count < myArray.length; count++) {
alert(myArray[count]);
}
alors que ceci affichera "a"," b"," d
myArray = ['a', 'b', 'c', 'd']; myArray.splice(2,1);
for (var count = 0; count < myArray.length; count++) {
alert(myArray[count]);
}
je suis tombé sur cette question en essayant de comprendre comment supprimer chaque occurrence d'un élément d'un tableau. Voici une comparaison de splice
et delete
pour enlever chaque 'c'
du tableau items
.
var items = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];
while (items.indexOf('c') !== -1) {
items.splice(items.indexOf('c'), 1);
}
console.log(items); // ["a", "b", "d", "a", "b", "d"]
items = ['a', 'b', 'c', 'd', 'a', 'b', 'c', 'd'];
while (items.indexOf('c') !== -1) {
delete items[items.indexOf('c')];
}
console.log(items); // ["a", "b", undefined, "d", "a", "b", undefined, "d"]
à Partir de Core JavaScript 1.5 Référence > les Opérateurs > Opérateurs Spéciaux > Opérateur delete :
lorsque vous supprimez un élément de tableau, le longueur du tableau n'est pas affectée. Pour exemple, si vous supprimez un[3], [4] est a[4] et a[3] ne sont pas encore définis. Ce tient, même si vous supprimez le dernier élément du tableau (supprimer a[a. length-1]).
splice
fonctionnera avec des indices numériques.
, alors que delete
peut être utilisé contre d'autres types d'indices..
exemple:
delete myArray['text1'];
il est probablement aussi intéressant de mentionner que splice ne fonctionne que sur les tableaux. (On ne peut pas se fier aux propriétés de l'objet pour suivre un ordre cohérent.)
Pour supprimer la paire clé-valeur d'un objet, supprimer est en fait ce que vous voulez:
delete myObj.propName; // , or:
delete myObj["propName"]; // Equivalent.
comme indiqué plusieurs fois ci-dessus, l'utilisation de splice()
semble être un ajustement parfait. Documentation à Mozilla:
la méthode
splice()
modifie le contenu d'un tableau en supprimant des éléments existants et/ou en ajoutant de nouveaux éléments.var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; myFish.splice(2, 0, 'drum'); // myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] myFish.splice(2, 1); // myFish is ["angel", "clown", "mandarin", "sturgeon"]
syntaxe
array.splice(start) array.splice(start, deleteCount) array.splice(start, deleteCount, item1, item2, ...)
paramètres
démarrer
Index auquel commencer à changer le tableau. Si elle est supérieure à la longueur du tableau, l'indice de départ réel sera défini à la longueur du tableau. Si négatif, commencera que beaucoup d'éléments de la fin.
deleteCount
Un entier indiquant le nombre d'anciens éléments du tableau à supprimer. Si deleteCount est 0, aucun élément n'est supprimé. Dans ce cas, vous devez spécifier au moins un nouveau élément. Si deleteCount est plus grand que le nombre d'éléments restants dans le tableau commençant au début, alors tous les éléments passant par la fin du tableau seront supprimés.
si deleteCount est omis, deleteCount sera égal à
(arr.length - start).
item1, item2,...
les éléments à ajouter au tableau, en commençant par l'index de départ. Si vous ne spécifiez aucun élément,
splice()
ne supprimera que les éléments tableau.valeur de retour
Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau d'un élément est renvoyé. Si aucun élément n'est supprimé, un tableau vide est retourné.
[...]
supprimer agit comme un non situation du monde réel, c'est juste supprime de l'élément, mais la longueur du tableau reste le même:
exemple de terminal Nodal:
> var arr = ["a","b","c","d"];
> delete arr[2]
true
> arr
[ 'a', 'b', , 'd', 'e' ]
Voici une fonction pour supprimer un élément d'un tableau par index, en utilisant slice () , il prend l'arr comme premier arg, et l'index du membre que vous voulez supprimer comme second argument. Comme vous pouvez le voir, il supprime en fait le membre du tableau, et réduira la longueur du tableau de 1
function(arr,arrIndex){
return arr.slice(0,arrIndex).concat(arr.slice(arrIndex + 1));
}
ce que la fonction ci-dessus fait est de prendre tous les membres jusqu'à l'index, et tous les membres après l'index , et les concaténate ensemble, et renvoie le résultat.
voici un exemple utilisant la fonction ci-dessus comme un module de noeud, voir le terminal sera utile:
> var arr = ["a","b","c","d"]
> arr
[ 'a', 'b', 'c', 'd' ]
> arr.length
4
> var arrayRemoveIndex = require("./lib/array_remove_index");
> var newArray = arrayRemoveIndex(arr,arr.indexOf('c'))
> newArray
[ 'a', 'b', 'd' ] // c ya later
> newArray.length
3
s'il vous plaît noter que cela ne fonctionnera pas un tableau avec dupes dedans, parce que indexOf ("c") obtiendra juste la première occurance, et seulement splice out et enlever le premier" c " qu'il trouve.
supprimer Vs splice
lorsque vous supprimez un élément d'un tableau
var arr = [1,2,3,4]; delete arr[2]; console.log(arr)
//result
[1, 2, 3:, 4]
lorsque vous splice
var arr = [1,2,3,4]; arr.splice(1,1); console.log(arr)
//result
[1, 3, 4]
dans le cas de supprimer l'élément est supprimé mais l'index reste vide
"alors que dans le cas de splice l'élément est supprimé et l'indice de les éléments de repos sont réduits en conséquence
vous pouvez utiliser quelque chose comme ça
var my_array = [1,2,3,4,5,6];
delete my_array[4];
console.log(my_array.filter(function(a){return typeof a !== 'undefined';}));
doit s'afficher [1, 2, 3, 4, 6]
si vous voulez itérer un grand tableau et supprimer sélectivement des éléments, il serait coûteux d'appeler splice() pour chaque suppression car splice() devrait ré-indexer les éléments suivants à chaque fois. Comme les tableaux sont associatifs en Javascript, il serait plus efficace de supprimer les éléments individuels puis de les indexer à nouveau.
vous pouvez le faire en construisant un nouveau tableau. E. g
function reindexArray( array )
{
var result = [];
for( var key in array )
result.push( array[key] );
return result;
};
mais je ne pense pas que vous pouvez modifier les valeurs dans le tableau d'origine, ce qui serait plus efficace - on dirait que vous pourriez avoir à créer un nouveau tableau.
notez que vous n'avez pas besoin de vérifier les entrées" non définies " car elles n'existent pas réellement et la boucle for ne les renvoie pas. C'est un artefact de l'impression de tableaux qui les affiche comme non définis. Ils ne semblent pas exister dans la mémoire.
Ce serait bien si vous pouviez utiliser quelque chose comme slice() qui serait plus rapide, mais il n'a pas re-index. Quelqu'un connais un meilleur moyen?
en fait, vous pouvez probablement le faire en place comme suit qui est probablement plus efficace, la performance-sage:
reindexArray : function( array )
{
var index = 0; // The index where the element should be
for( var key in array ) // Iterate the array
{
if( parseInt( key ) !== index ) // If the element is out of sequence
{
array[index] = array[key]; // Move it to the correct, earlier position in the array
++index; // Update the index
}
}
array.splice( index ); // Remove any remaining elements (These will be duplicates of earlier items)
},
function remove_array_value(array, value) {
var index = array.indexOf(value);
if (index >= 0) {
array.splice(index, 1);
reindex_array(array);
}
}
function reindex_array(array) {
var result = [];
for (var key in array) {
result.push(array[key]);
}
return result;
}
exemple:
var example_arr = ['apple', 'banana', 'lemon']; // length = 3
remove_array_value(example_arr, 'banana');
banane est supprimé et la longueur du tableau = 2
ce sont des choses différentes qui ont des buts différents.
splice
est propre au tableau et, lorsqu'il est utilisé pour supprimer, supprime les entrées du tableau et déplace toutes les entrées précédentes pour combler le vide. (Il peut également être utilisé pour insérer des entrées, ou les deux en même temps.) splice
va changer le length
du tableau (en supposant que ce n'est pas un appel no-op: theArray.splice(x, 0)
).
delete
n'est pas spécifique au tableau; il est conçu pour être utilisé sur des objets: il supprime une propriété (paire clé/valeur) de l'objet sur lequel vous l'utilisez. Elle ne s'applique qu'aux tableaux parce que les tableaux standards (par exemple, non dactylographiés) en JavaScript ne sont pas vraiment des tableaux du tout *, ce sont des objets avec une manipulation spéciale pour certaines propriétés, telles que celles dont les noms sont des "indexes de tableau" (qui sont définis comme noms de chaîne "...dont la valeur numérique i
se situe dans la gamme +0 ≤ i < 2^32-1
") et length
. Lorsque vous utilisez delete
pour supprimer une entrée de tableau, il n'est de supprimer l'entrée; il ne bouge pas d'autres entrées suivantes à combler l'écart, et le tableau devient "sparse" (a certaines entrées totalement absente). Il n'a pas d'effet sur length
.
quelques-unes des réponses actuelles à cette question indiquent incorrectement que l'utilisation de delete
"règle l'entrée à undefined
". Ce n'est pas correct. Il supprime le entrée (propriété) entièrement, laissant un vide.
utilisons un code pour illustrer les différences:
console.log("Using `splice`:");
var a = ["a", "b", "c", "d", "e"];
console.log(a.length); // 5
a.splice(0, 1);
console.log(a.length); // 4
console.log(a[0]); // "b"
console.log("Using `delete`");
var a = ["a", "b", "c", "d", "e"];
console.log(a.length); // 5
delete a[0];
console.log(a.length); // still 5
console.log(a[0]); // undefined
console.log("0" in a); // false
console.log(a.hasOwnProperty(0)); // false
console.log("Setting to `undefined`");
var a = ["a", "b", "c", "d", "e"];
console.log(a.length); // 5
a[0] = undefined;
console.log(a.length); // still 5
console.log(a[0]); // undefined
console.log("0" in a); // true
console.log(a.hasOwnProperty(0)); // true
* (c'est un post sur mon petit blog anémique)
Actuellement, il y a deux façons de le faire
-
à l'aide de splice()
arrayObject.splice(index, 1);
-
supprimer
"delete arrayObject[index];
mais je suggère toujours d'utiliser splice pour les objets array et delete pour les attributs d'objet parce que delete ne met pas à jour la longueur du tableau.
OK, imagine que nous avons ce tableau ci-dessous:
const arr = [1, 2, 3, 4, 5];
supprimons d'abord:
delete arr[1];
et voici le résultat:
[1, empty, 3, 4, 5];
vide! et let's get it:
arr[1]; //undefined
signifie Donc juste la valeur supprimée et c'est Non défini maintenant, donc la longueur est la même, aussi il retournera vrai ...
réinitialisons notre réseau et faisons-le avec splice cette fois:
arr.splice(1, 1);
et voici le résultat cette fois:
[1, 3, 4, 5];
comme vous voyez la longueur du tableau changé et arr[1]
est 3 maintenant...
aussi ceci retournera l'élément supprimé dans un tableau qui est [3]
dans ce cas...
IndexOf
accepte également un type de référence. Supposons le scénario suivant:
var arr = [{item: 1}, {item: 2}, {item: 3}];
var found = find(2, 3); //pseudo code: will return [{item: 2}, {item:3}]
var l = found.length;
while(l--) {
var index = arr.indexOf(found[l])
arr.splice(index, 1);
}
console.log(arr.length); //1
différemment:
var item2 = findUnique(2); //will return {item: 2}
var l = arr.length;
var found = false;
while(!found && l--) {
found = arr[l] === item2;
}
console.log(l, arr[l]);// l is index, arr[l] is the item you look for
si l'élément à supprimer est au milieu (disons que nous voulons supprimer 'c' , dont son index est 1):
var arr = ['a','b','c'];
vous pouvez utiliser:
var indexToDelete = 1;
var newArray = arr.slice(0, indexToDelete).combine(arr.slice(indexToDelete+1, arr.length))
la voie la plus facile est probablement
var myArray = ['a', 'b', 'c', 'd'];
delete myArray[1]; // ['a', undefined, 'c', 'd']. Then use lodash compact method to remove false, null, 0, "", undefined and NaN
myArray = _.compact(myArray); ['a', 'c', 'd'];
Espérons que cette aide. Référence: https://lodash.com/docs#compact
pourquoi ne pas simplement filtrer? Je pense que c'est la façon la plus claire de considérer les tableaux dans js.
myArray = myArray.filter(function(item){
return item.anProperty != whoShouldBeDeleted
});
Pour ceux qui veulent utiliser Lodash peut utiliser:
myArray = _.without(myArray, itemToRemove)
Ou comme je l'ai utiliser dans Angular2
import { without } from 'lodash';
...
myArray = without(myArray, itemToRemove);
...
supprimer : supprimer va supprimer la propriété de l'objet, mais ne sera pas reindex le tableau ou mettre à jour sa longueur. De ce fait, il semble comme si elle est Non défini:
splice : supprime en fait l'élément, réindexe le tableau, et change sa longueur.
Supprimer l'élément de la dernière
arrName.pop();
Supprimer l'élément de la première
arrName.shift();
supprimer du milieu
arrName.splice(starting index,number of element you wnt to delete);
Ex: arrName.splice(1,1);
supprimer un élément de la dernière
arrName.splice(-1);
supprimer en utilisant le numéro d'index de tableau
delete arrName[1];
function deleteFromArray(array, indexToDelete){
var remain = new Array();
for(var i in array){
if(array[i] == indexToDelete){
continue;
}
remain.push(array[i]);
}
return remain;
}
myArray = ['a', 'b', 'c', 'd'];
deleteFromArray(myArray , 0);
// résultat : myArray = ['b', 'c', 'd'];