Hantera element i JavaScript-arrayer
När du utvecklar i JavaScript kommer du ofta att arbeta med arrayer. En vanlig uppgift är att ta bort ett element från en array. Denna artikel utforskar olika metoder för att göra just det.
I JavaScript fungerar en array som ett globalt objekt för att organisera och lagra data. En array kan innehålla en samling av noll eller fler värden av olika typer, ordnade i en specifik sekvens. För att nå ett specifikt värde i arrayen använder man dess numeriska index, med start från noll.
Vi kommer att gå igenom hur man deklarerar arrayer i JavaScript, undersöka varför man skulle behöva ta bort element från dem och presentera olika sätt att ta bort dessa element, antingen genom att ändra den ursprungliga arrayen eller genom att skapa en ny array utan det element man vill ta bort.
Syntax för JavaScript-arrayer
Arrayer tillåter dig att hantera flera värden under ett enda variabelnamn. Om du till exempel vill lagra namnen på alla sju kontinenter kan du göra det i en array istället för att skapa sju separata variabler:
const continent1 = "Asien";
const continent2 = "Afrika";
const continent3 = "Nordamerika";
const continent4 = "Sydamerika";
const continent5 = "Antarktis";
const continent6 = "Europa";
const continent7 = "Australien";
Detta kan vi skriva som en mer kompakt array:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
Istället för sju variabler har vi nu en enda variabel där hakparenteser definierar arrayen och dess innehåll.
För att få fram det första elementet (kontinenten) i vår array kan du använda `console.log(kontinenter[0])`. Du kan även testa koden med en online JavaScript-kompilator.
Du kommer att se detta i konsolen:
För att få tag på det sista elementet i arrayen kan du använda `console.log(kontinenter[6])`. Tänk på att indexering i JavaScript börjar från 0.
Varför ta bort ett element från en JavaScript-array?
JavaScript-arrayer kan innehålla strängar, siffror och andra datatyper. Ibland måste man ändra en array genom att ta bort element. Här är några exempel:
- Dynamisk datahantering: Arrayer används ofta för att lagra data som ändras. Beroende på ändrade krav kan du behöva ta bort ett element eller flera.
- Dataintegritet: För att säkerställa att data i dina arrayer är uppdaterade, kan gammal eller felaktig information behöva tas bort.
- Minneshantering: Stora datamängder kan påverka prestandan för en applikation. Genom att ta bort onödig information från arrayer kan minnesanvändningen optimeras.
Ta bort element utan att ändra den ursprungliga arrayen
Om du inte vill ändra den ursprungliga arrayen när du tar bort ett element, är den bästa metoden att skapa en ny array. Detta är särskilt viktigt när arrayen skickas som ett funktionsargument. Här är några sätt att göra det:
#1. Använda slice() för att ta bort ett element
Vi kan ta bort det första elementet från vår array med `slice()` metoden. Om vi har arrayen:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
Vi kan skapa en ny array där det första elementet inte finns med:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let nyaKontinenter = kontinenter.slice(1);
console.log(nyaKontinenter);
Resultatet blir:
[
'Afrika',
'Nordamerika',
'Sydamerika',
'Antarktis',
'Europa',
'Australien'
]
#2. Ta bort det första elementet med filter()
Metoden `filter()` skapar en ny array med de element som uppfyller ett visst villkor. Vi kan skapa ett villkor som exkluderar det första elementet i arrayen:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let nyaKontinenter = kontinenter.filter((kontinent, index) => index !== 0);
console.log(nyaKontinenter);
Resultatet:
[
'Afrika',
'Nordamerika',
'Sydamerika',
'Antarktis',
'Europa',
'Australien'
]
#3. Kombinera slice() och concat() för att ta bort ett element från valfri position
Våra exempel har tagit bort det första elementet i arrayen. Men vad händer om vi vill ta bort, till exempel, det tredje eller fjärde elementet? För att göra det måste vi kombinera `slice()` med `concat()`.
I det här exemplet tar vi bort det fjärde elementet:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let kontinenterUtanFjärde = kontinenter.slice(0, 3).concat(kontinenter.slice(4));
console.log(kontinenterUtanFjärde);
Resultatet blir:
[
'Asien',
'Afrika',
'Nordamerika',
'Antarktis',
'Europa',
'Australien'
]
`slice()` skapar här två nya delar av arrayen. Sedan kombinerar vi dessa två delar med `concat()`, och det fjärde elementet utesluts. Denna metod kan användas för att ta bort vilket element som helst i arrayen.
#4. Använda en for-loop och push() för att ta bort ett element
Vi kan ta bort det femte elementet i vår lista med hjälp av en for-loop och metoden `push()`. Här är koden:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let kontinenterUtanFemte = [];
for (let i = 0; i < kontinenter.length; i++) {
if (i !== 4) {
kontinenterUtanFemte.push(kontinenter[i]);
}
}
console.log(kontinenterUtanFemte);
For-loopen går igenom varje element i vår array. Med hjälp av en if-sats kontrollerar vi om indexet inte är 4. Om villkoret är sant, läggs elementet till i den nya arrayen.
När koden körs får vi följande resultat:
[
'Asien',
'Afrika',
'Nordamerika',
'Sydamerika',
'Europa',
'Australien'
]
Ta bort element genom att ändra den ursprungliga arrayen
Du kan ändra den ursprungliga arrayen genom att ta bort element. Här är några metoder för att göra det:
#1. Ta bort ett element med pop()
Du kan använda metoden `pop()` för att ta bort det sista elementet från arrayen. Om vår ursprungliga array är:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
Vi kan använda den här koden för att ta bort det sista elementet:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let sistaKontinent = kontinenter.pop();
console.log("Uppdaterad array:", kontinenter);
Den uppdaterade arrayen:
Uppdaterad array: [
'Asien',
'Afrika',
'Nordamerika',
'Sydamerika',
'Antarktis',
'Europa'
]
Du kan också kontrollera det borttagna elementet med följande kod:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let sistaKontinent = kontinenter.pop();
console.log("Borttagen kontinent:", sistaKontinent);
#2. Ta bort ett element med splice()
Metoden `splice()` låter dig ta bort element från ett specifikt index i arrayen. Vi kan ta bort ett element från index 2 med den här koden:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let borttagetElement = kontinenter.splice(2, 1);
console.log("Borttaget element:", borttagetElement);
console.log("Uppdaterad array:", kontinenter);
Denna kod ändrar den ursprungliga arrayen och returnerar en ny array. Koden har också två `console.log` satser som skriver ut det borttagna elementet och den uppdaterade arrayen.
När koden körs blir resultatet detta:
Borttaget element: [ 'Nordamerika' ]
Uppdaterad array: [
'Asien',
'Afrika',
'Sydamerika',
'Antarktis',
'Europa',
'Australien'
]
#3. Ta bort det första elementet med shift()
Metoden `shift()` tar bort det första elementet i en JavaScript array. Denna metod ändrar den ursprungliga arrayen och returnerar även det borttagna elementet. Vi använder samma array med kontinenter.
Vi kan ta bort det första elementet så här:
let kontinenter = ['Asien', 'Afrika', 'Nordamerika', 'Sydamerika', 'Antarktis', 'Europa', 'Australien'];
let borttagenKontinent = kontinenter.shift();
console.log("Borttagen kontinent:", borttagenKontinent);
console.log("Uppdaterad array:", kontinenter);
Vi har här två `console.log` satser där den ena skriver ut den ”borttagna kontinenten” och den andra den ”uppdaterade arrayen”.
När vi kör koden får vi det här resultatet:
Borttagen kontinent: Asien
Uppdaterad array: [
'Afrika',
'Nordamerika',
'Sydamerika',
'Antarktis',
'Europa',
'Australien'
]
Lägg till ett element i en array i JavaScript
Vi har nu sett hur man tar bort element från en array. Men det finns tillfällen då man vill lägga till nya element i en array. Här är några metoder för att göra det:
#1. push()-metoden
Vi använder denna kod för exemplen:
let färger = ['röd', 'blå', 'grön', 'gul', 'lila'];
Vi kan lägga till en ny färg i slutet av arrayen med `push()` metoden.
let färger = ['röd', 'blå', 'grön', 'gul', 'lila'];
färger.push('orange');
Vår array kommer nu att innehålla sex färger.
#2. unshift()-metoden
Du kan lägga till ett nytt element i början av arrayen med metoden `unshift()`. Vi kan använda samma array med färger:
let färger = ['röd', 'blå', 'grön', 'gul', 'lila'];
färger.unshift('orange');
console.log(färger);
Som du kan se i skärmdumpen nedan är orange nu den första färgen i vår array:
Slutsats
Nu har du lärt dig hur man tar bort element i en JavaScript-array och skapa effektiv kod. Vilken metod du använder beror på vad du vill uppnå, din kompetens och personliga preferenser.
`slice()` metoden är ett bra val när du letar efter en enkel metod och inte vill ändra den ursprungliga arrayen. Kombinationen av `slice()` och `concat()` är ett perfekt val när du vill ta bort ett element från vilken position som helst.
Ta gärna en titt på vår artikel om JavaScript-fuskblad för utvecklare.