Du vil ofte komme over Arrays når du skriver JavaScript-kode. Hvordan kan du fjerne et element fra en Array i JavaScript?
I JavaScript er en Array en type globalt objekt du kan bruke til å lagre data. En matrise i JavaScript kan inneholde en liste som inneholder null eller flere datatyper eller en ordnet samling. For å få tilgang til spesifikke elementer fra en matrise bruker vi nummererte indekser som starter fra 0.
I denne artikkelen vil jeg beskrive syntaksen for å lage Arrays i JavaScript, hvorfor man bør fjerne et element fra en array i JavaScript, og de ulike tilnærmingene for å fjerne elementer fra Arrays i JavaScript ved å mutere eller uten å mutere den originale arrayen.
Innholdsfortegnelse
Syntaks for en JavaScript-matrise
Matriser lar oss lagre flere verdisaker i en enkelt variabel. For eksempel, hvis vi ønsker å representere de syv kontinentene i JavaScript, kan vi ha denne koden:
const continent1 = "Asia"; const continent2 = "Africa"; const continent3 = "North America"; const continent4 = "South America"; const continent5 = "Antarctica"; const continent6 = "Europe"; const continent7 = "Australia"
Imidlertid kan vi kondensere denne koden og representere den i en matrise som følger;
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
I stedet for å ha 7 variabler, har vi bare én variabel og vi bruker firkantede parenteser for å representere objektene våre.
Hvis du vil ha tilgang til det første kontinentet på listen vår, kan du kjøre denne kommandoen; console.log(kontinenter[0])
Du kan bruke vår gratis online JavaScript-kompilator for å teste koden din.
Dette er hva du får:
Hvis du vil ha tilgang til det siste elementet i arrayet vårt, kjører du denne kommandoen; console.log(kontinenter[6]).
Vær oppmerksom på at nummerering i JavaScript starter fra 0.
Hvorfor fjerne et element fra en JavaScript-array?
Du kan bruke JavaScript-matriser med strenger, tall og ulike datastrukturer. Det er imidlertid tilfeller der du kanskje må fjerne ett eller flere elementer fra en matrise. Dette er noen av scenariene:
- Håndtere dynamiske data: Du kan lagre dynamiske sett med data i matriser. Du må kanskje fjerne et element/elementer fra en matrise basert på de endrede kravene.
- Oppretthold dataintegritet: Du kan slette/fjerne utdatert informasjon fra matrisene dine for å sikre at datastrukturene dine er oppdatert.
- Administrer minne: Størrelsen på koden din påvirker ytelsen til applikasjonen. Du kan fjerne unødvendig informasjon fra arrayene dine og optimalisere koden.
Fjern elementer uten å mutere den opprinnelige matrisen
Når du vil fjerne et element uten å mutere den opprinnelige matrisen, er den beste praksisen å lage en ny matrise uten elementet du vil fjerne. En slik tilnærming passer til en matrise som en funksjonsparameter. Du kan bruke følgende tilnærminger:
#1. Fjern et element ved å bruke slice()
Vi kan fjerne det første kontinentet fra listen vår ved å bruke slice()-metoden.
Dette er vår originale kode:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Vi vil lage en ny array som følger:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the first element using slice let newContinents = continents.slice(1); If you now run: console.log(newContinents);
Du får dette som utdata:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#2. Fjern det første elementet fra en matrise ved hjelp av filter()
Filtermetoden oppretter en ny matrise der elementer må passere en bestemt betingelse. Jeg kan opprette en betingelse som ekskluderer det første elementet fra matrisen vår. Slik kan jeg oppnå det:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the first element using filter() method let newContinents = continents.filter((continent, index) => index !== 0); console.log(newContinents);
Hvis jeg kjører koden, får jeg dette:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Bruk slice() sammen med concat() for å fjerne et element fra en hvilken som helst posisjon
Vårt første eksempel fjerner det første elementet fra listen vår. Hva om vi ønsker å fjerne, la oss si, det tredje eller fjerde elementet fra matrisen vår? Vi må kombinere slice() med concat()-metoder for at dette skal skje. I følgende eksempel vil jeg fjerne det fjerde elementet som følger:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the fourth element using slice and concat let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4)); console.log(continentsWithoutFourth);
Hvis jeg kjører koden, får vi dette som utdata:
[ 'Asia', 'Africa', 'North America', 'Antarctica', 'Europe', 'Australia' ]
Slice()-metoden oppretter to nye skiver. Vi bruker deretter concat()-metoden for å kombinere de to skivene, men utelater det fjerde elementet. Du kan bruke denne tilnærmingen med et hvilket som helst element i matrisen.
#4. Fjern et element med for loop sammen med push()
Vi kan utelate det femte elementet fra listen vår ved å bruke for loop og push() metoden. Sjekk ut denne koden:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the fifth element using a for loop and push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
if (i !== 4) {
continentsWithoutFifth.push(continents[i]);
}
}
console.log(continentsWithoutFifth);
For-løkken itererer over hvert element i vårt kontinent-array. Vi bruker if-setningen for å sjekke om gjeldende indeks ikke er lik fire. Hvis betingelsen er sann, skyves elementene inn i en ny matrise.
Dette er hva vi får når du kjører koden:
[ 'Asia', 'Africa', 'North America', 'South America', 'Europe', 'Australia' ]
Fjern elementer ved å mutere den opprinnelige matrisen
Du kan mutere eller endre strukturen til den opprinnelige matrisen ved å fjerne et element. Dette er noen av tilnærmingene:
#1. Fjern et element fra en matrise ved å bruke pop()
Du kan bruke pop()-metoden for å fjerne det siste elementet fra vår kontinent-array. Vår opprinnelige kode er
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Vi kan ha denne koden for å fjerne det siste elementet:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the last element using pop let lastContinent = continents.pop();
Hvis du løper:
console.log("Updated Continents Array:", continents);
Den oppdaterte listen vil være:
Updated Continents Array: [ 'Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe' ]
Du kan også sjekke det fjernede elementet ved å bruke denne koden:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the last element using pop
let lastContinent = continents.pop();
console.log("Removed Continent:", lastContinent);
#2. Fjern et element fra en matrise ved å bruke splice()
Spleisemetoden () lar deg fjerne elementer fra en spesifikk indeks i matrisen din. Jeg kan fjerne et element fra indeksen til 2 ved å bruke denne koden:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the element at index 2 using splice
let removedElement = continents.splice(2, 1);
console.log("Removed Element:", removedElement);
console.log("Updated Continents Array:", continents);
Denne koden muterer den opprinnelige matrisen og returnerer deretter en ny matrise. Koden har også to console.log-setninger som sjekker «Removed Elements» og «Updated Continents Array».
Når vi kjører hele koden, vil dette være utdata:
Removed Element: [ 'North America' ] Updated Continents Array: [ 'Asia', 'Africa', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Fjern det første elementet fra en matrise ved å bruke shift()
Shift ()-metoden fjerner det første elementet fra en JavaScript-matrise. Denne metoden modifiserer/ødelegger den opprinnelige matrisen og returnerer også det fjernede elementet. Vi kan fortsatt bruke våre kontinenter til denne demonstrasjonen.
Vi kan fjerne det første elementet som følger:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using shift
let removedContinent = continents.shift();
console.log("Removed Continent:", removedContinent);
console.log("Updated Continents Array:", continents);
Vi har to console.log-setninger, der den ene returnerer «Removed Continent» mens den andre returnerer «Updated Continents».
Hvis vi kjører koden, får vi denne utgangen:
Removed Continent: Asia Updated Continents Array: [ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
Legg til et element i en matrise i JavaScript
Vi har så langt diskutert hvordan man fjerner et element fra en matrise. Det er imidlertid tilfeller der du kanskje vil legge til et nytt element i en matrise. Dette er noen av metodene du kan bruke:
#1. Push()-metoden
Vi vil bruke denne koden for disse eksemplene:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
Vi kan legge til en ny farge på slutten av matrisen ved å bruke push()-metoden.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.push('orange');
Arrayet vårt nå vil ha seks farger.
#2. Unshift()-metoden
Du kan legge til et nytt element i starten av matrisen ved å bruke unshift()-metoden. Vi kan fortsatt bruke fargeutvalget.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);
Som du kan se i følgende skjermbilde, er oransje nå den første fargen på matrisen vår:
Konklusjon
Du forstår nå hvordan du fjerner et element i en JavaScript-array og produserer effektiv kode. Valget av tilnærming vil avhenge av dine sluttmål, ferdigheter og preferanser.
Slice()-metoden er et perfekt valg når du leter etter en enkel tilnærming og du ikke vil mutere den originale matrisen. På den annen side fant jeg kombinasjonen av slice()- og concat()-metodene et perfekt valg hvis du vil fjerne et hvilket som helst element.
Sjekk ut artikkelen vår om JavaScript-jukseark for utviklere.