Comment vider un tableau en JavaScript?
Est-il possible de vider un tableau et si éventuellement avec .remove()?
Par exemple,
A = [1,2,3,4];
Comment puis-je vider ça?
Méthodes pour effacer un tableau existant A:
Méthode 1
(c'était ma réponse originale à la question)
A = [];
Ce code définira la variable A sur 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 nouveau tableau (vide). Soyez prudent avec cette méthode car si vous avez référencé ce tableau à partir d'une autre variable ou propriété, le tableau d'origine restera inchangé. Utilisez-le uniquement si vous référencez le tableau à l'aide de 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 sur 0. Certains ont fait valoir que cela ne fonctionnerait peut-être pas 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 du "mode strict" dans ECMAScript 5, car la propriété length d'un tableau est une propriété en lecture/écriture.
Méthode (comme suggéré par Anthony )
A.splice(0,A.length)
Utiliser .splice() fonctionnera parfaitement, mais puisque la fonction .splice() renverra un tableau avec tous les éléments supprimés, elle renverra en fait une copie du tableau original. Les points de repère suggèrent que cela n’a aucun effet sur les performances.
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 également la solution la plus lente, contrairement aux points de repère antérieurs référencés dans la réponse initiale.
Performance
De toutes les méthodes pour effacer un tableau existant , les méthodes 2 et 3 ont des performances très similaires et sont beaucoup plus rapides que la méthode 4. Voir ceci - repère .
Comme souligné par Diadistis dans leur réponse ci-dessous, les critères de référence d'origine utilisés pour déterminer les performances des quatre méthodes décrites ci-dessus étaient erronés. Le benchmark d'origine a réutilisé le tableau effacé de sorte que la deuxième itération effaçait un tableau déjà vide.
La référence suivante corrige cette faille: http://jsben.ch/#/hyj65 . Il montre clairement que les méthodes n ° 2 (propriété de longueur) et n ° 3 (épissure) sont les plus rapides (sans la méthode n ° 1 qui ne modifie pas le tableau d'origine).
Cela a été un sujet brûlant et à l’origine de nombreuses controverses. Il y a en fait beaucoup de réponses correctes et comme cette réponse est considérée comme la réponse acceptée depuis très longtemps, j'inclurai ici toutes les méthodes. Si vous votez pour cette réponse, veuillez s'il-vous-plaît faire la même chose que les autres réponses que j'ai déjà mentionnées.
Si vous devez conserver le tableau d'origine, car vous avez également d'autres références à mettre à jour, vous pouvez l'effacer sans créer de nouveau tableau en définissant sa longueur à zéro:
A.length = 0;
Voici la mise en œuvre la plus rapide tandis que garde le même tableau ("mutable"):
function clearArray(array) {
while (array.length) {
array.pop();
}
}
Pour info, il ne peut pas être simplifié à while (array.pop()): les tests échoueront.
FYI Map et Set définir clear(), il semblerait logique d’avoir clear() pour Array aussi.
Version TypeScript:
function clearArray<T>(array: T[]) {
while (array.length) {
array.pop();
}
}
Les tests correspondants:
describe('clearArray()', () => {
test('clear regular array', () => {
const array = [1, 2, 3, 4, 5];
clearArray(array);
expect(array.length).toEqual(0);
expect(array[0]).toEqual(undefined);
expect(array[4]).toEqual(undefined);
});
test('clear array that contains undefined and null', () => {
const array = [1, undefined, 3, null, 5];
clearArray(array);
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
Une solution plus conviviale et optimale entre les navigateurs consiste à utiliser la méthode splice pour vider le contenu du tableau A comme ci-dessous:
A.splice(0, A.length);
Les réponses qui n'ont pas moins de 2739 votes positifs à présent sont trompeuses et incorrectes.
La question est: "Comment videz-vous votre tableau existant?" Par exemple. pour A = [1,2,3,4].
Dire "
A = []est la réponse" est ignorant et absolument incorrect.[] == []est false.En effet, ces deux tableaux sont deux objets distincts, individuels, ayant leurs deux identités propres et 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 qui vous avait été demandé.
- Au lieu de cela, vous videz la poubelle.
- Vous ne remplacez pas celui rempli par un nouveau pot vide, et vous ne retirez pas l'étiquette "A" de la boîte remplie et ne la collez pas au nouveau comme dans
A = [1,2,3,4]; A = [];
Vider un objet tableau est la chose la plus simple qui soit:
A.length = 0;
Ainsi, la boîte de dialogue "A" est non seulement vide, mais aussi propre que neuve!
De plus, vous n'êtes pas obligé d'enlever la corbeille à la main jusqu'à ce que la canette soit vide! Il vous a été demandé de vider la bibliothèque existante, complètement, en un tour, de ne pas ramasser la corbeille tant que la canette n'est pas vide, comme dans:
while(A.length > 0) { A.pop(); }Ni pour mettre votre main gauche au bas de la corbeille, en la tenant avec votre droite en haut pour pouvoir extraire 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é.
Test de performance:
http://jsperf.com/array-clear-methods/
a = []; // 37% slower
a.length = 0; // 89% slower
a.splice(0, a.length) // 97% slower
while (a.length > 0) {
a.pop();
} // Fastest
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 à accepter. S'il vous plaît soyez prudent pour décider comment gérer cela.
Il y a beaucoup de confusion et de désinformation concernant les performances en termes de performances/changements dans les réponses et les commentaires. La solution while/pop présente (comme prévu) la pire performance . En réalité, la configuration ne s'exécute qu'une fois pour chaque échantillon exécutant l'extrait de code 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, car le clonage de la matrice prend la majeure partie du temps de test. Il montre toujours que splice est le moyen le plus rapide pour effacer le tableau (ne prenant pas [] en considération car, bien qu'il soit le plus rapide, il n'efface pas réellement le tableau existant).
Si vous êtes intéressé par l'allocation de mémoire, vous pouvez comparer chaque approche en utilisant quelque chose comme this jsfiddle en conjonction avec l'onglet timeline de chrome _dev tools. Vous voudrez utiliser l'icône de la corbeille en bas pour forcer un ramassage des ordures 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 ici sont anciennes et je ne les utiliserais pas, mais testerais comme dans la réponse de @ tanguy_k ci-dessus.
(pour une introduction à l'onglet susmentionné, vous pouvez vérifier 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 notez que cela peut dépendre du type des éléments du tableau, car javascript gère les chaînes différemment des autres types primitifs, sans parler des tableaux d'objets. Le type peut affecter ce qui se passe.
Array.prototype.clear = function() {
this.length = 0;
};
Et appelez-le: array.clear();
A.splice(0);
Je viens de faire cela sur du code sur lequel je travaille. Il a effacé le tableau.
Vous pouvez facilement créer une fonction pour le faire pour vous, modifier la fonction longueur ou même l'ajouter à tableau natif en tant que remove() pour la réutiliser.
Imaginez que vous avez ce tableau:
var arr = [1, 2, 3, 4, 5]; //the array
OK, lancez simplement ceci:
arr.length = 0; //change the length
et le résultat est:
[] //result
moyen facile de vider un tableau ...
Également utiliser une 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 une manière délicate à laquelle vous pouvez penser, par exemple quelque chose comme ceci:
arr.splice(0, arr.length); //[]
Donc si arr a 5 éléments, il séparera 5 éléments de 0, ce qui signifie qu'il ne restera plus rien dans le tableau.
Également d'autres moyens, comme simplement réaffecter le tableau, par exemple:
arr = []; //[]
Si vous examinez les fonctions de tableau, vous pouvez le faire de nombreuses autres manières, mais la plus recommandée pourrait être de changer la longueur.
Comme je l'ai dit en premier lieu, vous pouvez également créer un prototype remove (), car c'est la réponse à votre question. vous pouvez simplement choisir l'une des méthodes ci-dessus et le transformer en objet Array en JavaScript, comme suit:
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 de votre application javascript:
arr.remove(); //[]
Si vous utilisez
a = [];
Ensuite, vous affectez une nouvelle référence de tableau à a, si la référence dans a est déjà affectée à une autre variable, elle ne videra pas non plus ce tableau et, par conséquent, le garbage collector ne collectera pas cette mémoire.
Par ex.
var a=[1,2,3];
var b=a;
a=[];
console.log(b);// It will print [1,2,3];
ou
a.length = 0;
Lorsque nous spécifions a.length, nous ne faisons que réinitialiser les limites du tableau et la mémoire pour les éléments restants du tableau sera connectée par le garbage collector.
Au lieu de ces deux solutions sont meilleures.
a.splice(0,a.length)
et
while(a.length > 0) {
a.pop();
}
Comme dans la réponse précédente de kenshou.html, la deuxième méthode est plus rapide.
Utilisez une version modifiée de la suggestion initiale de Jan :
var originalLength = A.length;
for (var i = originalLength; i > 0; i--) {
A.pop();
}
Si vous utilisez des constantes, vous n’avez pas le choix:
const numbers = [1, 2, 3]
Vous ne pouvez pas modifier:
numbers = []
Vous ne pouvez que tronquer:
numbers.length = 0
Je suis surpris que personne n'ait encore suggéré cela:
let xs = [1,2,3,4];
for (let i in xs)
delete xs[i];
Cela donne un tableau dans un état assez 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)
Pour vider un emplacement de mémoire actuel 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 étendez un tableau en modifiant sa propriété length, le nombre d'éléments réels augmente.pop(): La méthode pop supprime le dernier élément d'un tableau et retourne la valeur supprimée.shift(): la méthode shift supprime l'élément à l'index zéro et décale les valeurs à des index consécutifs vers le bas, puis renvoie l'élément supprimé. valeur.
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 mémoire en utilisantArray constructorouarray 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 d'origine, avec une nouvelle adresse mémoire, de sorte que toute modification sur cloneArr n'affectera pas un réel | 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);