Veți întâlni adesea Arrays când scrieți cod JavaScript. Cum puteți elimina un element dintr-o matrice în JavaScript?
În JavaScript, un Array este un tip de obiect global pe care îl puteți folosi pentru a stoca date. O matrice în JavaScript poate conține o listă care conține zero sau mai multe tipuri de date sau o colecție ordonată. Pentru a accesa elemente specifice dintr-un Array, folosim indici numerotati incepand de la 0.
În acest articol, voi descrie sintaxa pentru crearea Arrays în JavaScript, de ce ar trebui să eliminați un element dintr-o matrice în JavaScript și diferitele abordări pentru a elimina elementele din Arrays în JavaScript prin mutarea sau fără mutarea matricei originale.
Cuprins
Sintaxă pentru o matrice JavaScript
Matricele ne permit să stocăm mai multe obiecte de valoare într-o singură variabilă. De exemplu, dacă vrem să reprezentăm cele șapte continente în JavaScript, putem avea acest cod:
const continent1 = "Asia"; const continent2 = "Africa"; const continent3 = "North America"; const continent4 = "South America"; const continent5 = "Antarctica"; const continent6 = "Europe"; const continent7 = "Australia"
Cu toate acestea, putem condensa acest cod și îl putem reprezenta într-o matrice după cum urmează;
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
În loc să avem 7 variabile, avem o singură variabilă și folosim paranteze drepte pentru a ne reprezenta obiectele.
Dacă doriți să accesați primul continent de pe lista noastră, puteți rula această comandă; console.log(continente[0])
Puteți folosi gratuit compilator online JavaScript pentru a-ți testa codul.
Asta este ceea ce obțineți:
Dacă doriți să accesați ultimul element din matricea noastră, veți rula această comandă; console.log(continente[6]).
Vă rugăm să rețineți că numerotarea în JavaScript începe de la 0.
De ce să eliminați un element dintr-o matrice JavaScript?
Puteți utiliza matrice JavaScript cu șiruri, numere și diferite structuri de date. Cu toate acestea, există cazuri în care poate fi necesar să eliminați unul sau mai multe elemente dintr-o matrice. Acestea sunt câteva dintre scenarii:
- Gestionați datele dinamice: puteți stoca seturi dinamice de date în matrice. Este posibil să fie necesar să eliminați un element/elemente dintr-o matrice pe baza cerințelor în schimbare.
- Mențineți integritatea datelor: puteți șterge/elimina informații învechite din matrice pentru a vă asigura că structurile de date sunt actualizate.
- Gestionați memoria: dimensiunea codului dvs. afectează performanța aplicației dvs. Puteți elimina informațiile inutile din matrice și puteți optimiza codul.
Eliminați elemente fără a muta matricea originală
Când doriți să eliminați un element fără a modifica matricea originală, cea mai bună practică este să creați o nouă matrice fără elementul pe care doriți să-l eliminați. O astfel de abordare se potrivește unui tablou ca un parametru de funcție. Puteți utiliza următoarele abordări:
#1. Eliminați un element folosind slice()
Putem elimina primul continent din lista noastră folosind metoda slice().
Acesta este codul nostru original:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Vom crea o nouă matrice după cum urmează:
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);
Veți obține ca rezultat:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#2. Eliminați primul element dintr-o matrice folosind filter()
Metoda de filtrare creează o nouă matrice în care elementele trebuie să treacă o anumită condiție. Pot crea o condiție care exclude primul element din matricea noastră. Iată cum pot realiza asta:
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);
Dacă rulez codul, iată ce voi obține:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Utilizați slice() împreună cu concat() pentru a elimina un element din orice poziție
Primul nostru exemplu elimină primul element din lista noastră. Ce se întâmplă dacă vrem să eliminăm, să spunem, al treilea sau al patrulea element din matricea noastră? Trebuie să combinăm metodele slice() cu concat() pentru ca acest lucru să se întâmple. În exemplul următor, voi elimina al patrulea element după cum urmează:
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);
Dacă rulez codul, obținem ca rezultat:
[ 'Asia', 'Africa', 'North America', 'Antarctica', 'Europe', 'Australia' ]
Metoda slice() creează două noi felii. Apoi folosim metoda concat() pentru a combina cele două felii, dar omitem al patrulea element. Puteți utiliza această abordare cu orice element din matrice.
#4. Eliminați un element folosind bucla for împreună cu push()
Putem omite cel de-al cincilea element din lista noastră folosind metoda for loop și push(). Verificați acest cod:
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);
Bucla for iterează peste fiecare element din matricea continentelor noastre. Folosim instrucțiunea if pentru a verifica dacă indicele curent nu este egal cu patru. Dacă condiția este adevărată, elementele sunt împinse într-o nouă matrice.
Iată ce obținem când rulați codul:
[ 'Asia', 'Africa', 'North America', 'South America', 'Europe', 'Australia' ]
Eliminați elemente prin mutarea matricei originale
Puteți modifica sau modifica structura matricei originale prin eliminarea unui element. Acestea sunt câteva dintre abordări:
#1. Eliminați un element dintr-o matrice folosind pop()
Puteți folosi metoda pop() pentru a elimina ultimul element din matricea continentelor noastre. Codul nostru original este
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Putem avea acest cod pentru a elimina ultimul element:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Remove the last element using pop let lastContinent = continents.pop();
Dacă alergi:
console.log("Updated Continents Array:", continents);
Lista actualizată va fi:
Updated Continents Array: [ 'Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe' ]
De asemenea, puteți verifica elementul eliminat folosind acest cod:
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. Eliminați un element dintr-o matrice folosind splice()
Metoda splice () vă permite să eliminați elemente dintr-un index specific din matricea dvs. Pot elimina un element din indexul lui 2 folosind acest cod:
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);
Acest cod modifică matricea originală și apoi returnează o nouă matrice. Codul are, de asemenea, două instrucțiuni console.log care verifică „Elementele eliminate” și „Matricea Continente actualizată”.
Când rulăm întregul cod, acesta va fi rezultatul:
Removed Element: [ 'North America' ] Updated Continents Array: [ 'Asia', 'Africa', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Eliminați primul element dintr-o matrice folosind shift()
Metoda shift () elimină primul element dintr-o matrice JavaScript. Această metodă modifică/distruge tabloul original și returnează, de asemenea, elementul eliminat. Putem folosi în continuare matricea continentelor noastre pentru această demonstrație.
Putem elimina primul element după cum urmează:
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);
Avem două instrucțiuni console.log, în care una returnează „Continentul eliminat”, în timp ce a doua returnează „Continentele actualizate”.
Dacă rulăm codul, obținem această ieșire:
Removed Continent: Asia Updated Continents Array: [ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
Adăugați un element la o matrice în JavaScript
Până acum am discutat despre cum să eliminați un element dintr-o matrice. Cu toate acestea, există cazuri în care este posibil să doriți să adăugați un nou element la o matrice. Acestea sunt câteva dintre abordările de utilizat:
#1. Metoda push().
Vom folosi acest cod pentru aceste exemple:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
Putem adăuga o nouă culoare la sfârșitul matricei folosind metoda push().
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.push('orange');
Matricea noastră va avea acum șase culori.
#2. Metoda unshift().
Puteți adăuga un nou element la începutul matricei folosind metoda unshift(). Putem folosi în continuare matricea de culori.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);
După cum puteți vedea în următoarea captură de ecran, portocaliul este acum prima culoare din matricea noastră:
Concluzie
Acum înțelegeți cum să eliminați un element dintr-o matrice JavaScript și să produceți cod eficient. Alegerea abordării va depinde de obiectivele, abilitățile și preferințele dumneavoastră finale.
Metoda slice() este o alegere perfectă atunci când căutați o abordare simplă și nu doriți să modificați matricea originală. Pe de altă parte, am găsit combinația dintre metodele slice() și concat() o alegere perfectă dacă doriți să eliminați orice element.
Consultați articolul nostru despre fișele JavaScript pentru dezvoltatori.