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?

1202
demandé sur Peter Mortensen 2009-02-01 14:11:16

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"]
1564
répondu Andy Hume 2018-03-05 09:56:46

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);

Jean du site internet

323
répondu Mohsen 2013-04-03 19:08:12

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]);
}
96
répondu andynormancx 2012-08-24 09:24:27

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"]
​
62
répondu Troy Harvey 2012-05-09 13:25:29

à 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]).

13
répondu f3lix 2009-02-01 11:16:55

splice fonctionnera avec des indices numériques.

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

exemple:

delete myArray['text1'];
9
répondu Gopal 2012-02-11 16:49:45

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.
9
répondu jtrick 2013-03-24 03:32:33

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é.

[...]

8
répondu serv-inc 2017-08-03 10:42:07

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.

7
répondu med116 2014-07-20 02:20:52

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

6
répondu ashish yadav 2018-02-21 12:35:23

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]

5
répondu Zeeshan Saleem 2013-11-26 12:34:14

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)
},
5
répondu Mike T 2016-02-01 15:11:15
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

2
répondu Terry Lin 2016-07-21 06:03:58

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)

2
répondu T.J. Crowder 2017-02-19 10:45:38

Actuellement, il y a deux façons de le faire

  1. à l'aide de splice()

    arrayObject.splice(index, 1);

  2. 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.

2
répondu imal hasaranga perera 2017-04-21 14:16:51

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...

1
répondu Alireza 2017-12-25 13:18:25

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
0
répondu roland 2015-01-11 12:21:58

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))

0
répondu Idan Gozlan 2015-12-13 08:35:49

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

0
répondu Prashanth 2016-01-08 11:03:34

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
});
0
répondu Asqan 2016-03-17 09:45:44

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);
...
0
répondu Ricky Levi 2017-08-20 21:03:50

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];
0
répondu Srikrushna Pal 2018-06-28 19:26:43
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'];

-1
répondu Eyad Farra 2014-03-17 11:34:28