Hur man tar bort element från Array JavaScript och Craft Clean Code

Du kommer ofta att stöta på Arrays när du skriver JavaScript-kod. Hur kan du ta bort ett element från en Array i JavaScript?

I JavaScript är en Array en typ av globalt objekt som du kan använda för att lagra data. En array i JavaScript kan innehålla en lista som innehåller noll eller fler datatyper eller en ordnad samling. För att komma åt specifika objekt från en Array använder vi numrerade index som börjar från 0.

I den här artikeln kommer jag att beskriva syntaxen för att skapa Arrays i JavaScript, varför man bör ta bort ett element från en array i JavaScript, och de olika metoderna för att ta bort element från Arrays i JavaScript genom att mutera eller utan att mutera den ursprungliga arrayen.

Syntax för en JavaScript-array

Matriser tillåter oss att lagra flera värdesaker i en enda variabel. Om vi ​​till exempel vill representera de sju kontinenterna i JavaScript, kan vi ha den här koden:

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 dock kondensera denna kod och representera den i en array enligt följande;

 let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Istället för att ha 7 variabler har vi bara en variabel och vi använder hakparenteser för att representera våra objekt.

Om du vill komma åt den första kontinenten på vår lista kan du köra det här kommandot; console.log(continents[0])

Du kan använda vår gratis online JavaScript-kompilator för att testa din kod.

Det här är vad du får:

Om du vill komma åt det sista objektet i vår array kör du det här kommandot; console.log(continents[6]).

Observera att numrering i JavaScript börjar från 0.

Varför ta bort ett element från en JavaScript-array?

Du kan använda JavaScript-matriser med strängar, siffror och olika datastrukturer. Det finns dock tillfällen där du kan behöva ta bort ett eller flera element från en array. Det här är några av scenarierna:

  • Hantera dynamisk data: Du kan lagra dynamiska uppsättningar av data i arrayer. Du kan behöva ta bort ett element/element från en array baserat på de ändrade kraven.
  • Upprätthåll dataintegritet: Du kan ta bort/ta bort inaktuell information från dina arrayer för att säkerställa att dina datastrukturer är uppdaterade.
  • Hantera minne: Storleken på din kod påverkar prestandan för din applikation. Du kan ta bort onödig information från dina arrayer och optimera din kod.

Ta bort element utan att mutera den ursprungliga arrayen

När du vill ta bort ett element utan att mutera den ursprungliga arrayen, är det bästa sättet att skapa en ny array utan elementet du vill ta bort. Ett sådant tillvägagångssätt passar en array som en funktionsparameter. Du kan använda följande tillvägagångssätt:

#1. Ta bort ett element med slice()

Vi kan ta bort den första kontinenten från vår lista med metoden slice().

Detta är vår ursprungliga kod:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Vi kommer att skapa en ny array enligt följande:

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 detta som din utdata:

[
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#2. Ta bort det första elementet från en Array med filter()

Filtermetoden skapar en ny array där element måste klara ett visst villkor. Jag kan skapa ett villkor som utesluter det första elementet från vår array. Så här kan jag uppnå 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);

Om jag kör koden får jag det här:

[
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#3. Använd slice() tillsammans med concat() för att ta bort ett element från valfri position

Vårt första exempel tar bort det första elementet från vår lista. Vad händer om vi vill ta bort, låt oss säga, det tredje eller fjärde elementet från vår array? Vi måste kombinera slice() med concat() metoder för att detta ska hända. I följande exempel kommer jag att ta bort det fjärde elementet enligt följande:

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);

Om jag kör koden får vi detta som utdata:

[
  'Asia',
  'Africa',
  'North America',
  'Antarctica',
  'Europe',
  'Australia'
]

Metoden slice() skapar två nya segment. Vi använder sedan metoden concat() för att kombinera de två skivorna men utelämnar det fjärde elementet. Du kan använda detta tillvägagångssätt med vilket element som helst i arrayen.

#4. Ta bort ett element med för loop tillsammans med push()

Vi kan utelämna det femte elementet från vår lista med metoderna for loop och push(). Kolla in den här 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-loopen itererar över varje element i våra kontinenter. Vi använder if-satsen för att kontrollera om det aktuella indexet inte är lika med fyra. Om villkoret är sant, skjuts elementen in i en ny array.

Detta är vad vi får när du kör koden:

[

  'Asia',
  'Africa',
  'North America',
  'South America',
  'Europe',
  'Australia'
]

Ta bort element genom att mutera den ursprungliga arrayen

Du kan mutera eller ändra strukturen för den ursprungliga arrayen genom att ta bort ett element. Det här är några av tillvägagångssätten:

#1. Ta bort ett element från en array med pop()

Du kan använda metoden pop() för att ta bort det sista elementet från vår kontinentsarray. Vår ursprungliga kod är

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Vi kan ha den här koden för att ta bort det sista elementet:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the last element using pop
let lastContinent = continents.pop();

Om du springer:

console.log("Updated Continents Array:", continents);

Den uppdaterade listan kommer att vara:

Updated Continents Array: [

  'Asia',
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe'
]

Du kan också kontrollera det borttagna elementet med den här 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. Ta bort ett element från en array med splice()

Metoden splice () låter dig ta bort element från ett specifikt index i din array. Jag kan ta bort ett element från index 2 med den här 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);

Denna kod muterar den ursprungliga arrayen och returnerar sedan en ny array. Koden har också två console.log-satser som kontrollerar ”Removed Elements” och ”Updated Continents Array”.

När vi kör hela koden blir detta utdata:

Removed Element: [ 'North America' ]
Updated Continents Array: [
  'Asia',
  'Africa',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#3. Ta bort det första elementet från en array med shift()

Metoden shift () tar bort det första elementet från en JavaScript-array. Denna metod modifierar/förstör den ursprungliga arrayen och returnerar även det borttagna elementet. Vi kan fortfarande använda våra kontinenter för denna demonstration.

Vi kan ta bort det första elementet enligt följande:

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 två console.log-satser, där den ena returnerar den ”borttagna kontinenten” medan den andra returnerar ”Uppdaterade kontinenter”.

Om vi ​​kör koden får vi denna utdata:

Removed Continent: Asia
Updated Continents Array: [

  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

Lägg till ett element i en array i JavaScript

Vi har hittills diskuterat hur man tar bort ett element från en array. Det finns dock tillfällen där du kanske vill lägga till ett nytt element i en array. Det här är några av metoderna att använda:

#1. Push()-metoden

Vi kommer att använda den här koden för dessa exempel:

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

Vi kan lägga till en ny färg i slutet av arrayen med push()-metoden.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

// Add a new color to the array
colors.push('orange');

Vår array kommer nu att ha sex färger.

#2. Metoden unshift()

Du kan lägga till ett nytt element i början av arrayen med metoden unshift() . Vi kan fortfarande använda färgerna.

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öljande skärmdump är orange nu den första färgen på vår array:

Slutsats

Du förstår nu hur man tar bort ett element i en JavaScript-array och producerar effektiv kod. Valet av tillvägagångssätt beror på dina slutmål, färdigheter och preferenser.

Metoden slice() är ett perfekt val när du letar efter ett enkelt tillvägagångssätt och du inte vill mutera den ursprungliga arrayen. Å andra sidan tyckte jag att kombinationen av metoderna slice() och concat() var ett perfekt val om du vill ta bort något element.

Kolla in vår artikel om JavaScript-fuskblad för utvecklare.