Når du jobber med JavaScript-kode, vil du ofte støte på arrayer. Et sentralt spørsmål er da: Hvordan fjerner man et element fra en array i JavaScript?
I JavaScript er en array et globalt objekt som lar deg lagre data. En array kan inneholde en liste med null eller flere datatyper, eller en ordnet samling. For å få tilgang til spesifikke elementer, bruker vi nummererte indekser som starter med 0.
Denne artikkelen vil utforske syntaksen for å lage arrayer i JavaScript, hvorfor det kan være nødvendig å fjerne elementer, og ulike metoder for å gjøre dette. Vi vil se på både metoder som endrer den opprinnelige arrayen (muterende), og de som ikke gjør det (ikke-muterende).
Syntaks for en JavaScript-array
Arrayer lar oss lagre flere verdier i én enkelt variabel. For eksempel, hvis vi ønsker å representere de syv kontinentene, kunne vi skrive:
const continent1 = "Asia";
const continent2 = "Afrika";
const continent3 = "Nord-Amerika";
const continent4 = "Sør-Amerika";
const continent5 = "Antarktis";
const continent6 = "Europa";
const continent7 = "Australia";
Dette kan imidlertid forkortes og representeres i en array slik:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
I stedet for syv variabler, har vi nå bare én, og bruker firkantede parenteser for å angi objektene.
For å få tilgang til det første kontinentet, kan vi bruke: console.log(kontinenter[0]).
Du kan teste koden din ved hjelp av en gratis online JavaScript-kompilator.
Dette vil gi følgende utskrift:
For å få tilgang til det siste elementet, bruker vi console.log(kontinenter[6]).
Husk at indekser i JavaScript starter fra 0.
Hvorfor fjerne et element fra en JavaScript-array?
JavaScript-arrayer kan brukes med strenger, tall og ulike datastrukturer. Det er likevel tilfeller hvor du kanskje må fjerne et eller flere elementer. Her er noen eksempler:
- Håndtere dynamiske data: Arrayer kan lagre dynamiske datasett. Du kan trenge å fjerne elementer basert på endrede krav.
- Opprettholde dataintegritet: Du bør fjerne utdatert informasjon for å sikre at datastrukturene er oppdaterte.
- Administrere minne: Størrelsen på koden din påvirker applikasjonens ytelse. Du kan fjerne unødvendig informasjon for å optimalisere koden.
Fjern elementer uten å mutere den opprinnelige arrayen
Når du ønsker å fjerne et element uten å endre den opprinnelige arrayen, er det best å lage en ny array uten det elementet du vil fjerne. Dette er spesielt nyttig når arrayen brukes som parameter i en funksjon. Her er noen metoder:
#1. Fjern et element ved hjelp av slice()
Vi kan fjerne det første kontinentet fra listen ved å bruke slice()-metoden.
Her er den opprinnelige koden:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
Vi lager en ny array slik:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det første elementet ved hjelp av slice()
let nyeKontinenter = kontinenter.slice(1);
console.log(nyeKontinenter);
Utskriften vil være:
[
'Afrika',
'Nord-Amerika',
'Sør-Amerika',
'Antarktis',
'Europa',
'Australia'
]
#2. Fjern det første elementet ved hjelp av filter()
filter()-metoden lager en ny array der elementer må oppfylle en gitt betingelse. Vi kan lage en betingelse som ekskluderer det første elementet. Slik gjør vi det:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det første elementet ved hjelp av filter()
let nyeKontinenter = kontinenter.filter((kontinent, indeks) => indeks !== 0);
console.log(nyeKontinenter);
Kjører vi koden, får vi:
[
'Afrika',
'Nord-Amerika',
'Sør-Amerika',
'Antarktis',
'Europa',
'Australia'
]
#3. Bruk slice() sammen med concat() for å fjerne et element fra en vilkårlig posisjon
Det første eksemplet fjernet det første elementet. Hva hvis vi vil fjerne for eksempel det tredje eller fjerde elementet? Da må vi kombinere slice() med concat(). I dette eksemplet fjerner vi det fjerde elementet:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det fjerde elementet ved hjelp av slice() og concat()
let kontinenterUtenFjerde = kontinenter.slice(0, 3).concat(kontinenter.slice(4));
console.log(kontinenterUtenFjerde);
Utskriften blir:
[
'Asia',
'Afrika',
'Nord-Amerika',
'Antarktis',
'Europa',
'Australia'
]
slice() lager to nye «skiver». concat() kombinerer disse, men utelater det fjerde elementet. Denne metoden kan brukes for alle elementer i arrayen.
#4. Fjern et element med for-løkke og push()
Vi kan utelate det femte elementet ved å bruke en for-løkke og push(). Se koden:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det femte elementet ved hjelp av en for-løkke og push()
let kontinenterUtenFemte = [];
for (let i = 0; i < kontinenter.length; i++) {
if (i !== 4) {
kontinenterUtenFemte.push(kontinenter[i]);
}
}
console.log(kontinenterUtenFemte);
for-løkken itererer gjennom hvert element i arrayen. Vi bruker en if-setning for å sjekke om gjeldende indeks ikke er lik fire. Hvis betingelsen er sann, legges elementet til i en ny array.
Når vi kjører koden, får vi:
[
'Asia',
'Afrika',
'Nord-Amerika',
'Sør-Amerika',
'Europa',
'Australia'
]
Fjern elementer ved å mutere den opprinnelige arrayen
Du kan også endre strukturen til den opprinnelige arrayen ved å fjerne elementer. Her er noen metoder:
#1. Fjern et element med pop()
pop() fjerner det siste elementet fra arrayen. Opprinnelig kode:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
Vi kan fjerne det siste elementet slik:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det siste elementet med pop()
let sisteKontinent = kontinenter.pop();
Kjører vi:
console.log("Oppdatert Kontinenter Array:", kontinenter);
Den oppdaterte listen blir:
Oppdatert Kontinenter Array: [
'Asia',
'Afrika',
'Nord-Amerika',
'Sør-Amerika',
'Antarktis',
'Europa'
]
Det fjernede elementet kan sjekkes med:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det siste elementet med pop()
let sisteKontinent = kontinenter.pop();
console.log("Fjernet Kontinent:", sisteKontinent);
#2. Fjern et element med splice()
splice() lar deg fjerne elementer fra en spesifikk indeks. Vi kan fjerne elementet ved indeks 2 slik:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern elementet ved indeks 2 med splice()
let fjernetElement = kontinenter.splice(2, 1);
console.log("Fjernet Element:", fjernetElement);
console.log("Oppdatert Kontinenter Array:", kontinenter);
Denne koden endrer den opprinnelige arrayen og returnerer en ny array med de fjernede elementene. Vi har to console.log setninger som sjekker «Fjernet Element» og «Oppdatert Kontinenter Array».
Kjører vi hele koden, får vi:
Fjernet Element: [ 'Nord-Amerika' ]
Oppdatert Kontinenter Array: [
'Asia',
'Afrika',
'Sør-Amerika',
'Antarktis',
'Europa',
'Australia'
]
#3. Fjern det første elementet med shift()
shift() fjerner det første elementet fra arrayen. Den modifiserer den opprinnelige arrayen og returnerer det fjernede elementet. Vi bruker igjen kontinent-arrayen.
Vi kan fjerne det første elementet slik:
let kontinenter = ['Asia', 'Afrika', 'Nord-Amerika', 'Sør-Amerika', 'Antarktis', 'Europa', 'Australia'];
// Fjern det første elementet med shift()
let fjernetKontinent = kontinenter.shift();
console.log("Fjernet Kontinent:", fjernetKontinent);
console.log("Oppdatert Kontinenter Array:", kontinenter);
Vi har to console.log setninger, en som returnerer «Fjernet Kontinent», og en som returnerer «Oppdatert Kontinenter».
Kjører vi koden, får vi:
Fjernet Kontinent: Asia
Oppdatert Kontinenter Array: [
'Afrika',
'Nord-Amerika',
'Sør-Amerika',
'Antarktis',
'Europa',
'Australia'
]
Legg til et element i en array i JavaScript
Vi har nå sett hvordan vi fjerner elementer. Det kan også være behov for å legge til nye elementer. Her er noen metoder:
#1. push()-metoden
Vi bruker denne koden for eksemplene:
let farger = ['rød', 'blå', 'grønn', 'gul', 'lilla'];
Vi kan legge til en ny farge på slutten av arrayen med push():
let farger = ['rød', 'blå', 'grønn', 'gul', 'lilla'];
// Legg til en ny farge
farger.push('oransje');
Arrayen vil nå ha seks farger.
#2. unshift()-metoden
Du kan legge til et element i starten av arrayen med unshift(). Vi bruker fortsatt farge-arrayen:
let farger = ['rød', 'blå', 'grønn', 'gul', 'lilla'];
// Legg til en ny farge i starten
farger.unshift('oransje');
console.log(farger);
Som du ser i skjermbildet, er «oransje» nå den første fargen:
Konklusjon
Du har nå lært hvordan du fjerner elementer fra en JavaScript-array. Valget av metode avhenger av målet ditt, dine ferdigheter og preferanser.
slice() er en god løsning hvis du ønsker en enkel metode og ikke vil endre den opprinnelige arrayen. Kombinasjonen av slice() og concat() er nyttig hvis du vil fjerne et element fra en vilkårlig posisjon.
Sjekk gjerne ut vår artikkel om JavaScript jukseark for utviklere.