Suppression d'éléments de tableau en JavaScript - delete vs splice
Quelle est la différence entre utiliser l'opérateur delete sur l'élément de tableau plutôt que d'utiliser la méthode Array.splice ?
Par exemple:
myArray = ['a', 'b', 'c', 'd'];
delete myArray[1];
// or
myArray.splice (1, 1);
Pourquoi même avoir la méthode de raccordement si je peux supprimer des éléments de tableau comme je le peux avec des objets?
delete supprimera la propriété de l'objet, mais ne réindexera pas le tableau ni n'en modifiera la longueur. Cela donne l'impression que c'est indéfini:
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> delete myArray[0]
true
> myArray[0]
undefined
Notez qu'il n'est en fait pas défini sur la valeur undefined, mais que la propriété est supprimée du tableau, ce qui le rend semble non défini. Les outils de développement de Chrome expliquent clairement cette distinction en imprimant empty lors de la journalisation du tableau.
> myArray[0]
undefined
> myArray
[empty, "b", "c", "d"]
myArray.splice(start, deleteCount) supprime réellement l'élément, réindexe le tableau et modifie sa longueur.
> myArray = ['a', 'b', 'c', 'd']
["a", "b", "c", "d"]
> myArray.splice(0, 2)
["a", "b"]
> myArray
["c", "d"]
Méthode Array.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 d'utilisation de ce logiciel:
// 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);
Comme delete supprime uniquement l'objet de l'élément dans le tableau, la longueur du tableau ne changera pas. Splice supprime l'objet et raccourcit le tableau.
Le code suivant affichera "a", "b", "indéfini", "d"
myArray = ['a', 'b', 'c', 'd']; delete myArray[2];
for (var count = 0; count < myArray.length; count++) {
alert(myArray[count]);
}
Considérant 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 supprimer 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"]
Depuis Base de JavaScript JavaScript 1.5 Référence> Opérateurs> Opérateurs spéciaux> delete Operator :
Lorsque vous supprimez un élément de tableau, le fichier la longueur du tableau n'est pas affectée. Pour Par exemple, si vous supprimez un [3], un [4] est toujours un [4] et un [3] est indéfini. Ce tient même si vous supprimez le dernier élément du tableau (delete a [a.length-1]).
Il est également intéressant de mentionner que l'épissure ne fonctionne que sur les tableaux. (On ne peut pas compter sur les propriétés d'objet pour suivre un ordre cohérent.)
Pour supprimer la paire clé-valeur d'un objet, supprimez est ce que vous voulez:
delete myObj.propName; // , or:
delete myObj["propName"]; // Equivalent.
splice fonctionnera avec des index numériques.
alors que delete peut être utilisé contre d’autres types d’indices.
exemple:
delete myArray['text1'];
Comme indiqué à plusieurs reprises ci-dessus, utiliser splice() semble être un ajustement parfait. Documentation sur Mozilla:
La méthode
splice()change 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ébut
Index auquel commencer à changer le tableau. S'il est supérieur à la longueur du tableau, l'index de départ réel sera défini sur 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 de tableau à supprimer. Si deleteCount est à 0, aucun élément n'est supprimé. Dans ce cas, vous devez spécifier au moins un nouvel élément. Si deleteCount est supérieur au nombre d'éléments restants dans le tableau à partir du début, tous les éléments jusqu'à 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, commençant à l'index de début. Si vous ne spécifiez aucun élément,
splice()ne supprimera que les éléments du 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 renvoyé.
[...]
delete agit comme une situation réelle, il supprime simplement l'élément, mais la longueur du tableau reste la même:
exemple de terminal de noeud:
> 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 () , l'arr est le premier argument, et l'index du membre que vous souhaitez supprimer est le deuxième argument. Comme vous pouvez le constater, cela supprime 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));
}
La fonction ci-dessus amène tous les membres à l'index et tous les membres après l'index, les concatène ensemble et renvoie le résultat.
Voici un exemple d'utilisation de la fonction ci-dessus en tant que 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
notez que cela ne fonctionnera pas avec un tableau contenant des doublons, car indexOf ("c") obtiendra simplement la première occurrence et ne séparera que le premier "c" qu'il trouvera.
supprime l'épissure de Vs
lorsque vous supprimez un élément d'un tableau
var arr = [1,2,3,4]; delete arr[2]; //result [1, 2, 3:, 4]
console.log(arr)quand vous épissurez
var arr = [1,2,3,4]; arr.splice(1,1); //result [1, 3, 4]
console.log(arr);en cas de delete l'élément est supprimé mais l'index reste vide
alors que dans le cas de splice élément est supprimé et que l’index des éléments rest est réduit en conséquence
Si vous souhaitez itérer un grand tableau et supprimer sélectivement des éléments, il serait coûteux d'appeler splice () à chaque suppression, car splice () devrait réindexer les éléments suivants à chaque fois. Les tableaux étant associatifs en Javascript, il serait plus efficace de supprimer les éléments individuels, puis de réindexer le tableau par la suite.
Vous pouvez le faire en construisant un nouveau tableau. par exemple
function reindexArray( array )
{
var result = [];
for( var key in array )
result.Push( array[key] );
return result;
};
Mais je ne pense pas que vous puissiez modifier les valeurs de clé du tableau d'origine, ce qui serait plus efficace - il semblerait que vous deviez créer un nouveau tableau.
Notez qu'il n'est pas nécessaire de rechercher les entrées "non définies" car elles n'existent pas et que la boucle for ne les renvoie pas. C'est un artefact de la matrice d'impression qui les affiche comme non définis. Ils ne semblent pas exister en mémoire.
Ce serait bien si vous pouviez utiliser quelque chose comme slice () qui serait plus rapide, mais cela ne réindexe pas. Quelqu'un sait d'une meilleure façon?
En fait, vous pouvez probablement le faire en place de la manière suivante, ce qui est probablement plus efficace en termes de performances:
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)
},
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';})); // [1,2,3,4,6]Ce sont des choses différentes qui ont des buts différents.
splice est spécifique à un tableau et, lorsqu'il est utilisé pour la suppression, supprime les entrées du tableau et déplace toutes les entrées précédentes vers le haut pour combler le vide. (Il peut également être utilisé pour insérer des entrées, ou les deux en même temps.) splice changera la length du tableau (en supposant que ce n'est pas un appel non-op: theArray.splice(x, 0)).
delete n'est pas spécifique à un 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. Cela s'applique uniquement aux tableaux car les tableaux standard (par exemple, non typés) en JavaScript ne sont pas vraiment des tableaux *, ce sont des objets avec un traitement spécial pour certaines propriétés, telles que celles dont le nom est " index de tableau "(qui sont définis } comme noms de chaîne" ... dont la valeur numérique i est comprise entre +0 ≤ i < 2^32-1 ") et length. Lorsque vous utilisez delete pour supprimer une entrée de tableau, il ne fait que supprimer l'entrée; il ne déplace pas les autres entrées qui le suivent pour combler le vide, et le tableau devient "clairsemé" (certaines entrées sont totalement manquantes). Cela n'a aucun effet sur length.
Quelques réponses actuelles à cette question indiquent à tort que l'utilisation de delete "définit l'entrée à undefined". Ce n'est pas correct Il supprime entièrement l'entrée, laissant un espace.
Utilisons du 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)); // falseconsole.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)
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');
la banane est supprimée et la longueur du tableau = 2
Pourquoi ne pas simplement filtrer? Je pense que c'est la manière la plus claire de considérer les tableaux dans js.
myArray = myArray.filter(function(item){
return item.anProperty != whoShouldBeDeleted
});
La différence peut être constatée en enregistrant la longueur de chaque tableau après l'application de l'opérateur delete et de la méthode splice(). Par exemple:
opérateur de suppression
var trees = ['redwood', 'bay', 'cedar', 'Oak', 'maple'];
delete trees[3];
console.log(trees); // ["redwood", "bay", "cedar", empty, "maple"]
console.log(trees.length); // 5
L'opérateur delete supprime l'élément du tableau, mais "l'espace réservé" de l'élément existe toujours. Oak a été supprimé, mais cela prend toujours de la place dans le tableau. Pour cette raison, la longueur du tableau reste 5.
méthode splice ()
var trees = ['redwood', 'bay', 'cedar', 'Oak', 'maple'];
trees.splice(3,1);
console.log(trees); // ["redwood", "bay", "cedar", "maple"]
console.log(trees.length); // 4
La méthode splice() supprime également complètement la valeur cible et "l'espace réservé". Oak a été supprimé, ainsi que l'espace qu'il occupait auparavant dans le tableau. La longueur du tableau est maintenant de 4.
OK, imaginons 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 obtenons-le:
arr[1]; //undefined
Donc, signifie simplement que la valeur est supprimée et qu'il s'agit de undefined now, donc la longueur est identique, elle renverra également true ...
Réinitialisons notre tableau et faisons-le avec splice cette fois-ci:
arr.splice(1, 1);
et voici le résultat cette fois-ci:
[1, 3, 4, 5];
Comme vous voyez la longueur du tableau a changé et arr[1] est 3 maintenant ...
De plus, ceci retournera l’élément supprimé dans un tableau qui est [3] dans ce cas ...
delete : delete supprimera la propriété de l'objet, mais ne réindexera pas le tableau ou mettre à jour sa longueur. Cela donne l'impression que c'est le cas indéfini:
splice : supprime réellement l'élément, réindexe le tableau et modifie sa longueur.
Supprimer l'élément du dernier
arrName.pop();
Supprimer l'élément du premier
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 du dernier
arrName.splice(-1);
Supprimer en utilisant le numéro d'index du tableau
delete arrName[1];
Si l'élément à supprimer est au milieu (disons que nous voulons supprimer "c", dont l'index est 1), vous pouvez utiliser:
var arr = ['a','b','c'];
var indexToDelete = 1;
var newArray = arr.slice(0,indexToDelete).combine(arr.slice(indexToDelete+1, arr.length))
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); //1Diffé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
Pour ceux qui veulent utiliser Lodash peuvent utiliser: myArray = _.without(myArray, itemToRemove)
Ou comme je l'utilise dans Angular2
import { without } from 'lodash';
...
myArray = without(myArray, itemToRemove);
...
Le moyen le plus simple 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'];
J'espère que cela t'aides. Référence: https://lodash.com/docs#compact