9 manieren om elementen uit een JavaScript-array te verwijderen-Plus hoe JavaScript-arrays veilig te wissen

met JavaScript-arrays kunt u waarden groeperen en erover herhalen. U kunt array-elementen op verschillende manieren toevoegen en verwijderen. Helaas is er geen eenvoudige Array.verwijder methode.

dus, hoe verwijder je een element uit een JavaScript array?,

in plaats van een delete-methode, heeft de JavaScript-array een verscheidenheid aan manieren waarop u array-waarden kunt opschonen.

u kunt elementen uit het einde van een array verwijderen met pop, vanaf het begin met shift, of vanuit het midden met splice. De JavaScript Array filter methode om een nieuwe array met gewenste items te maken, een meer geavanceerde manier om ongewenste elementen te verwijderen.,licitly Verwijderen Matrix Elementen met Behulp van de Operator Delete

Wissen of opnieuw instellen van een JavaScript-Array

Samenvatting

Er zijn verschillende methoden en technieken die u kunt gebruiken om de elementen te verwijderen van JavaScript-arrays:

• pop – Verwijdert van het Einde van een Array
• shift – hiermee Verwijdert u vanaf het begin van een Array
• splice – verwijdert van een specifieke Array-index
• filter – hiermee kunt u programatically verwijderen van elementen uit een Array

Je leert ook een aantal andere manieren waarop u kunt verwijderen van elementen uit een array die wellicht niet zo voor de hand, zoals met LoDash.,

elementen uit het einde van een JavaScript-Array verwijderen

JavaScript-Array-elementen kunnen worden verwijderd uit het einde van een array door de eigenschap length in te stellen op een waarde die kleiner is dan de huidige waarde. Elk element waarvan de index groter is dan of gelijk is aan de nieuwe lengte zal worden verwijderd.

 var ar = ; ar.length = 4; // set length to remove elements console.log( ar ); // 

de pop-methode verwijdert het laatste element van de array, retourneert dat element en werkt de lengte-eigenschap bij. De pop methode wijzigt de array waarop het wordt aangeroepen, dit betekent in tegenstelling tot het gebruik van delete het laatste element volledig wordt verwijderd en de array lengte verminderd.,

 var ar = ; ar.pop(); // returns 6 console.log( ar ); // 

elementen uit het begin van een JavaScript-Array verwijderen

Hoe verwijder je het eerste element van een JavaScript-array?

de shift methode werkt net als de pop methode behalve dat het het eerste element van een JavaScript array verwijdert in plaats van het laatste.

Er zijn geen parameters omdat de shift-methode alleen het eerste array-element verwijderde. Wanneer het element wordt verwijderd worden de resterende elementen naar beneden verschoven.,

 var ar = ; ar.shift(); // returns "zero" console.log( ar ); // 

de shift methode geeft het element terug dat is verwijderd, werkt de indexen van de resterende elementen bij en werkt de lengte eigenschap bij. Het wijzigt de array waarop het wordt aangeroepen.

als er geen elementen zijn, of de array Lengte 0 is, geeft de methode ongedefinieerd terug.

Splice gebruiken om Array-elementen in JavaScript te verwijderen

de splice-methode kan worden gebruikt om elementen uit een array toe te voegen of te verwijderen. Het eerste argument specificeert de locatie waar te beginnen met het toevoegen of verwijderen van elementen. Het tweede argument specificeert het aantal te verwijderen elementen., De derde en volgende argumenten zijn optioneel; ze specificeren elementen die aan de array moeten worden toegevoegd.

Hier gebruiken we de splice methode om twee elementen te verwijderen vanaf positie drie (nul gebaseerde index):

 var arr = ; var removed = arr.splice(2,2); 

een array met de verwijderde elementen wordt geretourneerd door de splice methode. U kunt zien dat de verwijderde array bevat en de originele array de resterende waarden bevat.

de splice methode kan ook worden gebruikt om een reeks elementen uit een array te verwijderen.,

 var list = ; list.splice(0, 2); // Starting at index position 0, remove two elements and retains .

Array-Items verwijderen met waarde Splice

Als u weet welke waarde u uit een array wilt verwijderen, kunt u de splice-methode gebruiken. Eerst moet u de index van het doelitem identificeren. U gebruikt dan de index als het Start-element en verwijdert slechts één element.

 var arr = ; for( var i = 0; i < arr.length; i++){ if ( arr === 5) { arr.splice(i, 1); } } //=> 

Dit is een eenvoudig voorbeeld waar de elementen gehele getallen zijn. Als je een reeks objecten hebt, heb je een meer verfijnde routine nodig.

Dit werkt als u slechts één item wilt verwijderen., Als u meerdere items wilt verwijderen die aan uw criteria voldoen, is er een glitch.

als de items uit de array worden verwijderd, stijgt de index nog steeds en wordt het volgende item na de overeenkomende waarde overgeslagen.

De eenvoudige oplossing is om het bovenstaande voorbeeld te wijzigen om de index variabele te decrementeren zodat het volgende item in de array niet wordt overgeslagen.

 var arr = ; for( var i = 0; i < arr.length; i++){ if ( arr === 5) { arr.splice(i, 1); i--; } } //=> 

In het gewijzigde voorbeeld heb ik 2 extra 5 waarden aan de array toegevoegd. Ik heb ook toegevoegd ‘i -;’ na de splice call.

wanneer u nu de lus uitvoert, zal het elk overeenkomend item verwijderen.,

Met dank aan Kristian Sletten voor het wijzen op het probleem met de lus overslaan van het volgende item.

met behulp van de Array filtermethode om Items te verwijderen met waarde

In tegenstelling tot de splice methode, maakt filter een nieuwe array aan. filter() muteert niet de array waarop het wordt aangeroepen, maar geeft een nieuwe array terug.

filter() heeft een enkele parameter, een callback methode. De callback wordt geactiveerd als de filtermethode itereert door de array-elementen. Het zal drie waarden doorgeven aan de callback: de huidige waarde of element, de huidige array index en de volledige array.,

de callback methode moet true of false teruggeven. Het is uw verantwoordelijkheid om de waarde (element) te testen om te zien of het aan uw criteria voldoet. Als dat zo is, kun je true retourneren. Elementen die true retourneren worden toegevoegd aan de nieuwe, gefilterde array.

 var array = ; var filtered = array.filter(function(value, index, arr){ return value > 5; }); //filtered => //array => 

merk op dat een nieuwe array met overeenkomende waarden wordt geretourneerd. De originele array blijft onaangeroerd. Ik vind dit nuttig omdat ik vaak een originele gegevensbron wil behouden, maar subsets wil ophalen op basis van verschillende logische sets.,

de Lodash array Remove Method

soms zijn utility libraries de beste manier om meer complexe problemen op te lossen. Lodash biedt een rijke set van array manipulatie methoden, waarvan één verwijderen.

De lodash remove methode werkt net als de array filter methode, maar in omgekeerde richting. Het slaat de oorspronkelijke array-waarden niet op, maar verwijdert overeenkomende elementen. Het Retourneert de overeenkomende elementen als een nieuwe array.

var array = ;var evens = _.remove(array, function(n) { return n % 2 === 0;});console.log(array);// => console.log(evens);// => 

het maken van een verwijdermethode

zoals ik al eerder zei, is er geen native Array.verwijder methode., Lodash lodash lost dit probleem wel op, maar je wilt misschien niet altijd Lodash gebruiken. Dit betekent niet dat u geen hulpprogramma methode kunt maken. John Resig gaf ons een model om te volgen, maar hij breidde het Array prototype uit, wat een slecht idee is.

in plaats daarvan heb ik een Array remove Utility methode gemaakt die kan worden toegevoegd aan een helper of utility bibliotheek. Net als de lodash remove methode is de eerste parameter de target array. Het maakt gebruik van Array.filter om elementen te retourneren die niet overeenkomen met een waarde.

Deze methode is eenvoudig, het gaat uit van eenvoudige waarden zoals getallen of tekenreeksen., Je zou deze methode kunnen wijzigen om een customvergelijking methode te gebruiken, maar ik denk dat het makkelijker zou zijn om gewoon de filtermethode direct te gebruiken.

expliciet Array-elementen verwijderen met behulp van de Delete-Operator

u kunt specifieke array-elementen verwijderen met behulp van de delete-operator:

 var ar = ; delete ar; // delete element with index 4 console.log( ar ); // alert( ar ); // 1,2,3,4,,6

met behulp van de Delete-operator heeft dit geen invloed op de lengte-eigenschap. Het heeft ook geen invloed op de indexen van de volgende elementen. De array wordt schaars, wat een mooie manier is om te zeggen dat het verwijderde item niet wordt verwijderd, maar wordt ongedefinieerd. Vergelijk met delete met de hieronder beschreven splice methode.,

De delete operator is ontworpen om eigenschappen van JavaScript-objecten te verwijderen, welke arrays objecten zijn.

de reden dat het element niet daadwerkelijk uit de array wordt verwijderd is dat de delete-operator meer gaat over het vrijmaken van geheugen dan over het verwijderen van een element. Het geheugen wordt vrijgemaakt als er geen verwijzingen meer zijn naar de waarde.

een JavaScript-Array wissen of resetten

Wat als u een hele array wilt legen en alle elementen wilt dumpen?

er zijn een paar technieken die u kunt gebruiken om een lege of nieuwe array aan te maken.,

De eenvoudigste en snelste techniek is om een array variabele in te stellen op een lege array:

var ar = ;//do stuffar = ;//a new, empty array!

het probleem dat dit kan creëren is wanneer u referenties naar de variabele hebt. De verwijzingen naar deze variabele zullen niet veranderen, ze zullen nog steeds de waarden van de oorspronkelijke array bevatten. Dit kan natuurlijk een bug🐛maken.

Dit is een meer dan vereenvoudigd voorbeeld van dit scenario:

var arr1 = ;var arr2 = arr1; // Reference arr1 by another variable arr1 = ; console.log(arr2); // Output 

een eenvoudige truc om een array te wissen is om de lengte-eigenschap in te stellen op 0.,

var ar = ;console.log(ar); // Output ar.length = 0;console.log(ar); // Output 

een andere, soort onnatuurlijke techniek is het gebruik van de splice methode, waarbij de array lengte als de tweede parameter wordt doorgegeven. Dit retourneert een kopie van de originele elementen, die handig kunnen zijn voor uw scenario.

var ar = ;console.log(ar); // Output ar.splice(0, ar.length);console.log(ar); // Output 

de laatste twee technieken maken geen nieuwe array, maar veranderen de elementen van de array. Dit betekent dat verwijzingen ook moeten worden bijgewerkt.

er is een andere manier, met behulp van een while lus. Het voelt een beetje vreemd voor mij, maar op hetzelfde moment ziet er chique, dus het kan indruk maken op sommige vrienden!,

var ar = ;console.log(ar); // Output while (ar.length) { ar.pop(); }console.log(ar); // Output 

geen manier om een JavaScript array te wissen, maar het werkt en het is leesbaar. Sommige prestatietesten hebben ook aangetoond dat dit de snelste techniek, dus misschien is het beter dan ik oorspronkelijk dacht!

samenvatting

het verwijderen van JavaScript Array-items is belangrijk voor het beheren van uw gegevens. Er is geen enkele ‘verwijderen’ methode beschikbaar, maar er zijn verschillende methoden en technieken die u kunt gebruiken om ongewenste array items te zuiveren.

Dit artikel heeft deze methoden beoordeeld en hoe ze kunnen worden gebruikt., Je zag ook hoe je een helper methode die maakt het verwijderen van items uit een array een beetje gemakkelijker en consistent te maken.

Met dank aan Rob Sherwood voor het wijzen op enkele syntactische typefouten!