9 Sätt att ta Bort Element Från En JavaScript-Array – Plus Hur man på ett Säkert sätt Klara av JavaScript-array

JavaScript-array tillåter dig att koncernens värderingar och iterera över dem. Du kan lägga till och ta bort arrayelement på olika sätt. Tyvärr finns det inte en enkel Array.ta bort metoden.

så, Hur tar du bort ett element från en JavaScript-array?,

istället för en borttagningsmetod har JavaScript-matrisen en mängd olika sätt att rensa matrisvärden.

Du kan ta bort element från slutet av en matris med pop, från början med shift eller från mitten med splice. Metoden JavaScript Array filter för att skapa en ny array med önskade objekt, ett mer avancerat sätt att ta bort oönskade element.,licitly ta bort arrayelement med Delete Operator

rensa eller återställa en JavaScript – Array

sammanfattning

det finns olika metoder och tekniker som du kan använda för att ta bort element från JavaScript – arrayer:

• pop – tar bort från slutet av en Array
• shift – tar bort från början av en Array
• splice-tar bort från ett specifikt Arrayindex
• filter-låter dig programmatiskt ta bort element från en array

Du kommer också att lära dig några andra sätt du kan ta bort element från en array som kanske inte är så uppenbart, som med lodash.,

ta bort element från slutet av en JavaScript-Array

JavaScript-Array element kan tas bort från slutet av en array genom att ställa in längdegenskapen till ett värde mindre än det aktuella värdet. Alla element vars index är större än eller lika med den nya längden kommer att tas bort.

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

popmetoden tar bort det sista elementet i matrisen, returnerar elementet och uppdaterar längdegenskapen. Pop-metoden ändrar matrisen på vilken den åberopas, det betyder att till skillnad från att använda radera det sista elementet tas bort helt och matrislängden minskas.,

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

ta bort element från början av en JavaScript-matris

hur tar du bort det första elementet i en JavaScript-matris?

shift-metoden fungerar ungefär som pop-metoden, förutom att den tar bort det första elementet i en JavaScript-array istället för det sista.

det finns inga parametrar eftersom shift-metoden bara tog bort det första matriselementet. När elementet tas bort flyttas de återstående elementen ner.,

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

shift-metoden returnerar elementet som har tagits bort, uppdaterar indexerna för återstående element och uppdaterar egenskapen längd. Det ändrar matrisen på vilken den åberopas.

om det inte finns några element, eller matrislängden är 0, returnerar metoden odefinierad.

använda skarv för att ta bort arrayelement i JavaScript

skarvmetoden kan användas för att lägga till eller ta bort element från en array. Det första argumentet anger var du ska börja lägga till eller ta bort element. Det andra argumentet anger antalet element som ska tas bort., De tredje och efterföljande argumenten är frivilliga; de anger element som ska läggas till i matrisen.

här använder vi splice-metoden för att ta bort två element från position tre (nollbaserat index):

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

en matris som innehåller de borttagna elementen returneras med splice-metoden. Du kan se den borttagna matrisen innehåller och den ursprungliga matrisen innehåller de återstående värdena.

splice-metoden kan också användas för att ta bort en rad element från en array.,

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

ta bort Matrisobjekt efter värde med skarv

om du vet vilket värde du vill ta bort från en matris kan du använda splice-metoden. Först måste du identifiera indexet för målobjektet. Du använder sedan indexet som startelement och tar bort bara ett element.

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

detta är ett enkelt exempel där elementen är heltal. Om du har en rad objekt som du skulle behöva en mer sofistikerad rutin.

detta fungerar om du bara vill ta bort ett enda objekt., Om du vill ta bort flera objekt som matchar dina kriterier finns det en glitch.

eftersom objekten tas bort från matrisen ökar indexet fortfarande och nästa objekt efter att ditt matchade värde har hoppat över.

den enkla lösningen är att ändra ovanstående exempel för att minska indexvariabeln så att den inte hoppar över nästa objekt i matrisen.

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

i det ändrade exemplet lade jag till 2 ytterligare 5 värden i matrisen. Jag lade också till ”i–;” efter skarvsamtalet.

nu när du kör slingan kommer det att ta bort varje matchande objekt.,

Tack vare Kristian Sletten för att påpeka problemet med slingan hoppar över följande objekt.

använda metoden Array filter för att ta bort objekt efter värde

till skillnad från splice-metoden skapar filter en ny array. filter () muterar inte matrisen som det kallas, men returnerar en ny array.

filter() har en enda parameter, en återuppringningsmetod. Återuppringning utlöses när filtermetoden itererar genom matriselementen. Det kommer att passera tre värden till återuppringning: det aktuella värdet eller elementet, det aktuella matrisindexet och hela matrisen.,

återuppringningsmetoden ska returnera antingen sant eller falskt. Det är ditt ansvar att testa värdet (elementet) för att se om det uppfyller dina kriterier. Om det gör du kan återvända sant. Element som returnerar sant läggs till i den nya, filtrerade matrisen.

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

Du bör notera att en ny matris med matchande värden returneras. Den ursprungliga arrayen lämnas orörd. Jag tycker att det här är användbart eftersom jag ofta vill behålla en original datakälla, men hämta delmängder baserat på olika logiska uppsättningar.,

Lodash Array Remove Method

Ibland är verktygsbibliotek det bästa sättet att lösa mer komplexa problem. Lodash ger en rik uppsättning av array manipulation metoder, en är bort.

lodash remove-metoden fungerar ungefär som matrisfiltermetoden, men ungefär i omvänd ordning. Det sparar inte de ursprungliga matrisvärdena, men tar bort matchande element. Det returnerar matchande element som en ny array.

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

gör en borttagningsmetod

som jag nämnde tidigare finns det ingen native Array.ta bort metoden., Lodash lodash-metoden löser detta problem, men du kanske inte alltid vill använda Lodash. Det betyder inte att du inte kan skapa en verktygsmetod. John Resig gav oss en modell att följa, men han utökade Matrisprototypen, vilket är en dålig idé.

istället skapade jag en Array remove utility-metod som kan läggas till i ett helper-eller verktygsbibliotek. Liksom lodash ta bort metoden den första parametern är målmatrisen. Den använder Array.filter för att returnera element som inte matchar ett värde.

den här metoden är enkel, den förutsätter enkla värden som siffror eller strängar., Du kan ändra den här metoden för att använda en customcomparison-metod, men jag tror att det skulle vara lättare att bara använda filtermetoden direkt.

explicit ta bort arrayelement med Delete Operator

Du kan ta bort specifika arrayelement med Delete operator:

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

användning av delete operator påverkar inte egenskapen längd. Det påverkar inte heller indexen för efterföljande element. Matrisen blir gles, vilket är ett fint sätt att säga att det borttagna objektet inte tas bort men blir odefinierat. Jämför med delete med splice-metoden som beskrivs nedan.,

delete-operatören är utformad för att ta bort egenskaper från JavaScript-objekt, vilka arrayer är objekt.

anledningen till att elementet inte faktiskt tas bort från matrisen är att delete-operatören handlar mer om att frigöra minne än att ta bort ett element. Minnet frigörs när det inte finns några fler referenser till värdet.

rensa eller återställa en JavaScript-Array

vad händer om du vill tömma en hel array och bara dumpa alla dess element?

det finns ett par tekniker som du kan använda för att skapa en tom eller ny array.,

den enklaste och snabbaste tekniken är att ställa in en arrayvariabel till en tom array:

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

problemet som detta kan skapa är när du har referenser till variabeln. Referenserna till denna variabel ändras inte, de kommer fortfarande att hålla den ursprungliga matrisens värden. Detta kan naturligtvis skapa en bugg.

detta är ett över förenklat exempel på detta scenario:

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

ett enkelt knep för att rensa en array är att ställa in dess längdegenskap till 0.,

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

en annan, typ av onaturlig teknik, är att använda skarvmetoden, som passerar matrislängden som den andra parametern. Detta kommer att returnera en kopia av de ursprungliga elementen, vilket kan vara praktiskt för ditt scenario.

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

de två sista teknikerna skapar inte en ny array, utan ändrar matrisens element. Det betyder att referenser också bör uppdateras.

det finns ett annat sätt, med ett tag slinga. Det känns lite konstigt för mig, men samtidigt ser fint ut, så det kan imponera på några vänner!,

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

inte ett sätt jag skulle gå om att rensa en JavaScript-array, men det fungerar och det är läsbart. Vissa prestanda test har också visat att detta är den snabbaste tekniken, så kanske det är bättre än jag ursprungligen trodde!

sammanfattning

Ta bort JavaScript-Matrisobjekt är viktigt för att hantera dina data. Det finns inte en enda ”ta bort” metod tillgänglig, men det finns olika metoder och tekniker som du kan använda för att rensa oönskade array objekt.

den här artikeln har granskat dessa metoder och hur de kan användas., Du såg också hur man skapar en hjälpmetod som gör att ta bort objekt från en array lite enklare och konsekvent.

Tack vare Rob Sherwood för att påpeka några syntaktiska stavfel!