Suppression d'éléments du tableau en JavaScript - supprimer vs épissures

StackOverflow https://stackoverflow.com/questions/500606

Question

Quelle est la différence entre l'utilisation l'opérateur delete sur l'élément de tableau par opposition à l'aide de la méthode de 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 les éléments du tableau comme je peux avec des objets?

Était-ce utile?

La solution

delete supprimera la propriété d'objet, mais ne sera pas réindexer le tableau ou mettre à jour sa longueur. Cela en fait apparaît comme si elle n'est pas défini: 

> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> delete myArray[0]
  true
> myArray[0]
  undefined

Notez qu'il est pas en fait mis à la valeur undefined plutôt la propriété est retirée du tableau, ce qui en fait apparaissent non définie. Les outils de développement Chrome font cette distinction claire en imprimant empty lors de la connexion du tableau. 

> myArray[0]
  undefined
> myArray
  [empty, "b", "c", "d"]

myArray.splice(start, deleteCount) supprime en fait l'élément, réindexe la matrice, et modifie sa longueur. 

> myArray = ['a', 'b', 'c', 'd']
  ["a", "b", "c", "d"]
> myArray.splice(0, 2)
  ["a", "b"]
> myArray
  ["c", "d"]

Autres conseils

Array.remove () Méthode

John Resig , créateur de jQuery a créé une méthode de 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 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);

site web de John

supprimer Parce que supprime uniquement l'objet de l'élément du 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]);
}

Alors que cette affiche "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, tout en essayant de comprendre comment supprimer toutes les occurrences d'un élément d'un tableau. Voici une comparaison de splice et delete pour éliminer tous les 'c' du Array 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"]
​

De JavaScript 1.5 Core Référence> Opérateurs> Opérateurs spéciaux> supprimer l'opérateur :

  

Lorsque vous supprimez un élément de tableau, la   longueur du tableau n'est pas affectée. Pour   Par exemple, si vous supprimez un [3], un [4] est   encore [4] et [3] est indéfini. Cette   reste valable même si vous supprimez le dernier   élément du tableau (Supprimer   un [a.length-1]).

splice fonctionnera avec des indices numériques.

alors delete peut être utilisé contre d'autres types d'indices ..

exemple: 

delete myArray['text1'];

Il est probablement aussi important de mentionner que épissures ne fonctionne que sur des tableaux. (Propriétés de l'objet ne peuvent être invoquées pour suivre un ordre cohérent.)

Pour supprimer la paire clé-valeur d'un objet, la suppression est en fait ce que vous voulez: 

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

Comme plusieurs fois indiqué ci-dessus, en utilisant splice() semble comme un ajustement parfait. Documentation à Mozilla:

  

splice() méthode modifie le contenu d'un tableau en supprimant les éléments existants et / ou l'ajout 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

     

start

     

Index à laquelle pour commencer à changer le tableau. Si supérieure à la longueur du tableau, l'indice de départ réel sera réglé sur la longueur du tableau. Si elle est négative, commencera que de nombreux éléments de la fin.

     

deleteCount

     

Un entier indiquant le nombre d'anciens éléments de réseau à supprimer. Si deleteCount est 0, aucun élément sont supprimés. Dans ce cas, vous devez spécifier au moins un nouvel élément. Si deleteCount est supérieur au nombre d'éléments laissés dans le tableau à partir de début, puis tous les éléments jusqu'à la fin du tableau seront supprimés.

     

Si deleteCount est omis, deleteCount sera égal à (arr.length - start).

     

article1, article2, ...

     

Les éléments à ajouter au tableau, à partir de l'index de départ. Si vous ne spécifiez pas d'éléments, splice() ne supprime les éléments du tableau.

     

Valeur de retour

     

Un tableau contenant les éléments supprimés. Si un seul élément est retiré, un tableau d'un élément est retourné. Si aucun élément sont supprimés, un tableau vide est retourné.

     

[...]

supprimer Vs épissures

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)

lorsque vous Splice 

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

en cas de Supprimer l'indice élément est supprimé mais reste vide

tandis que dans le cas de épissage élément est supprimé et le index d'éléments de repos est réduit en conséquence

Supprimer agit comme une situation mondiale non réelle, juste supprime l'élément, mais la longueur du tableau reste le même:

exemple de la borne 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 tranche () , il prend la arr comme premier arg, et l'indice du membre que vous souhaitez supprimer comme deuxième argument. Comme vous pouvez le voir, il supprime en fait le membre du réseau, et réduira la longueur du tableau par 1 

function(arr,arrIndex){
    return arr.slice(0,arrIndex).concat(arr.slice(arrIndex + 1));
}

Qu'est-ce que la fonction ci-dessus est de prendre tous les membres à l'indice, et tous les membres après l'indice, et les concatène, et renvoie le résultat.

Voici un exemple en utilisant 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

S'il vous plaît noter que cela ne fonctionnera pas un tableau avec dupes en elle, parce que indexOf ( « c ») va simplement obtenir la première occurance, et seulement épissure et enlever le premier « c » il trouve.

Si vous voulez itérer un grand tableau et supprimer de manière sélective des éléments, il serait coûteux d'appeler épissure () pour chaque supprimer parce que (épissure) aurait des éléments suivants réindexer à chaque fois. Parce que les tableaux sont en Javascript associatif, il serait plus efficace de supprimer les éléments individuels, puis 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 pouvez modifier les valeurs clés du tableau d'origine, ce qui serait plus efficace -. Il semble que vous pourriez avoir à créer un nouveau tableau

Notez que vous n'avez pas besoin de vérifier les entrées « non défini » car ils n'existent pas en réalité et la boucle ne les retourne pas. Il est un artefact de l'impression de tableau qui les affiche comme non défini. 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 ne réindexer pas. Quelqu'un sait d'une meilleure façon?

En fait, vous pouvez probablement le faire en place comme suit ce qui est probablement plus efficace, en terme de performance: 

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 ceci 

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]

Pourquoi ne pas simplement filtrer? Je pense qu'il est la façon la plus claire de considérer les tableaux dans js. 

myArray = myArray.filter(function(item){
    return item.anProperty != whoShouldBeDeleted
});

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 réseau = 2

Ils sont des choses différentes qui ont des fins différentes.

splice est spécifique à matrice 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 l'écart. (. 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 qu'il n'est pas un appel no-op: theArray.splice(x, 0))

.

delete ne sont pas spécifiques au réseau; il est conçu pour être utilisé sur des objets: Il supprime une propriété (paire clé / valeur) de l'objet que vous utilisez sur. Il applique uniquement aux tableaux car les tableaux standard (par exemple, non-dactylographiées) en JavaScript ne sont pas des tableaux vraiment du tout *, ils sont des objets avec un traitement spécial pour certaines propriétés, telles que celles dont les noms sont « les indices de tableau » (qui sont 

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)

Il existe actuellement deux façons de le faire

  1. en utilisant splice ()

    arrayObject.splice(index, 1);

  2. à l'aide de supprimer

    delete arrayObject[index];

Mais je suggère toujours d'utiliser épissure pour les objets de tableau et supprimer des attributs d'objet, car supprimer ne met pas à jour longueur du tableau.

La différence peut être vu en se connectant à la longueur de chaque réseau après que l'opérateur de delete et un procédé de splice() sont appliqués. Par exemple:

supprimer opérateur 

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 le « espace réservé » de l'élément existe toujours. oak a été supprimé mais il faut encore de la place dans le tableau. De ce fait, la longueur du tableau reste 5.

Procédé d'épissure () 

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 complètement la valeur cible et le « espace réservé » aussi bien. oak a été supprimé, ainsi que l'espace qu'il occupait autrefois dans le tableau. La longueur de la matrice est maintenant 4.

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

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

Faisons supprimer d'abord: 

delete arr[1];

et ceci est le résultat: 

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

vide et nous allons l'obtenir: 

arr[1]; //undefined

signifie donc que la valeur supprimée et il est undefined maintenant la longueur est la même, aussi il retournera true ...

Nous allons réinitialiser notre gamme et le faire avec épissure cette fois-ci: 

arr.splice(1, 1);

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

[1, 3, 4, 5];

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

De plus, cette renverra l'élément supprimé dans un tableau qui est [3] dans ce cas ...

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

Ou comme je l'utilise dans Angular2 

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

Supprimer : supprimer supprimera la propriété d'objet, mais ne sera pas réindexer   la matrice ou mettre à jour sa longueur. Cela en fait apparaît comme si elle est   Non défini:

     

épissures : supprime en fait l'élément, réindexe le tableau, et les changements   sa longueur.

Supprimer l'élément de la dernière 

arrName.pop();

Supprimer é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 de tableau 

 delete arrName[1];

Si l'élément souhaité supprimer est au milieu (disons que nous voulons supprimer « c », que son 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 que 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

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'];

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top