În acest articol, vom explora câteva moduri diferite de a elimina un element dintr-o matrice în JavaScript. De asemenea, vă voi arăta operațiuni mutabile și imuabile, astfel încât să știți cum vă va afecta codul structurile și referințele de date.
eliminarea elementelor din matrice se reduce pur și simplu la găsirea indexului elementului sau cel puțin în mod tradițional. În zilele noastre – avem alte opțiuni, cum ar fi găsirea elementelor în interiorul unei matrice după valoarea lor., Ceea ce înseamnă că există acum mai multe abordări pentru eliminarea elementelor.
această secțiune scurtă următoare va arunca cu capul în indexurile matrice și modul în care acestea vin să fie, este o scufundare profundă mai frumos – dar dacă sunteți după soluțiile apoi derulați dreapta pe prin.
Understanding Array indexes
în JavaScript, o matrice este un tip special de obiect.
acest obiect matrice are mai multe proprietăți diferite, dintre care unele sunt proprietăți moștenite care există pe prototip, iar unele sunt proprietăți pe care obiectul matrice ne expune atunci când „adăugăm” lucruri într-o matrice.,
🎉 Descărcați-l gratuit!
du-te dincolo de matrice pentrufiecare. Obțineți încredere cu metode mai avansate, cum ar fi reducerea, găsirea, filtrarea, fiecare, unele și harta și înțelegeți pe deplin cum să gestionați structurile de date JavaScript.,
- înțelege pe Deplin cum să gestioneze JavaScript Structuri de Date cu imuabil operațiunile
- 31 pagini de adânc se arunca cu capul sintaxa, exemple din lumea reală, sfaturi și trucuri
- Scrie mai curat și mai bine structurată, programare logică în decurs de 3 ore
ca bonus suplimentar, vă vom trimite și câteva bunătăți suplimentare în câteva e-mailuri suplimentare.,
De exemplu, atunci când declarăm o nouă matrice prin , ca matrice conține Array.prototype proprietăți și metode care ne permit să interacționeze cu gama noastră. Intenția cu aceasta a fost să ne permită să efectuăm mutații și modificări ale matricelor noastre cu funcțiile de utilitate frumoase „încorporate”.
un utilitar? Da, de exemplu matrice.prototip.forEach () sau matrice.prototip.apăsați (). Ambele sunt metode moștenite pe obiectul array. Acestea fiind spuse, știți acum cum matricele sunt de fapt doar obiecte – iar obiectele au metode și proprietăți.,
obiectul array este special, este diferit. Este încă un obiect, dar modul în care” folosim ” o matrice este prin accesarea proprietăților de pe ea care se referă la un element din matrice, printr-un index. Un index? Da – 0, 1, 2, 3 și încoace! Indexurile Array încep de la zero.
cu matrice acest lucru înseamnă că atunci când avem nevoie de acces la o valoare, oricare ar fi ea (un primitiv / obiect), se face printr-o „căutare index”. Cereți indexul din matrice și veți primi înapoi elementul situat la acel index.,
într-adevăr, vă puteți gândi la fiecare index ca un sertar într-un dulap. Fiecare extragere conține ceva unic! Matricele sunt virtuale, astfel încât dimensiunea dulapului de depozitare depinde de dvs.!
” De ce îmi spui toate astea, Todd?pentru că acum înțelegeți o matrice, știți cum să lucrați cu una!
fără alte detalii, să explorăm mai întâi cum să eliminați un element dintr-o matrice în JavaScript după index și valoare.
folosind .indexOf () și .,splice() – Mutabil Model
Pentru a elimina un element din matrice prin indexul său, vom prezenta mai întâi Array.prototype.splice metoda și apoi a investiga un model mai bun, folosind Array.prototype.filter, un nou API.
Splice este o metodă mutabilă care vă permite să modificați conținutul unei matrice. Aceasta ar putea fi eliminarea sau înlocuirea „elementelor”, așa cum sunt cunoscute elementele de matrice.
să luăm o matrice cu câteva valori de șir:
const drinks = ;pentru a elimina un element prin indexul său, trebuie să găsim indexul.,
există două scenarii aici, 1) știm indicele și 2) nu știm indicele, dar știm valoarea.
în Primul rând, dacă știm index, mai jos am folosit id care să ne țină de exemplu index, apoi pur și simplu necesită trece ca index în .splice()., Primul argument de îmbinare acceptă poziția index pentru a începe eliminarea de elemente, și cel de-al doilea argument setat la 1 reprezintă end – sensul vrem doar pentru a elimina un element, după care a index:
const drinks = ;const id = 2;const removedDrink = drinks.splice(id, 1);Dacă nu știm index, atunci avem nevoie pentru a găsi. În acest caz, indexul pe care dorim să îl eliminăm conține o valoare 'Coffee'.
am putea folosi matrice.prototip.,indexOf() pentru a obține, ei bine… „indicele a” element:
const drinks = ;const id = drinks.indexOf('Coffee'); // 2const removedDrink = drinks.splice(id, 1);Matrice.prototip.indexOf () va reveni
-1dacă elementul nu este găsit, așa că aș recomanda o verificare de siguranță în jurul acestui lucru.
veți observa că am adăugat și const removedDrink. Acest lucru este pentru că .splice() se întoarce ne-a eliminat elementul(s):
// console.log(removedDrink);// console.log(drinks);Încercați exemplu de cod pentru acest lucru mai jos:
Utilizare .,filtru () – model imuabil
deci, acum înțelegem mai multe despre mutabil și imuabil, să descoperim modelul imuabil pentru a „elimina” un element dintr-o matrice.cel mai bun mod în care vă puteți gândi la acest lucru este – în loc să „eliminați” elementul, veți „crea” o nouă matrice care pur și simplu nu include acel element. Așa că trebuie să o găsim și să o omitem în întregime.
🎉 Descărcați-l gratuit!
du-te dincolo de matrice pentrufiecare., Obțineți încredere cu metode mai avansate, cum ar fi reducerea, găsirea, filtrarea, fiecare, unele și harta și înțelegeți pe deplin cum să gestionați structurile de date JavaScript.
- înțelege pe Deplin cum să gestioneze JavaScript Structuri de Date cu imuabil operațiunile
- 31 pagini de adânc se arunca cu capul sintaxa, exemple din lumea reală, sfaturi și trucuri
- Scrie mai curat și mai bine structurată, programare logică în decurs de 3 ore
ca bonus suplimentar, vă vom trimite și câteva bunătăți suplimentare în câteva e-mailuri suplimentare.
că ultima referință la matrice va trăi apoi doar pe, și nu vom fi mutant matrice originală. Vom primi o copie nouă de fiecare dată cu modificările noastre!
Deci, haideți să ia aceeași matrice pentru a începe cu:
const drinks = ;din Nou, să scopul de a elimina 'Coffee'., În primul rând, ne-ar putea furniza o valoare destinate pentru a reprezenta o valoare a indicelui, și trece-l în .filter():
const id = 2;const removedDrink = drinks;const filteredDrinks = drinks.filter((drink, index) => index !== id);Notă am inclus (drink, index) ca parametrii funcției și a comparat matrice index la id constanta – astfel încât să putem găsi exact cel de care avem nevoie ca indici se va potrivi!,
de asemenea, am inclus const removedDrink care oferă o modalitate de a „cere” o referință de băutură doriți să eliminați (în același mod în care poate doriți să utilizați valoarea returnată de .splice()).,
Dacă nu ai nici o referinta la index, de exemplu noastre id puncte pentru 'Coffee', atunci putem folosi .indexOf() (vă rugăm să rețineți că adăugarea de idx variabile pentru a surprinde index):
Folosind o Buclă – Model Tradițional
O versiune alternativă, dar un foarte valabil versiune care chiar este imperios necesar versiune de Array.prototype.filter așa cum se comportă în același fel – construirea unei noi matrice pentru noi și împingând elemente noi în, lăsându-ne un neatinse drinks matrice.,
În acest exemplu, vom eliminarea de elemente din matrice inițială de întorcându-se o nouă matrice de elemente noi vrem, folosind drinks ne permite să se uite la și de a compara matrice element de valoare (cum ar fi 'Coffee' ca un Șir de caractere, în acest caz):
cu Ajutorul filteredDrinks ar atunci da-ne de elemente ne-am dori. Puteți vedea cum învățând principiile programării putem aplica diferite modele și putem înțelege mai bine ceea ce facem!,
următoarea metodă am inclus pentru claritate asupra a ceea ce să NU facă atunci când eliminarea de elemente dintr-o matrice în JavaScript, chiar dacă e perfect „valabil”…
Evitarea „delete” de cuvinte cheie
Când văd delete cuvinte cheie în codebases, m-am cutremurat un pic – este un puternic cuvânt cheie care ar trebui să fie utilizate în mod responsabil. Acestea fiind spuse, dacă aflăm ce face cuvântul cheie delete, atunci putem lua decizii mai informate.,
Iată un exemplu pe care l-ați putea vedea pe web:
veți observa de la ieșirea console.log de mai sus că elimină complet cheia. Am inclus acest lucru pentru claritate, este întotdeauna minunat să vezi și să înțelegi ce efecte secundare au operațiile tale.
Ce este mai confuz este delete nu afectează Matrice .length proprietate – vezi cum se mai spune length: 4?! Un alt motiv pentru a evita utilizarea delete.,
având în vedere acest lucru – este timpul să încheiem postarea noastră despre cum să eliminați un element sau „element” dintr-o matrice din JavaScript cu instrumentele potrivite. Am înțeles diferite abordări și paradigme și avem mai multe cunoștințe de luat pentru ziua de mâine. Vă mulțumesc pentru lectură!dacă îți place să înveți și ai o dorință arzătoare de a-ți îmbunătăți abilitățile JavaScript? Predau cursuri JavaScript aici la cursuri Ultimate care vă vor lua abilitățile JavaScript la maxim-vă garantez că nu veți fi dezamăgiți!
🎉 Descărcați-l gratuit!,
du-te dincolo de matrice pentrufiecare. Obțineți încredere cu metode mai avansate, cum ar fi reducerea, găsirea, filtrarea, fiecare, unele și harta și înțelegeți pe deplin cum să gestionați structurile de date JavaScript.
- înțelege pe Deplin cum să gestioneze JavaScript Structuri de Date cu imuabil operațiunile
- 31 pagini de adânc se arunca cu capul sintaxa, exemple din lumea reală, sfaturi și trucuri
- Scrie mai curat și mai bine structurată, programare logică în decurs de 3 ore
ca bonus suplimentar, vă vom trimite și câteva bunătăți suplimentare în câteva e-mailuri suplimentare.
verificați – le și bucurați-vă-Vă mulțumim pentru lectură!