Question Comment vider un tableau en JavaScript?


Y at-il un moyen de vider un tableau et si oui éventuellement avec .remove()?

Par exemple,

A = [1,2,3,4];

Comment puis-je vider ça?


2199
2017-08-05 09:08


origine


Réponses:


Façons d'effacer un tableau existant A:

Méthode 1

(C'était ma réponse originale à la question)

A = [];

Ce code va définir la variable A à un nouveau tableau vide. C'est parfait si vous n'avez pas références au tableau d'origine A ailleurs, car cela crée en fait un tout nouveau tableau (vide). Vous devriez être prudent avec cette méthode car si vous avez référencé ce tableau à partir d'une autre variable ou propriété, le tableau original restera inchangé. N'utilisez ceci que si vous ne faites référence au tableau que par sa variable d'origine A.

C'est aussi la solution la plus rapide.

Cet exemple de code montre le problème que vous pouvez rencontrer lors de l'utilisation de cette méthode:

var arr1 = ['a','b','c','d','e','f'];
var arr2 = arr1;  // Reference arr1 by another variable 
arr1 = [];
console.log(arr2); // Output ['a','b','c','d','e','f']

Méthode 2 (comme suggéré par Matthew Crumley)

A.length = 0

Cela effacera le tableau existant en définissant sa longueur à 0. Certains ont fait valoir que cela peut ne pas fonctionner dans toutes les implémentations de JavaScript, mais il s'avère que ce n'est pas le cas. Cela fonctionne également lors de l'utilisation de "mode strict" dans ECMAScript 5 car la propriété length d'un tableau est une propriété en lecture / écriture.

Méthode 3 (comme suggéré par Anthony)

A.splice(0,A.length)

En utilisant .splice() fonctionnera parfaitement, mais depuis le .splice() La fonction retournera un tableau avec tous les éléments supprimés, il retournera effectivement une copie du tableau original. Les benchmarks suggèrent que cela n'a aucun effet sur la performance.

Méthode 4 (comme suggéré par tanguy_k)

while(A.length > 0) {
    A.pop();
}

Cette solution n'est pas très succincte, et c'est aussi la solution la plus lente, contrairement aux benchmarks précédents référencés dans la réponse originale.

Performance

De toutes les méthodes de compensation d'un tableau existant, les méthodes 2 et 3 sont très similaires en performance et sont beaucoup plus rapides que la méthode 4. Voir référence.

Comme indiqué par Diadistis dans leurs répondre ci-dessous, les repères originaux utilisés pour déterminer la performance des quatre méthodes décrites ci-dessus étaient erronés. Le banc d'essai d'origine réutilisait le tableau effacé, de sorte que la deuxième itération supprimait un tableau déjà vide.

Le benchmark suivant corrige cette faille: http://jsben.ch/#/hyj65. Il montre clairement que les méthodes # 2 (propriété length) et # 3 (splice) sont les plus rapides (sans compter la méthode # 1 qui ne change pas le tableau original).


Cela a été un sujet brûlant et la cause de beaucoup de controverses. Il y a effectivement beaucoup de réponses correctes et parce que cette réponse a été marquée comme la réponse acceptée depuis très longtemps, j'inclurai toutes les méthodes ici. Si vous votez pour cette réponse, veuillez ajouter les autres réponses que j'ai mentionnées.


3440
2017-08-05 09:10



Si vous devez conserver le tableau d'origine parce que vous avez d'autres références à mettre à jour, vous pouvez le supprimer sans créer de nouveau tableau en définissant sa longueur à zéro:

A.length = 0;

2253
2017-08-05 16:29



Voici l'implémentation la plus rapide tandis que garder le même tableau ("mutable"):

Array.prototype.clear = function() {
  while (this.length) {
    this.pop();
  }
};

FYI Carte définit clear() il semblerait donc logique d'avoir clear() pour Array aussi.

Ou en tant que Underscore.js mixin:

_.mixin({
  clearArray: function(array) {
    while (array.length) {
      array.pop();
    }
  }
});

Ou une fonction simple:

function clearArray(array) {
  while (array.length) {
    array.pop();
  }
}

Manuscrit version:

function clearArray<T>(array: T[]) {
  while (array.length) {
    array.pop();
  }
}

FYI il ne peut pas être simplifié à while (array.pop()): les tests échoueront.

Et les tests qui vont avec:

describe('Array', () => {
  it('should clear the array', () => {
    let array = [1, 2, 3, 4, 5];
    array.clear();
    expect(array.length).toEqual(0);
    expect(array[0]).toEqual(undefined);
    expect(array[4]).toEqual(undefined);

    // Even with undefined or null inside
    array = [1, undefined, 3, null, 5];
    array.clear();
    expect(array.length).toEqual(0);
    expect(array[0]).toEqual(undefined);
    expect(array[4]).toEqual(undefined);
  });
});

Voici le jsPerf mis à jour: http://jsperf.com/array-destroy/32  http://jsperf.com/array-destroy/152


255
2018-06-25 20:32



Une solution plus conviviale pour les navigateurs et plus optimale sera d'utiliser splice méthode pour vider le contenu du tableau A comme ci-dessous:

A.splice(0, A.length);


182
2017-11-15 09:49



Les réponses qui n'ont pas moins de 2739 upvotes maintenant sont trompeuses et incorrectes.

La question est: "Comment videz-vous votre tableau existant?" Par exemple. pour A = [1,2,3,4].

  1. En disant "A = [] est la réponse "est ignorant et absolument incorrect. [] == [] est faux.

    En effet, ces deux tableaux sont deux objets distincts et individuels, avec leurs deux identités propres, occupant chacun leur propre espace dans le monde numérique.


Disons que votre mère vous demande de vider la poubelle.

  • Vous n'en apportez pas un nouveau comme si vous aviez fait ce qu'on vous demandait.
  • Au lieu de cela, vous videz la poubelle.
  • Vous ne remplacez pas la boîte pleine par une nouvelle boîte vide, et vous ne prenez pas l'étiquette "A" de la boîte pleine et ne la collez pas à la nouvelle comme dans A = [1,2,3,4]; A = [];

Vider un objet tableau est la chose la plus simple qui soit:

A.length = 0;

De cette façon, la boîte sous "A" est non seulement vide, mais aussi propre comme neuve!


  1. En outre, vous n'êtes pas obligé d'enlever les déchets à la main jusqu'à ce que la boîte soit vide! Il vous a été demandé de vider l'existant, complètement, en un tour, de ne pas ramasser la poubelle jusqu'à ce que la boîte soit vide, comme dans:

    while(A.length > 0) {
        A.pop();
    }
    
  2. Ni, pour mettre votre main gauche au fond de la poubelle, en la tenant avec votre droite en haut pour être en mesure de tirer son contenu comme dans:

    A.splice(0, A.length);
    

Non, vous avez été invité à le vider:

A.length = 0;

C'est le seul code qui vide correctement le contenu d'un tableau JavaScript donné.


61
2018-04-30 15:18



Test de performance:

http://jsperf.com/array-clear-methods/3

a = []; // 37% slower
a.length = 0; // 89% slower
a.splice(0, a.length)  // 97% slower
while (a.length > 0) {
    a.pop();
} // Fastest

59
2018-05-14 07:14



Vous pouvez ajouter ceci à votre fichier JavaScript pour permettre à vos tableaux d'être "effacés":

Array.prototype.clear = function() {
    this.splice(0, this.length);
};

Ensuite, vous pouvez l'utiliser comme ceci:

var list = [1, 2, 3];
list.clear();

Ou si vous voulez être sûr de ne pas détruire quelque chose:

if (!Array.prototype.clear) {
    Array.prototype.clear = function() {
       this.splice(0, this.length);
    };
}

Beaucoup de gens pensent que vous ne devriez pas modifier les objets natifs (comme Array), et je suis enclin à être d'accord. S'il vous plaît soyez prudent en décidant comment gérer cela.


32
2017-12-11 02:58



Array.prototype.clear = function() {
    this.length = 0;
};

Et appelez-le: array.clear();


16
2018-02-22 21:28



Il y a beaucoup de confusion et de désinformation en ce qui concerne le temps, la performance pop / shift à la fois dans les réponses et les commentaires. La solution while / pop a (comme prévu) le pire performance. Ce qui se passe réellement, c'est que l'installation s'exécute une seule fois pour chaque échantillon qui exécute l'extrait dans une boucle. par exemple:

var arr = [];

for (var i = 0; i < 100; i++) { 
    arr.push(Math.random()); 
}

for (var j = 0; j < 1000; j++) {
    while (arr.length > 0) {
        arr.pop(); // this executes 100 times, not 100000
    }
}

J'ai créé un nouveau test qui fonctionne correctement:

http://jsperf.com/empty-javascript-array-redux

Attention: Même dans cette version du test, vous ne pouvez pas vraiment voir la vraie différence, car le clonage du tableau prend la majeure partie du temps de test. Cela montre encore que splice est le moyen le plus rapide d'effacer le tableau (ne pas prendre [] en considération parce que, même s'il est le plus rapide, il ne supprime pas réellement le tableau existant).


15
2018-02-16 18:52



Dans le cas où vous êtes intéressé par l'allocation de mémoire, vous pouvez comparer chaque approche en utilisant quelque chose comme ce jsfiddle en conjonction avec l'onglet chronologie de chrome dev tools. Vous voudrez utiliser l'icône de la corbeille en bas pour forcer une collecte de place après avoir effacé le tableau. Cela devrait vous donner une réponse plus précise pour le navigateur de votre choix. Beaucoup de réponses sont anciennes et je ne me fierais pas à elles mais plutôt tester comme dans la réponse de @ tanguy_k ci-dessus.

(pour une intro à l'onglet mentionné ci-dessus, vous pouvez vérifier ici)

Stackoverflow me force à copier le jsfiddle alors voici:

<html>
<script>
var size = 1000*100
window.onload = function() {
  document.getElementById("quantifier").value = size
}

function scaffold()
{
  console.log("processing Scaffold...");
  a = new Array
}
function start()
{
  size = document.getElementById("quantifier").value
  console.log("Starting... quantifier is " + size);
  console.log("starting test")
  for (i=0; i<size; i++){
    a[i]="something"
  }
  console.log("done...")
}

function tearDown()
{
  console.log("processing teardown");
  a.length=0
}

</script>
<body>
    <span style="color:green;">Quantifier:</span>
    <input id="quantifier" style="color:green;" type="text"></input>
    <button onclick="scaffold()">Scaffold</button>
    <button onclick="start()">Start</button>
    <button onclick="tearDown()">Clean</button>
    <br/>
</body>
</html>

Et vous devriez prendre note que cela peut dépendre du type des éléments du tableau, car javascript gère les chaînes différemment des autres types de primitives, sans parler des tableaux d'objets. Le type peut affecter ce qui se passe.


14
2017-12-11 23:19