remove - supprimer un élément d'un tableau javascript




Suppression d'éléments de tableau dans JavaScript-delete vs splice (15)

Array.remove () Méthode

John Resig , créateur de jQuery a créé une méthode Array.remove très pratique 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 comment 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);

Le site de John

Quelle est la différence entre l'utilisation de l'opérateur delete sur l'élément array et l'utilisation de 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 d'épissage si je peux supprimer des éléments de tableau comme je peux avec des objets?


Étant donné que delete ne supprime que 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", "undefined", "d"

myArray = ['a', 'b', 'c', 'd']; delete myArray[2];

for (var count = 0; count < myArray.length; count++) {
    alert(myArray[count]);
}

Alors que cela affichera "a", "b", "d"

myArray = ['a', 'b', 'c', 'd']; myArray.splice(2,1);

for (var count = 0; count < myArray.length; count++) {
    alert(myArray[count]);
}

Ce sont des choses différentes qui ont des objectifs différents.

splice est spécifique au 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 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 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. Elle s'applique uniquement aux tableaux car les tableaux standard (par exemple, non typés) en JavaScript ne sont pas vraiment des tableaux *, ils sont des objets avec un traitement spécial pour certaines propriétés, telles que celles dont les noms sont "index de tableau". defined comme des noms de chaînes "... dont la valeur numérique i est dans la plage +0 ≤ i < 2^32-1 ") et la length . Lorsque vous utilisez delete pour supprimer une entrée de tableau, tout ce qu'elle fait est de supprimer l'entrée; il ne déplace pas les autres entrées qui le suivent pour combler le vide, et ainsi le tableau devient "clairsemé" (certaines entrées manquent complètement). Cela n'a aucun effet sur la length .

Quelques réponses actuelles à cette question indiquent incorrectement que l'utilisation de delete "définit l'entrée sur undefined ". Ce n'est pas correct. Il supprime entièrement l'entrée (propriété), 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)); // 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)


Comme indiqué plusieurs fois ci-dessus, l'utilisation de splice() semble être un ajustement parfait. Documentation sur Mozilla:

La méthode splice() modifie le contenu d'un tableau en supprimant les é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 le changement du tableau. Si elle est supérieure à 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

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 nouvel élément. Si deleteCount est supérieur au nombre d'éléments restant dans le tableau commençant au début, alors tous les éléments à 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 à l'index de départ. Si vous ne spécifiez aucun élément, splice() supprimera uniquement 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é.

[...]


Il est probablement aussi important de mentionner que splice ne fonctionne que sur les tableaux. (Les propriétés d'objet ne peuvent pas être invoquées pour suivre un ordre cohérent.)

Pour supprimer la paire clé-valeur d'un objet, delete est réellement ce que vous voulez:

delete myObj.propName;     // , or:
delete myObj["propName"];  // Equivalent.

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 de delete pour supprimer chaque 'c' du tableau Array.

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"]
​

OK, imaginez que nous avons ce tableau ci-dessous:

const arr = [1, 2, 3, 4, 5];

Faisons d'abord supprimer:

delete arr[1];

et voici le résultat:

[1, empty, 3, 4, 5];

vide! et allons-y:

arr[1]; //undefined

Donc signifie simplement la valeur supprimée et elle est indéfinie maintenant, donc la longueur est la même, elle retournera aussi vrai ...

Réinitialisons notre tableau et faisons-le avec splice cette fois:

arr.splice(1, 1);

et ceci est le résultat cette fois-ci:

[1, 3, 4, 5];

Comme vous voyez la longueur du tableau changé et arr[1] est 3 maintenant ...

Cela retournera également l'élément supprimé dans un tableau qui est [3] dans ce cas ...


Pour ceux qui veulent utiliser Lodash pouvez utiliser: myArray = _.without(myArray, itemToRemove)

Ou comme j'utilise dans Angular2

import { without } from 'lodash';
...
myArray = without(myArray, itemToRemove);
...

Si l'élément à supprimer est au milieu (disons que nous voulons supprimer 'c', dont l'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)) var indexToDelete = 1; var newArray = arr.slice(0, indexToDelete).combine(arr.slice(indexToDelete+1, arr.length))


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 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é dans le tableau original, ce qui serait plus efficace - il semblerait que vous deviez 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 retourne pas. C'est un artefact de l'impression de tableau qui les affiche comme indéfini. Ils ne semblent pas exister en mémoire.

Ce serait bien si vous pouviez utiliser quelque chose comme slice () qui serait plus rapide, mais qui ne ré-indexerait pas. Quelqu'un sait-il d'une meilleure façon?

En fait, vous pouvez probablement le faire comme suit, 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)
},

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

delete supprimera la propriété de l'objet, mais ne réindexera pas le tableau ou ne mettra pas à jour sa longueur. Cela fait apparaître comme si elle est indéfinie:

> 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 sur la valeur undefined , plutôt que la propriété est supprimée du tableau, ce qui le rend non défini. Les outils de développement Chrome font 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 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"]

delete agit comme une situation non réelle, il supprime simplement l'élément, mais la longueur du tableau reste la même:

exemple du 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 () , il prend l'arr comme premier argument, et l'index du membre que vous voulez supprimer comme deuxième argument. Comme vous pouvez le voir, il supprime le membre du tableau et réduit 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 à l'index, et tous les membres après l'index, et concatène ensemble, et renvoie le résultat.

Voici un exemple utilisant la fonction ci-dessus comme un module de noeud, voyant 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 dupes, car indexOf ("c") obtiendra juste la première occurrence, et seulement épissera et supprimera 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]

quand vous épisserez

var arr = [1,2,3,4]; arr.splice(1,1); console.log(arr)
//result
 [1, 3, 4]

en cas de suppression, l' élément est supprimé mais l' index reste vide

tandis qu'en cas d' épissure, l' élément est supprimé et l' indice des éléments de repos est réduit en conséquence


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





delete-operator