Du vil ofte støde på Arrays, når du skriver JavaScript-kode. Hvordan kan du fjerne et element fra et array i JavaScript?
I JavaScript er en Array en type globalt objekt, du kan bruge til at gemme data. Et array i JavaScript kan indeholde en liste, der indeholder nul eller flere datatyper eller en ordnet samling. For at få adgang til specifikke elementer fra et array bruger vi nummererede indekser, der starter fra 0.
I denne artikel vil jeg beskrive syntaksen for at skabe Arrays i JavaScript, hvorfor man skal fjerne et element fra et array i JavaScript, og de forskellige tilgange til at fjerne elementer fra Arrays i JavaScript ved at mutere eller uden at mutere det originale array.
Indholdsfortegnelse
Syntaks for et JavaScript-array
Arrays giver os mulighed for at gemme flere værdigenstande i en enkelt variabel. For eksempel, hvis vi ønsker at repræsentere de syv kontinenter i JavaScript, kan vi have denne kode:
const continent1 = "Asia"; const continent2 = "Africa"; const continent3 = "North America"; const continent4 = "South America"; const continent5 = "Antarctica"; const continent6 = "Europe"; const continent7 = "Australia"
Vi kan dog kondensere denne kode og repræsentere den i et array som følger;
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
I stedet for at have 7 variable, har vi kun én variabel, og vi bruger firkantede parenteser til at repræsentere vores objekter.
Hvis du vil have adgang til det første kontinent på vores liste, kan du køre denne kommando; console.log(kontinenter[0])
Du kan bruge vores gratis online JavaScript-compiler for at teste din kode.
Dette er hvad du får:
Hvis du vil have adgang til det sidste element i vores array, vil du køre denne kommando; console.log(kontinenter[6]).
Bemærk venligst, at nummerering i JavaScript starter fra 0.
Hvorfor fjerne et element fra et JavaScript-array?
Du kan bruge JavaScript-arrays med strenge, tal og forskellige datastrukturer. Der er dog tilfælde, hvor du muligvis skal fjerne et eller flere elementer fra et array. Dette er nogle af scenarierne:
- Håndter dynamiske data: Du kan gemme dynamiske datasæt i arrays. Du skal muligvis fjerne et element/elementer fra et array baseret på de skiftende krav.
- Oprethold dataintegritet: Du kan slette/fjerne forældede oplysninger fra dine arrays for at sikre, at dine datastrukturer er opdaterede.
- Administrer hukommelse: Størrelsen på din kode påvirker din applikations ydeevne. Du kan fjerne unødvendig information fra dine arrays og optimere din kode.
Fjern elementer uden at mutere det originale array
Når du vil fjerne et element uden at mutere det originale array, er den bedste praksis at oprette en ny array uden det element, du vil fjerne. En sådan tilgang passer til et array som en funktionsparameter. Du kan bruge følgende fremgangsmåder:
#1. Fjern et element ved hjælp af slice()
Vi kan fjerne det første kontinent fra vores liste ved at bruge slice() metoden.
Dette er vores originale kode:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Vi vil oprette et nyt 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 dit output:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#2. Fjern det første element fra et array ved hjælp af filter()
Filtermetoden opretter et nyt array, hvor elementer skal passere en bestemt betingelse. Jeg kan oprette en betingelse, der udelukker det første element fra vores array. Sådan kan jeg opnå 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 kører koden, får jeg dette:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Brug slice() sammen med concat() for at fjerne et element fra enhver position
Vores første eksempel fjerner det første element fra vores liste. Hvad hvis vi ønsker at fjerne, lad os sige, det tredje eller fjerde element fra vores array? Vi er nødt til at kombinere slice() med concat() metoder for at dette kan ske. I det følgende eksempel vil jeg fjerne det fjerde element 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 kører koden, får vi dette som output:
[ 'Asia', 'Africa', 'North America', 'Antarctica', 'Europe', 'Australia' ]
Metoden slice() opretter to nye udsnit. Vi bruger derefter concat()-metoden til at kombinere de to skiver, men udelader det fjerde element. Du kan bruge denne tilgang med ethvert element i arrayet.
#4. Fjern et element ved hjælp af for loop sammen med push()
Vi kan udelade det femte element fra vores liste ved at bruge metoden for loop og push(). Tjek denne kode:
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 vores kontinent-array. Vi bruger if-sætningen til at kontrollere, om det aktuelle indeks ikke er lig med fire. Hvis betingelsen er sand, skubbes elementerne ind i et nyt array.
Dette er, hvad vi får, når du kører koden:
[ 'Asia', 'Africa', 'North America', 'South America', 'Europe', 'Australia' ]
Fjern elementer ved at mutere det originale array
Du kan mutere eller ændre strukturen af det originale array ved at fjerne et element. Disse er nogle af tilgangene:
#1. Fjern et element fra et array ved hjælp af pop()
Du kan bruge pop()-metoden til at fjerne det sidste element fra vores kontinent-array. Vores originale kode er
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Vi kan have denne kode til at fjerne det sidste element:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the last element using pop let lastContinent = continents.pop();
Hvis du løber:
console.log("Updated Continents Array:", continents);
Den opdaterede liste vil være:
Updated Continents Array: [ 'Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe' ]
Du kan også kontrollere det fjernede element ved hjælp af denne kode:
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 et array ved hjælp af splice()
Splejsningsmetoden () giver dig mulighed for at fjerne elementer fra et specifikt indeks i dit array. Jeg kan fjerne et element fra indekset 2 ved hjælp af denne kode:
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 kode muterer det oprindelige array og returnerer derefter et nyt array. Koden har også to console.log-sætninger, der kontrollerer ‘Removed Elements’ og ‘Updated Continents Array’.
Når vi kører hele koden, vil dette være outputtet:
Removed Element: [ 'North America' ] Updated Continents Array: [ 'Asia', 'Africa', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Fjern det første element fra et array ved hjælp af shift()
Shift ()-metoden fjerner det første element fra et JavaScript-array. Denne metode ændrer/ødelægger det originale array og returnerer også det fjernede element. Vi kan stadig bruge vores kontinent-array til denne demonstration.
Vi kan fjerne det første element 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-udsagn, hvor den ene returnerer ‘Removed Continent’, mens den anden returnerer ‘Updated Continents’.
Hvis vi kører koden, får vi dette output:
Removed Continent: Asia Updated Continents Array: [ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
Tilføj et element til et array i JavaScript
Vi har indtil videre diskuteret, hvordan man fjerner et element fra et array. Der er dog tilfælde, hvor du måske ønsker at tilføje et nyt element til en matrix. Dette er nogle af de metoder, du kan bruge:
#1. push() metoden
Vi vil bruge denne kode til disse eksempler:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
Vi kan tilføje en ny farve i slutningen af arrayet ved hjælp af push()-metoden.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.push('orange');
Vores array vil nu have seks farver.
#2. Unshift() metoden
Du kan tilføje et nyt element til starten af arrayet ved at bruge unshift() metoden. Vi kan stadig bruge farvearrayet.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);
Som du kan se på det følgende skærmbillede, er orange nu den første farve på vores array:
Konklusion
Du forstår nu, hvordan du fjerner et element i et JavaScript-array og producerer effektiv kode. Valget af tilgang vil afhænge af dine slutmål, færdigheder og præferencer.
Slice()-metoden er et perfekt valg, når du leder efter en enkel tilgang, og du ikke ønsker at mutere det originale array. På den anden side fandt jeg kombinationen af slice() og concat() metoder et perfekt valg, hvis du vil fjerne ethvert element.
Tjek vores artikel om JavaScript-snydeark til udviklere.