Comment vider un tableau en JavaScript?

Est-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
demandé sur Peter Mortensen 2009-08-05 13:08:39

18 réponses

façons de nettoyer un tableau existant A :

Méthode 1

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

A = [];

ce code définira la variable A à un nouveau tableau vide. C'est parfait si vous n'avez pas références au tableau original A n'importe où ailleurs parce que cela crée en fait un tableau tout nouveau (vide). Vous devrait être prudent avec cette méthode parce que 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 faites référence au tableau par sa variable originale A .

C'est aussi la solution la plus rapide.

cet exemple de code montre la question que vous pouvez rencontrer en utilisant 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 (as suggéré par Matthieu Crumley )

A.length = 0

cela va effacer le tableau existant en réglant 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 aussi quand on utilise le "mode strict" dans ECMAScript 5 parce que la propriété length d'un tableau est une propriété read/write.

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

A.splice(0,A.length)

en utilisant .splice() fonctionnera parfaitement, mais puisque la fonction .splice() retournera un tableau avec tous les éléments supprimés, il retournera en fait une copie du tableau original. Repères suggèrent que cela n'a aucun effet sur les performances que ce soit.

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

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

Cette solution n'est pas très succincte, et elle est aussi la plus lente, contrairement aux points de repère antérieurs mentionnés dans la réponse originale.

Performance

de toutes les méthodes de nettoyage d'un "existing array , les méthodes 2 et 3 ont des performances très similaires et sont beaucoup plus rapides que la méthode 4. Voir ce benchmark .

comme l'indique Diadistis dans leur réponse ci-dessous, les points de repère initiaux qui ont été utilisés pour déterminer le rendement des quatre méthodes décrites ci-dessus étaient imparfaits. Le benchmark original a réutilisé le tableau effacé de sorte que la deuxième itération a effacé un tableau qui était déjà vide.

le benchmark suivant fixe défaut: 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 controverse. Il y a en fait beaucoup de bonnes réponses et comme cette réponse a été notée comme étant la réponse acceptée depuis très longtemps, j'inclurai toutes les méthodes ici. Si vous votez pour cette réponse, s'il vous plaît upvote les autres réponses que j'ai mentionnées aussi bien.

3540
répondu Philippe Leybaert 2017-05-23 12:34:51

si vous avez besoin de conserver le tableau original parce que vous avez d'autres références qui devraient être mises à jour aussi, vous pouvez le clarifier sans créer un nouveau tableau en définissant sa longueur à zéro:

A.length = 0;
2271
répondu Matthew Crumley 2011-12-01 23:35:59

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

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

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

Ou comme une trait de Soulignement.js mixin :

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

ou une fonction simple:

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

Tapuscrit version:

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

pour information, il ne peut pas être simplifié par while (array.pop()) : les essais seront infructueux.

et les essais 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);
  });
});

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

259
répondu tanguy_k 2018-03-23 11:03:04

une solution plus conviviale et plus optimale sera d'utiliser la méthode splice pour vider le contenu du tableau A comme suit:

A.splice(0, A.length);

184
répondu Anthony 2012-02-26 22:28:36

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

la question Est: "Comment vider votre tableau existant?"Par exemple. pour A = [1,2,3,4] .

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

    c'est parce que ces deux tableaux sont deux objets séparés, individuels, avec leur deux identités, de leur propre espace dans le monde numérique, chacun sur son propre.


disons que ta mère te demande de vider la poubelle.

  • vous n'en apportez pas un nouveau comme si vous aviez fait ce qu'on vous avait demandé.
  • à la place, vous videz la poubelle.
  • vous ne remplacez pas le plein avec une nouvelle boîte vide, et vous ne prenez pas l'étiquette "A" de la boîte remplie et collez-la à la nouvelle comme dans A = [1,2,3,4]; A = [];

vider un objet array est la chose la plus facile à faire:

A.length = 0;

ainsi, la boîte sous "A" est non seulement vide, mais aussi propre comme neuve!


  1. de plus, vous n'êtes pas tenu d'enlever la poubelle à la main jusqu'à ce que la boîte soit vide! On vous a demandé de vider le existant, complètement, en un tour, de ne pas ramasser les ordures jusqu'à la peut se vide, comme dans:

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

    A.splice(0, A.length);
    

non, on vous a demandé de le vider:

A.length = 0;

c'est le seul code qui vide correctement le contenu D'un tableau JavaScript donné.

65
répondu Bekim Bacaj 2017-08-05 20:20:09

essai 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
60
répondu kenshou.html 2015-11-11 19:41:42

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

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

, Alors 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 qu'il ne faut pas modifier les objets natifs (comme Array), et je suis enclin à être d'accord. Faites preuve de prudence au moment de décider comment gérer cela.

32
répondu leech 2014-09-24 18:02:03
Array.prototype.clear = function() {
    this.length = 0;
};

et appelez-le: array.clear();

16
répondu Bendegúz 2017-11-16 08:15:55

il y a beaucoup de confusion et de désinformation à propos de l'époque;performance pop/shift tant dans les réponses que dans les commentaires. La solution while / pop a (comme prévu) la la pire performance . Ce qui se passe en fait, c'est que setup n'exécute qu'une seule fois pour chaque échantillon qui exécute le fragment 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

avertissement: même dans cette version du test, vous ne pouvez pas réellement voir la différence réelle parce que le clonage du tableau prend la plupart du temps du test. Il montre toujours que splice est le moyen le plus rapide pour nettoyer le tableau (ne pas prendre [] en considération parce que bien qu'il soit le plus rapide, il n'est pas réellement nettoyer le tableau existant).

15
répondu Diadistis 2015-02-16 19:03:58

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 timeline de chrome dev tools. Vous voudrez utiliser l'icône Corbeille en bas pour forcer une collecte des ordures après avoir 'nettoyé' le tableau. Cela devrait vous donner une réponse plus précise pour le navigateur de votre choix. Beaucoup de réponses ici sont vieilles et je ne m'en remettrais pas à elles, mais plutôt tester comme dans la réponse de @tanguy_k surtout.

(pour une introduction à l'onglet ci-dessus, vous pouvez consulter ici )

Stackoverflow me force à copier le jsfiddle alors le 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 de caractères différemment des autres types primitifs, sans parler des tableaux d'objets. Le type peut affecter ce qui se passe.

14
répondu matanster 2013-12-11 23:19:59

A.splice(0);

je viens de faire ça sur un code sur lequel je travaille. Il effacé le tableau.

10
répondu David Campbell 2014-01-29 19:47:09

si vous utilisez

a = []; 

alors vous assignez une référence à un nouveau tableau à a, si la référence dans a est déjà assignée à une autre variable, alors il ne videra pas ce tableau aussi et donc le collecteur de déchets ne recueillera pas cette mémoire.

pour ex.

var a=[1,2,3];
var b=a;
a=[];
console.log(b);// It will print [1,2,3];

ou

a.length = 0;

quand nous spécifions a.length , nous ne faisons que Réinitialiser les limites du tableau et de la mémoire pour les éléments du réseau rest seront connectés par un collecteur d'ordures.

au lieu de ces deux solutions sont mieux.

a.splice(0,a.length)

et

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

selon la réponse précédente de kenshou.html, deuxième méthode est plus rapide.

10
répondu Laxmikant Dange 2018-01-18 11:36:29

utiliser une version modifiée de Jan 's suggestion initiale:

var originalLength = A.length;
for (var i = originalLength; i > 0; i--) {
     A.pop();
}
8
répondu cssimsek 2017-05-23 12:26:36

si vous utilisez les constantes alors vous n'avez pas le choix:

const numbers = [1, 2, 3]

Vous ne pouvez pas reasign:

numbers = []

vous pouvez seulement tronquer:

numbers.length = 0
5
répondu Damjan Pavlica 2017-02-23 00:39:28

Vous pouvez facilement créer une fonction pour le faire pour vous, changer le longueur ou même l'ajouter à Tableau natif comme remove() pour la réutilisation.

Imaginez que vous avez ce tableau:

var arr = [1, 2, 3, 4, 5]; //the array

OK, il suffit de lancer ceci:

arr.length = 0; //change the length

et le résultat est:

[] //result

manière facile de vider un tableau...

Aussi en utilisant la boucle qui n'est pas nécessaire mais juste une autre façon de le faire:

/* could be arr.pop() or arr.splice(0)
don't need to return as main array get changed */

function remove(arr) {
  while(arr.length) {
    arr.shift(); 
  }
}

il y a aussi la manière délicate dont vous pouvez penser, par exemple quelque chose comme ceci:

arr.splice(0, arr.length); //[]

donc si arr a 5 articles, il sera splice 5 articles de 0, ce qui signifie que rien ne restera dans le tableau.

aussi d'autres façons comme simplement réattribuer le tableau par exemple:

arr = []; //[]

si vous regardez Tableau fonctions, il ya beaucoup d'autres façons de le faire, mais la plus recommandée pourrait être de changer la longueur.

comme je l'ai dit en premier lieu, vous pouvez aussi prototype remove() car c'est la réponse à votre question. vous pouvez simplement choisir une des méthodes ci-dessus et le prototype d'objet de tableau dans JavaScript, quelque chose comme:

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

et vous pouvez simplement l'appeler comme ceci pour vider n'importe quel tableau dans votre application javascript:

arr.remove(); //[]
5
répondu Alireza 2018-08-02 13:15:27

je suis surpris que personne n'ait encore suggéré ceci:

let xs = [1,2,3,4];
for (let i in xs)
    delete xs[i];

ceci fournit un tableau dans un état tout à fait différent des autres solutions. Dans un sens, le tableau a été 'vidé':

xs
=> Array [ <4 empty slots> ]

[...xs]
=> Array [ undefined, undefined, undefined, undefined ]

xs.length
=> 4

xs[0]
=> ReferenceError: reference to undefined property xs[0]

vous pouvez produire un tableau équivalent avec [,,,,] ou Array(4)

3
répondu Cauterite 2017-03-03 08:02:01

enter image description here

pour vider une position mémoire courante d'un tableau, utilisez 'myArray.length = 0' ou 'myArray.pop() UN-till its length is 0'

  • length : vous pouvez définir la propriété length pour tronquer un tableau à tout moment. Lorsque vous prolongez un tableau en changeant sa propriété length, le nombre d'éléments réels augmente.
  • pop() : la méthode pop supprime l'élément last d'un tableau et retourne la valeur supprimée.
  • shift() : la méthode shift supprime l'élément à l'indice zeroeth et déplace les valeurs à des indices consécutifs vers le bas, puis retourne la valeur supprimée.

exemple:

var arr = ['77'];
arr.length = 20;
console.log("Increasing : ", arr); // (20) ["77", empty × 19]
arr.length = 12;
console.log("Truncating : ", arr); // (12) ["77", empty × 11]

var mainArr = new Array();
mainArr = ['1', '2', '3', '4'];

var refArr = mainArr;
console.log('Current', mainArr, 'Refered', refArr);

refArr.length = 3;
console.log('Length: ~ Current', mainArr, 'Refered', refArr);

mainArr.push('0');
console.log('Push to the End of Current Array Memory Location \n~ Current', mainArr, 'Refered', refArr);

mainArr.poptill_length(0);
console.log('Empty Array \n~ Current', mainArr, 'Refered', refArr);

Array.prototype.poptill_length = function (e) {
  while (this.length) {
    if( this.length == e ) break;

    console.log('removed last element:', this.pop());
  }
};

  • new Array() | [] créez un tableau avec un nouvel emplacement de mémoire en utilisant Array constructor ou array literal .

    mainArr = []; // a new empty array is addressed to mainArr.
    
    var arr = new Array('10'); // Array constructor
    arr.unshift('1'); // add to the front
    arr.push('15'); // add to the end
    console.log("After Adding : ", arr); // ["1", "10", "15"]
    
    arr.pop(); // remove from the end
    arr.shift(); // remove from the front
    console.log("After Removing : ", arr); // ["10"]
    
    var arrLit = ['14', '17'];
    console.log("array literal « ", indexedItem( arrLit ) ); // {0,14}{1,17}
    
    function indexedItem( arr ) {
        var indexedStr = "";
        arr.forEach(function(item, index, array) {
            indexedStr += "{"+index+","+item+"}";
            console.log(item, index);
        });
        return indexedStr;
    }
    
  • slice() : en utilisant la fonction slice nous obtenons une copie superficielle des éléments du tableau original, avec une nouvelle adresse mémoire, de sorte que toute modification sur cloneArr n'affectera pas à une réelle|tableau d'origine.

    var shallowCopy = mainArr.slice(); // this is how to make a copy
    
    var cloneArr = mainArr.slice(0, 3); 
    console.log('Main', mainArr, '\tCloned', cloneArr);
    
    cloneArr.length = 0; // Clears current memory location of an array.
    console.log('Main', mainArr, '\tCloned', cloneArr);
    
2
répondu Yash 2017-11-29 12:54:47

utilisez ci-dessous si vous devez vider Angular 2+ FormArray.

public emptyFormArray(formArray:FormArray) {
    for (let i = formArray.controls.length - 1; i >= 0; i--) {
        formArray.removeAt(i);
    }
}
-4
répondu Manish Jain 2017-05-11 17:28:28