Tehnici utile pentru lucrul cu matrice în JavaScript. Lucrul cu matrice în JavaScript ca un profesionist

În acest articol, vom analiza o matrice JavaScript și componentele sale. JavaScript este orientat ideal și conceput pentru programare. De fapt, implementează limbajul ECMAScript (referință ECMA-262).

Unde este folosit JavaScript? Este folosit ca limbaj încorporabil pentru a defini o cale programatică către un obiect de aplicație. Poate fi găsit în browsere, unde este folosit ca limbaj de scripting care face paginile web interactive.

Cele mai importante caracteristici arhitecturale ale acestui produs sunt tastarea dinamică și slabă, gestionarea automată a memoriei, programarea perfectă și funcțiile care sunt obiecte de primă clasă.

În general, JavaScript a fost influențat de diverse motive, deoarece în timpul dezvoltării s-au dorit să creeze un limbaj similar cu Java, dar ușor de folosit de programatori. De altfel, JavaScript nu este nativ pentru nicio întreprindere sau organizație, ceea ce îl face diferit de o serie de stiluri de programare utilizate de dezvoltatorii web.

Trebuie remarcat faptul că JavaScript este o marcă înregistrată a Oracle Corporation.

Ce este o matrice?

Se numește o matrice care stochează valori numerotate. Fiecare astfel de valoare este numită componentă de matrice, iar cifra căreia este asociată componenta se numește index. Matricea JavaScript este netipificată. Aceasta înseamnă că părțile matricei pot fi de orice tip, iar părțile diferite aparținând aceleiași matrice au tipuri complet diferite.

În plus, matricea JavaScript este dinamică, ceea ce înseamnă că o dimensiune fixă ​​nu trebuie să fie declarată. La urma urmei, puteți adăuga oricând detalii noi.

Producția de matrice

Folosind JavaScript, crearea unei matrice nu este deloc dificilă. Există două metode pentru aceasta. Primul implică realizarea unei matrice folosind un literal - paranteze pătrate, în interiorul căreia există o listă de părți, separate prin virgule.

• var gol = ; //matrice goală;
• var numere = ; //matrice cu cinci componente digitale;
• var diff = ; //o matrice cu trei elemente de tipuri diferite.

De regulă, nu este necesar aici ca valorile să fie simple (șiruri și numere). Poate fi, de asemenea, orice alte expresii, cum ar fi literalele subiect, alte funcții și matrice.

A doua modalitate de a crea o matrice este apelarea designerului Array(). Îl poți invita în trei moduri:

• Apelarea designerului fără argumente: var b - new Array(). Aceasta prevede crearea unui tablou gol, echivalent cu un literal gol.
• Constructorul specifică în mod explicit valoarea n componente ale matricei: var b = new Array(1, 3, 5, 8, "string", true). În acest caz, designerului i se prezintă o listă de argumente, care sunt transformate în componente ale unei noi matrice. Argumentele sunt scrise în matrice în locația în care sunt specificate.
• Determinarea ariei pentru atribuirea ulterioară a valorilor. Acest lucru se face prin specificarea unui tablou dintr-un singur număr cuprins între paranteze la identificarea: var b = new Array(5). Această metodă de detectare implică alocarea numărului necesar de componente matricei (fiecare dintre ele listată ca nedefinită) cu posibilitatea de atribuire ulterioară a valorilor în procesul de prezentare. Acest formular este de obicei folosit pentru a pre-aloca o matrice Javascript a cărei lungime este cunoscută dinainte.

Scrierea, citirea și adăugarea detaliilor matricei

Puteți accesa componentele unei matrice folosind . Apropo, toate componentele din JavaScript, începând de la zero, sunt numerotate. Pentru a obține elementul necesar, numărul acestuia este indicat în De regulă, detaliile pot fi modificate. Și pentru ca JavaScript să se adauge la matrice, este suficient să atribuiți o nouă valoare.

Trebuie remarcat faptul că matricele JavaScript pot stoca orice număr de elemente de orice fel.

Lungimea matricei

Deci, știm, lungimea unui tablou în general este un fenomen interesant. Să o luăm în considerare mai detaliat. Toate tablourile, indiferent dacă sunt construite cu designerul Array() sau identificate cu un literal de matrice, au o proprietate de lungime specifică care returnează numărul total de elemente care trebuie salvate. Deoarece o matrice poate conține părți nedefinite (notate cu nedefinit), o expresie mai precisă este: calitatea lungimii este întotdeauna cu unul mai mult decât cel mai mare număr (indice) al componentei matricei. Calitatea lungimii este ajustată automat, rămânând precisă pe măsură ce piese noi apar în matrice.

Puteți utiliza proprietatea length pentru a face să apară componenta finală a unui tablou.

Ultima parte are un index cu un mai mic decât dimensiunea matricei. La urma urmei, numărătoarea inversă începe întotdeauna de la zero. Oh, acel JavaScript! Lungimea unui tablou depinde de numărul exact de elemente. Prin urmare, dacă nu știți câte ar trebui să fie, dar trebuie să vă referiți la elementul final al matricei, trebuie să utilizați notația: v.length - 1.

Repetarea detaliilor unei matrice

Foarte des, proprietatea lungime este folosită pentru a itera detaliile unei matrice într-o buclă:

• fructe var = ["capsuni", "piersici", "mar", "banana"];
• pentru(var I = 0; i< fruits.lenght; i++);
• document.write(fructe[i] + "...").

În acest exemplu, componentele par a fi plasate învecinate și încep de la prima parte care deține indicele zero. Dacă nu este cazul, înainte de a apela fiecare element al matricei, trebuie să verificați dacă este definit.

O buclă este de asemenea folosită uneori pentru a inițializa componente.

Creșterea și trunchierea matricei

Mă întreb cum să adaug un șir la o matrice folosind JavaScript? În procesul de lucru cu matrice, calitatea lungimii este îmbunătățită automat, motiv pentru care trebuie să avem grijă de asta. Este necesar să ne amintim un detaliu - proprietatea lungime nu este doar lizibilă, ci și scrisă. Dacă calității lungimii i se atribuie o valoare inferioară ca dimensiune față de cea actuală, atunci matricea este redusă la valoarea specificată. Orice componente care nu se află în noul interval de index sunt aruncate și valorile lor sunt pierdute, chiar dacă lungimea este returnată ulterior - valorile nu sunt restaurate.

Este destul de ușor să ștergeți o matrice ca aceasta: foo.length = 0.

Dacă calitatea lungimii este mai mare decât valoarea sa actuală, noi părți nesetate vor apărea la sfârșitul matricei, ceea ce o va crește la dimensiunea dorită.

Eliminarea detaliilor modelului

Operatorul de ștergere setează componenta matricei la nedefinit, în timp ce aceasta continuă să existe. Dacă doriți să eliminați un element dintr-o matrice JavaScript, astfel încât părțile rămase să fie mutate în spațiul liber, trebuie să utilizați una dintre metodele de matrice furnizate. Metoda Array.shift() elimină prima componentă, pop() componenta finală, iar metoda splice() elimină una sau o serie de componente oriunde în matrice.

Matricele sunt multidimensionale

Se pare că avem un pic de avans, matricele 2D sunt ceea ce trebuie să ne uităm în continuare. Vă amintiți că matricele JavaScript pot conține alte elemente ca componente? Această caracteristică este utilizată pentru a produce matrice multidimensionale. Pentru a vizita componente dintr-o serie de matrice, aplicați doar parantezele pătrate de două ori.

Matrice asociative

Acum haideți să explorăm modul în care marca comercială JavaScript folosește matricele asociative. Pentru a face acest lucru, trebuie să ne uităm la teorie: tablourile asociative sunt uneori numite tabele hash. Datorită lor, șirurile de caractere sunt folosite în loc de indecși. Utilizarea unor astfel de construcții seamănă cu utilizarea numelui unei proprietăți a unui obiect simplu, dar în acest caz, atunci când se efectuează lucrări într-un format de matrice. Deoarece nu există modalități în JavaScript de a opera pe tablouri asociative, acestea sunt utilizate mult mai puțin frecvent decât cele obișnuite. Trebuie remarcat faptul că acestea pot fi în continuare utile pentru stocarea datelor și ușurează reținerea detaliilor care trebuie accesate.

Ieșire matrice

Și ce vom studia acum în sistemul JavaScript? Afișarea unei matrice într-o casetă de dialog (pe ecranul monitorului), precum și afișarea valorilor componentelor matricei.

Dacă programul trebuie să afișeze valorile tuturor componentelor, atunci este convenabil să utilizați instrucțiunea for pentru aceasta. Interesant este că variabila for rule counter este folosită ca indice de componentă a matricei.

curatenie

Pentru a filtra o matrice JavaScript, trebuie să-i setați lungimea la zero:

• var myArray = ;
• myArray.length = 0.

• clear: function() (;
• această lungime = 0;
• returnează asta;

Adăugarea și eliminarea componentelor

Ei bine, continuăm să studiem în continuare acest limbaj JavaScript interesant. Un element de matrice poate fi atât eliminat, cât și adăugat în același mod ca proprietățile obișnuite ale altor obiecte. Dar există câteva diferențe aici: adăugarea de proprietăți numerice poate schimba calitatea lungimii, în timp ce modificarea proprietății lungime poate elimina proprietățile numerice. În principiu, algoritmul pentru setarea calităților matricelor este următorul:

• Când se adaugă o proprietate numerică necunoscută i, dacă lungimea este egală sau mai mică decât i, lungimea este determinată a fi i+1.
• Când se modifică calitatea lungimii, se efectuează următoarele acțiuni: dacă valoarea atribuită este mai mică decât zero, atunci este aruncată o RangeError. Eliminați toate calitățile numerice și indicii care sunt egali sau mai mari decât noua lungime.

În general, ștergerea unui element dintr-o matrice JavaScript este ușoară. La urma urmei, chiar și setarea lungimii, trebuie să eliminați componentele „extra” din ea. De aici și opțiunea de a șterge matricea. Dacă dintr-un motiv oarecare variabila alocată unei matrice noi nu ți se potrivea, dar este necesar să o resetați pe cea actuală, este suficient să setați calitatea lungimii la zero.

metode de unshift, shift, pop și push

Deși componentele matricei sunt modificate manual, mulți oameni recomandă utilizarea metodelor încorporate pentru a face acest lucru. Această nuanță este cea care garantează valoarea corectă a calității lungimii și absența golurilor în matrice. Apropo, lungimea de calitate corectă va corespunde numărului de componente.

Metoda push mută părțile trecute la sfârșitul matricei. Metoda pop redă componenta finală și o elimină.

În general, în Internet Explorer înainte de versiunea 8, unshift poate returna nedefinit, în alte browsere poate returna noua valoare a lungimii. Deci este mai bine să nu te bazezi pe valoarea returnată de la unshift.

Adăugarea și eliminarea detaliilor în mijlocul unei matrice

Dacă trebuie să ștergeți o matrice JavaScript, ce ar trebui să faceți? Se știe că metoda splice are semnătura Array.prototype.splice.

Îndepărtează componentele deleteCount din matrice, pornind de la indexul de pornire. Dacă sunt transmise mai mult de două argumente, atunci toate argumentele ulterioare din matrice sunt plasate în locul celor eliminate. Dacă startul este negativ, atunci indicele de la care se va relua retragerea va fi egal cu lungimea + start. Revenirea la matrice vine din elementele eliminate.

De fapt, folosind metoda splice, puteți elimina componente din mijlocul matricei sau puteți adăuga orice număr de componente oriunde în matrice.

În cea mai simplă versiune, dacă trebuie să eliminați o componentă cu index i, trebuie să solicitați metoda de îmbinare din matricea cu parametrii i și 1.

În principiu, al doilea parametru al metodei splice este opțional, dar comportamentul unei funcții cu un argument este diferit în fiecare browser.

De exemplu, în Firefox, în cele mai recente versiuni de Opera, în Safari și în Chrome, toate detaliile vor fi eliminate până la sfârșitul matricei.

În IE, niciuna dintre componente nu va fi distrusă. În primele variații ale Opera, comportamentul este imposibil de prezis - va fi eliminată o parte cu începutul indexului - 1. Prin urmare, cel puțin două componente trebuie întotdeauna trecute la această metodă.

Chei

Desigur, atunci când învățați JavaScript, matricele asociative, așa cum am menționat mai devreme, nu trebuie trecute cu vederea. Acesta este un tip abstract de informații (interfață cu depozitul de date), care vă permite să stocați perechi de forma „(cheie, valoare)” și să sprijine operațiunile de adăugare a unei perechi, precum și ștergerea și căutarea unei perechi prin cheie:

GĂSĂ (cheie).

INSERT(valoare, cheie).

ELIMĂ (cheie).

Se presupune că două perechi cu chei similare nu pot fi stocate într-o matrice asociativă. În perechea k + v v se numește valoarea asociată cheii k. Semantica și numele operațiilor de mai sus în diferite implementări ale unor astfel de matrice pot fi diferite.

Astfel, acțiunea FIND (cheie) returnează valoarea asociată cu cheia dată sau un anumit obiect UNDEF, ceea ce înseamnă că nu există nicio valoare asociată cu cheia dată. Celelalte două acțiuni nu returnează nimic (în afară de faptul că operațiunea a avut succes sau nu).

În general, din punctul de vedere al interfeței, este convenabil să se considere o matrice asociativă ca o matrice simplă, în care nu numai numerele întregi, ci și valori de alte tipuri, de exemplu, șiruri, pot fi folosite ca indici. .

Apropo, suportul pentru astfel de matrice este disponibil în multe limbaje de programare de nivel înalt, cum ar fi PHP, Perl, Ruby, Python, Tcl, JavaScript și altele. Pentru limbile care nu au instrumente încorporate pentru lucrul cu tablouri asociative, au fost create un număr mare de implementări sub formă de biblioteci.

Un exemplu de matrice asociativă este un agendă telefonică. În această variantă, valoarea este complexul „F. I. O. + adresa ”, iar cheia este numărul de telefon. Un număr de telefon are un singur proprietar, dar o persoană poate deține mai multe numere.

Extensii asociative

Trebuie remarcat faptul că cele mai faimoase extensii includ următoarele acțiuni:

• FIECARE - „plimbați” prin toate perechile salvate.
• CLEAR - eliminați toate înregistrările.
• MIN - găsiți perechea cu cea mai mică valoare a cheii.
• MAX - găsiți perechea cu cea mai mare valoare a cheii.

În ultimele două opțiuni, este necesar ca acțiunea de comparare să fie indicată pe taste.

Implementări de tablouri asociative

Există multe implementări diferite ale unui tablou asociativ. Cea mai comună implementare se poate baza pe o matrice simplă ale cărei componente sunt perechi (valoare, cheie). Pentru a accelera căutarea, puteți comanda componentele acestei matrice după cheie și puteți găsi folosind Dar acest lucru va crește timpul necesar pentru a adăuga o nouă pereche, deoarece va trebui să „împingeți” componentele matricei pentru a împacheta o nouă pereche. intrarea în celula goală care apare.

Cele mai cunoscute implementări se bazează pe diferiți arbori de căutare. De exemplu, într-un cititor C++ STL tipic, containerul hărții este implementat pe baza unui arbore negru și mahon. Stilurile Ruby, Tcl, Python folosesc unul dintre tipurile de tabel hash. Există și alte implementări.

În general, fiecare implementare are propriile avantaje și dezavantaje. Este important ca toate cele trei acțiuni să fie executate atât în ​​medie, cât și în cea mai proastă nuanță în perioada O(log n), unde n este numărul curent de perechi salvate. Pentru arborii de căutare potriviți (inclusiv arborii negru-roșu), această condiție este îndeplinită.

Se știe că în implementările bazate pe tabele hash, timpul mediu este definit ca O(1), care este mai bun decât în ​​acțiunile bazate pe arbori de căutare. Desigur, acest lucru nu garantează execuția de mare viteză a operațiilor individuale: timpul de execuție al lui INSERT este notat cu O(n) în cel mai rău caz. Procesul INSERT durează mult timp când factorul de umplere atinge punctul cel mai înalt și devine necesară reconstrucția indexului tabelului hash.

Apropo, aceste liste hash sunt proaste, deoarece pe baza lor este imposibil să se efectueze acțiuni suplimentare rapide MAX, MIN și algoritmul de ocolire a tuturor perechilor salvate în ordinea descrescătoare sau crescătoare a tastelor.

• Traducere

Majoritatea aplicațiilor care sunt dezvoltate astăzi necesită să interacționați cu un anumit set de date. Manipularea elementelor din colecții este o operațiune comună pe care probabil ați întâlnit-o. Când lucrați, de exemplu, cu matrice, puteți, fără ezitare, să utilizați bucla obișnuită for, care arată cam așa: for (var i=0; i< value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Să presupunem că trebuie să afișăm o listă de produse și, dacă este necesar, să o împărțim în categorii, să o filtram, să o căutăm, să modificăm această listă sau elementele acesteia. Poate că trebuie să efectuați rapid câteva calcule care vor implica elementele listei. De exemplu, trebuie să adăugați ceva la ceva, să înmulțiți ceva cu ceva. Există caracteristici în JavaScript care vă permit să rezolvați astfel de probleme mai rapid și mai convenabil decât folosind o buclă for obișnuită?

De fapt, există astfel de facilități în JavaScript. Unele dintre ele sunt luate în considerare în materialul, a cărui traducere vă prezentăm astăzi atenției. În special, vorbim despre operatorul spread, bucla for...of și metodele includes() , some() , every() , filter() , map() și reduce() . Aici vom vorbi în principal despre matrice, dar tehnicile discutate aici sunt de obicei potrivite pentru lucrul cu obiecte de alte tipuri.

Trebuie remarcat faptul că recenziile abordărilor moderne ale dezvoltării în JS includ de obicei exemple pregătite folosind funcții săgeți. Poate că nu le folosești foarte des – poate pentru că nu-ți plac, poate pentru că nu vrei să petreci prea mult timp învățând ceva nou sau poate pur și simplu nu ți se potrivesc. Prin urmare, aici, în majoritatea situațiilor, vor fi afișate două opțiuni pentru efectuarea acelorași acțiuni: utilizarea funcțiilor obișnuite (ES5) și utilizarea funcțiilor săgeată (ES6). Pentru cei care sunt începători cu funcțiile săgeată, rețineți că funcțiile săgeată nu sunt echivalente cu declarațiile și expresiile funcției. Nu ar trebui să înlocuiți unul cu celălalt. În special, acest lucru se datorează faptului că acest cuvânt cheie se comportă diferit în funcțiile obișnuite și cu săgeți.

1. Operator extensie

Operatorul de răspândire (operatorul de răspândire) vă permite să „deschideți” matrice, înlocuind în locul în care este folosit acest operator, în locul matricelor, elementele acestora. O abordare similară este propusă pentru literalele obiect.

▍Puntele tari ale operatorului de extensie

• Acesta este un mod simplu și rapid de a „trage” elemente individuale dintr-o matrice.
• Acest operator este potrivit pentru lucrul cu matrice și literale obiect.
• Acesta este un mod rapid și intuitiv de a lucra cu argumente ale funcției.
• Operatorul de răspândire nu ocupă mult spațiu în cod - arată ca trei puncte (...).

▍Exemplu

Să presupunem că sarcina dvs. este să tipăriți o listă cu deliciile preferate fără a folosi o buclă. Cu ajutorul operatorului de răspândire, acest lucru se face astfel:

2. Bucla for...of

Operatorul for...of este conceput pentru a traversa obiecte iterabile. Oferă acces la elemente individuale ale unor astfel de obiecte (în special, la elemente de matrice), ceea ce, de exemplu, permite modificarea acestora. Vă puteți gândi la el ca un înlocuitor pentru bucla for obișnuită.

▍Puntele forte ale buclei for...of

• Aceasta este o modalitate ușoară de a adăuga sau actualiza articole de colecție.
• Bucla for...of vă permite să efectuați diverse calcule folosind elemente (sumare, înmulțire și așa mai departe).
• Este convenabil să îl utilizați atunci când este necesar să verificați orice condiții.
• Utilizarea acestuia duce la scrierea unui cod mai curat și mai lizibil.

▍Exemplu

Să presupunem că aveți o structură de date care descrie conținutul unei casete de instrumente și doriți să afișați acele instrumente. Iată cum să o faci cu o buclă for...of:

3. include() metoda

Metoda includes() este folosită pentru a verifica dacă o colecție conține un element, în special, de exemplu, un anumit șir dintr-o matrice care conține șiruri. Această metodă returnează adevărat sau fals în funcție de rezultatele validării. Când îl utilizați, ar trebui să țineți cont de faptul că este sensibil la majuscule și minuscule. Dacă, de exemplu, colecția conține elementul șir SCHOOL , iar verificarea prezenței acestuia folosind includes() este efectuată pe școala șiruri , metoda va returna false .

▍Puntele forte ale metodei includes().

• Metoda includes() este utilă pentru a crea mecanisme simple de căutare a datelor.
• Oferă dezvoltatorului o modalitate intuitivă de a determina dacă există anumite date într-o matrice.
• Este convenabil să se folosească în expresii condiționale pentru modificarea, filtrarea elementelor și pentru efectuarea altor operații.
• Utilizarea acestuia duce la o lizibilitate îmbunătățită a codului.

▍Exemplu

Să presupunem că aveți un garaj, reprezentat de o serie de mașini, și nu știți dacă există sau nu o mașină în acel garaj. Pentru a rezolva această problemă, trebuie să scrieți un cod care vă permite să verificați dacă mașina se află în garaj. Să folosim metoda includes():

4. metoda unele().

Metoda some() vă permite să verificați dacă unele dintre elementele pe care le căutați există în matrice. Acesta, conform rezultatelor verificării, returnează adevărat sau fals. Este similar cu metoda includes() de mai sus, cu excepția faptului că argumentul său este mai degrabă o funcție decât, de exemplu, un șir obișnuit.

▍Puntele forte ale metodei some().

• Metoda some() vă permite să verificați dacă tabloul conține cel puțin unul dintre elementele de interes pentru noi.
• Efectuează un test de stare utilizând funcția transmisă acestuia.
• Această metodă este convenabilă de utilizat.

▍Exemplu

Să presupunem că ești proprietarul clubului și, în general, nu te interesează cine vine exact la clubul tău. Cu toate acestea, unii vizitatori nu au voie să intre în club, deoarece sunt predispuși la consumul excesiv de băuturi alcoolice, cel puțin dacă se întâmplă să se afle singuri în unitatea ta și nu există cu ei nimeni care să aibă grijă de ei. În acest caz, un grup de vizitatori poate intra în club doar dacă cel puțin unul dintre ei are cel puțin 18 ani. Pentru a automatiza acest tip de verificare, să folosim metoda some(). Utilizarea sa este prezentată mai jos în două versiuni.

ES5

ES6

5. fiecare() metoda

Metoda every() iterează peste matrice și verifică fiecare element cu o anumită condiție, returnând adevărat dacă toate elementele din matrice îndeplinesc condiția și false în caz contrar. Puteți vedea că este similar cu metoda some().

▍Puntele forte ale metodei every().

• Metoda every() vă permite să verificați dacă o condiție este îndeplinită de toate elementele unui tablou.
• Condițiile pot fi setate folosind funcții.
• Promovează o abordare declarativă a programării.

▍Exemplu

Să revenim la exemplul anterior. Acolo ai permis vizitatorilor sub 18 ani să intre în club, dar cineva a scris o declarație la poliție, după care ai ajuns într-o situație neplăcută. După ce ai reușit să rezolvi totul, ai decis că nu ai nevoie de toate acestea și ai înăsprit regulile pentru vizitarea clubului. Acum un grup de vizitatori poate intra în club doar dacă vârsta fiecărui membru al grupului este de cel puțin 18 ani. Ca și data trecută, vom lua în considerare rezolvarea problemei în două versiuni, dar de data aceasta vom folosi metoda every().

ES5

ES6

6. metoda filter().

Metoda filter() vă permite să creați, pe baza unui tablou, o nouă matrice care să conțină doar acele elemente ale matricei originale care satisfac o anumită condiție.

▍Punctele forte ale metodei filter().

• Metoda filter() vă permite să evitați modificarea matricei originale.
• Vă permite să scăpați de elementele inutile.
• Îmbunătățește lizibilitatea codului.

▍Exemplu

Să presupunem că trebuie să le selectați dintr-o listă de prețuri doar pe cele care sunt mai mari sau egale cu 30. Să folosim metoda filter() pentru a rezolva această problemă.

ES5

ES6

7. metoda map().

Metoda map() este similară cu metoda filter() prin faptul că returnează și o nouă matrice. Cu toate acestea, este folosit pentru a modifica elementele matricei originale.

▍Puntele forte ale metodei map().

• Metoda map() evită nevoia de a schimba elementele matricei originale.
• Cu ajutorul acestuia, este convenabil să modificați elementele matricelor.
• Îmbunătățește lizibilitatea codului.

▍Exemplu

Să presupunem că aveți o listă de produse cu prețuri. Managerul dumneavoastră are nevoie de o nouă listă de produse care au fost reduse în preț cu 25%. Să folosim metoda map() pentru a rezolva această problemă.

ES5

ES6

8. Metoda Reduce().

Metoda reduce() , în cea mai simplă formă a sa, vă permite să însumați elemente de tablouri numerice. Cu alte cuvinte, reduce matricea la o singură valoare. Acest lucru vă permite să îl utilizați pentru a efectua diverse calcule.

▍Puntele forte ale metodei reduce().

• Folosind metoda reduce(), puteți calcula suma sau media elementelor unui tablou.
• Această metodă accelerează și simplifică calculele.

▍Exemplu

Să presupunem că trebuie să vă calculați cheltuielile pentru săptămână, care sunt stocate într-o matrice. Să rezolvăm această problemă folosind metoda reduce().

ES5

ES6

Adaugă etichete

Array-urile pot fi manipulate prin diferite metode oferite de constructorul Array.

metode pop/push și shift/unshift

Luați în considerare metodele pop() și push(). Aceste metode permit matricelor să fie tratate ca stive. O stivă este o structură de date în care accesul la elemente este organizat conform principiului LIFO (în engleză last in - first out, "last in - first out"). Principiul stivei poate fi comparat cu un teanc de farfurii: pentru a lua a doua de sus, trebuie să o scoateți pe cea de sus. Cum funcționează este prezentat în figură:

Deci, să revenim la metodele push() și pop(). Metoda push() adaugă unul sau mai multe elemente noi la sfârșitul matricei și returnează noua lungime. Metoda pop() elimină ultimul element al matricei, scade lungimea matricei și returnează valoarea pe care a eliminat-o. Rețineți că ambele metode modifică matricea în loc, mai degrabă decât să creeze o copie modificată a acesteia.

var foo = ; // foo: foo.push(1,2); // foo: Returnează 2 foo.pop(); // foo: Returnează 2 foo.push(3); // foo: Returnează 2 foo.pop(); // foo: Returnează 3 foo.push(); // foo: ] Returnează 2 foo.pop() // foo: Returnează foo.pop(); // foo: Returnează 1 var fructe = ["pere", "banane", "mere"]; var cules = fructe.pop(); document.write("Mi-ai smuls " + ales); Încerca "

Metodele shift() și unshift() se comportă la fel ca pop() și push(), cu excepția faptului că inserează și elimină elemente la începutul matricei. Metoda unshift() mută elementele existente către indici mai mari pentru a face loc pentru elemente noi, adaugă unul sau mai multe elemente la începutul matricei și returnează noua lungime a matricei. Metoda shift() elimină primul element al unui tablou și returnează valoarea acestuia, deplasând toate elementele ulterioare pentru a ocupa spațiu la începutul matricei.

Var f = ; // f: f.unshift(1); // f: Returnează: 1 f.unshift(22); // f: Returnează: 2 f.shift(); // f: Returnează: 22 f.unshift(3,); // f:,1] Returnează: 3 f.shift(); // f:[,1] Returnează: 3 f.shift(); // f: Returnează: f.shift(); // f: Returnări: 1

metoda join

Metoda Array.join() este folosită pentru a uni elementele matricei într-un singur șir. Puteți trece un argument opțional șir metodei, care va fi folosit pentru a separa elementele din șir. Dacă delimitatorul nu este specificat, atunci caracterul delimitator implicit va fi o virgulă atunci când metoda este apelată.

Var a = ["Vânt","Ploaie","Foc"]; var myVar1 = a.join(); //"Vânt, Ploaie, Foc" var myVar2 = a.join(", "); //"Vânt, Ploaie, Foc" var myVar3 = a.join(" + "); //"Vânt + Ploaie + Foc" document.write(myVar1 + "
" + myVar2 + "
" + myVar3); Încercați »

Metoda Array.join() este inversa metodei String.split(), care creează o matrice prin împărțirea unui șir în bucăți.

metoda inversă

Metoda Array.reverse() inversează ordinea elementelor dintr-o matrice și returnează o matrice cu elementele rearanjate. Această metodă nu creează o nouă matrice cu elemente reordonate, ci le reordonează într-o matrice deja existentă.

Var myArr = [„unu”, „două”, „trei”]; document.write(myArr.reverse()); Încerca "

metoda concate

Metoda Array.concat() creează și returnează o nouă matrice care conține elementele matricei originale pe care a fost apelată metoda concat(), completată secvenţial cu valorile tuturor argumentelor transmise metodei concat(). Dacă oricare dintre aceste argumente este el însuși o matrice, atunci toate elementele sale vor fi adăugate. Numele de matrice sunt folosite ca argumente și sunt specificate în ordinea în care elementele lor vor fi concatenate.

Var a = ; a.concat(4, 5) //Returnează a.concat(); //același - returnează a.concat(,) //Returns

metoda de sortare

Metoda Array.sort() sortează elementele unui tablou în loc și returnează tabloul sortat. Dacă metoda sort() este apelată fără un argument, sortează elementele matricei în ordine alfabetică (convertindu-le temporar în șiruri de caractere pentru a efectua compararea). Ca argument, metoda sort() poate lua o funcție de comparație care determină ordinea de sortare a elementelor.

Var a = ["Kiwi", "Portocale", "Pere"]; a.sort(); vars = a.join(", "); //Portocale, Pere, Kiwi document.write(s); //exemplu cu numere var myArr = ; myArr.sort(); document.write(myArr); //1,10,2 Încercați »

Probabil te așteptai să vezi un rezultat ușor diferit de sortarea numerelor. Această sortare are loc deoarece metoda sort() sortează elementele transformându-le în șiruri. Prin urmare, ordinea pe care o primesc este șir - la urma urmei, „10”

Pentru a sorta într-o altă ordine decât alfabetică, puteți trece o funcție de comparație ca argument la metoda sort(). Cu toate acestea, trebuie remarcat faptul că funcția de comparare va trebui să fie scrisă de noi înșine. Această funcție trebuie să aibă doi parametri deoarece specifică care dintre cele două argumente ale sale ar trebui să apară primul în lista sortată. Pentru a facilita înțelegerea și scrierea unei astfel de funcție, există mai multe reguli prin care se va determina ordinea elementelor:

• Dacă primul argument trebuie să fie înaintea celui de-al doilea, funcția de comparare returnează un număr negativ (dacă a
• Dacă primul argument trebuie să-l urmeze pe al doilea, atunci funcția de comparare returnează un număr pozitiv (dacă a > b)
• Dacă două valori sunt echivalente (adică ordinea lor nu este importantă), funcția de comparare returnează 0 (dacă a == b)

Pentru comparație, funcția folosește elemente de matrice ca argumente:

Funcția foo(a,b) ( //definiți funcția de testare dacă (a b) returnează 1; returnează 0; //dacă a == b ) var a = ; a.sort(foo); //doar numele funcției este transmis ca argument document.write(a.join(", ")); //comandă rapidă aceeași var a = ; a.sort(funcția(a,b) ( //folosește funcția anonimă returnează a - b; //funcția returnează 0 )); document.write(a); //1,2,5,10 Încercați »

Prima intrare din exemplu este scrisă astfel pentru a face mai ușor de înțeles cum funcționează. Observați cât de convenabil este să utilizați o funcție anonimă în al doilea fragment. Se numește o singură dată, așa că nu este nevoie să-i dai un nume.

Notă: Dacă există elemente nedefinite în matrice, acestea sunt mutate la sfârșitul matricei.

metoda feliei

Metoda Array.slice() este folosită pentru a copia o porțiune specificată dintr-o matrice și returnează o nouă matrice care conține elementele copiate. Matricea originală nu se modifică.

Sintaxa metodei:

array_name.slice(begin, end);

Array_name ar trebui să fie înlocuit cu numele matricei din care doriți să extrageți un anumit set de elemente pentru noua matrice. Metoda ia două argumente care definesc începutul și sfârșitul secțiunii de matrice returnate. Metoda copiază secțiunea matricei începând de la început până la sfârșit, fără a include sfârșitul. Dacă este dat un singur argument, matricea returnată va conține toate elementele de la poziția specificată până la sfârșitul matricei. Puteți folosi indecși negativi - aceștia sunt numărați de la sfârșitul matricei.

Var arr = ; arr slice(0,3); //Returnează arr.slice(3); //Returns arr.slice(1,-1); //Returns arr.slice(-3,-2); //Se intoarce

metoda de îmbinare

Metoda Array.splice() este o metodă generică de lucru cu matrice. Modifică matricea în loc, mai degrabă decât să returneze o nouă matrice modificată, așa cum fac metodele slice() și concat(). Metoda de îmbinare poate elimina elemente dintr-o matrice, poate introduce elemente noi, poate înlocui elemente - câte unul și în același timp. Returnează o matrice formată din elementele eliminate, dacă niciunul dintre elemente nu a fost eliminat, va returna o matrice goală.

Sintaxa metodei:

array_name.splice(index , count, elem1, ..., elemN);

Primul argument specifică indexul din tablou de la care se începe inserarea sau ștergerea elementelor. Al doilea argument specifică numărul de elemente care urmează să fie eliminate din matrice începând cu indexul dat în primul argument, dacă al doilea argument este 0 atunci niciun element nu va fi eliminat. Dacă al doilea argument este omis, toate elementele matricei sunt eliminate din indexul specificat până la sfârșitul matricei. Când se utilizează un număr de poziție negativ, elementele vor fi numărate de la sfârșitul matricei.

Fructe de var = ["portocale", "mere", "pere", "struguri"]; var deleted = fruits.splice(2,2); //returns ["pere", "struguri"] document.write(deleted); var arr = ; arr.splice(4); // Se intoarce ; tabloul a devenit: arr.splice(1,2); // Se intoarce ; tabloul a devenit: arr.splice(1,1); // Se intoarce ; matricea a devenit: Încercați »

Primele două argumente ale metodei splice() specifică elementele matricei care trebuie eliminate. Aceste două argumente pot fi urmate de orice număr de argumente suplimentare care specifică elementele care urmează să fie inserate în matrice, începând de la poziția dată de primul argument.

Var fructe = ["portocale", "mere"]; fructe.splice(2,0, "pepeni verzi"); //returnează document.write(fructe); //a devenit ["portocale", "mere", "pepeni verzi"] var arr = ; arr.splice(2,0,"a","b"); // Se intoarce ; devenit arr.splice(2,2,); //Returns ["a","b"]; devenit ,3,4,5] Încercați »

Este de remarcat faptul că, spre deosebire de concat(), metoda splice() nu împarte matricele transmise ca argumente în elemente separate. Adică, dacă o matrice este transmisă metodei de inserat, aceasta inserează matricea în sine, nu elementele acelei matrice.

metoda toString

Metoda toString() convertește elementele unui tablou într-un șir folosind virgulă ca caracter delimitator.

Var arr = ["Lapte","Pâine","Cookies"]; var food = arr.toString(); document.write(mancare); //Lapte, pâine, prăjitură Încearcă »

Rețineți că metoda returnează același șir ca și metoda join() atunci când este apelată fără argumente.

indexOf și lastIndexOf

Metoda indexOf returnează indexul elementului a cărui valoare este egală cu valoarea transmisă metodei ca argument.

Sintaxa metodelor indexOf() și lastIndexOf():

nume_matrice.indexOf(element_căutare, index) nume_matrice.lastIndexOf(element_căutare, index)

Primul argument al metodei specifică valoarea elementului al cărui index urmează să fie găsit, al doilea argument (opțional) indică indexul de la care va începe căutarea. Dacă există mai multe apariții identice, se alege cel mai mic (primul) indice. Dacă elementul cu valoarea dorită nu este găsit, metoda va returna -1. În cadrul metodei, pentru căutare este utilizată o comparație strictă (===).

Var a = ; a.indexOf(3); // returnează 2 a.indexOf(3,4); // returnează 6 a.indexOf(35); // returnează -1: niciun element cu această valoare a.indexOf(2); // unu

Metoda lastIndexOf() returnează și indexul elementului a cărui valoare este egală cu valoarea transmisă metodei ca argument. Singura diferență este că metoda lastIndexOf() selectează cel mai mare (ultimul) index.

Var a = ; a.lastIndexOf(3); // returnează 7 a.lastIndexOf(35); // returnează -1: niciun element cu această valoare a.lastIndexOf(2); // 6

Metode iteratoare

Metodele descrise mai jos sunt iteratoare. Toate browserele moderne pentru lucrul cu matrice au metode care sunt concepute pentru a repeta peste elemente și pentru a efectua diverse acțiuni asupra acestora. Acestea sunt metodele forEach(), map(), filter(), every(), some, reduce() și reduceRight().

Ei iterează peste elementele matricei de la 0 la lungimea - 1 și, dacă elementul există, îl transmit funcției de gestionare a apelului înapoi.

pentru fiecare

Sintaxa metodei:

array_name.forEach(callback, thisArg)

Primul argument este funcția de apel invers pe care metoda forEach() o va apela pentru fiecare element al matricei. Trebuie să scrieți singur implementarea funcției de gestionare numită. Funcția apelată trebuie să aibă trei parametri: primul parametru ia ca argument - valoarea elementului matrice, al doilea - indexul elementului, iar al treilea - matricea în sine. Cu toate acestea, dacă doriți să utilizați doar valorile elementelor matricei, puteți scrie o funcție cu un singur parametru. Al doilea argument - thisArg (opțional) va fi transmis ca valoare this.

Var arr = ; funcția foo(valoare) (​var sum = valoare * this; return document.write(sum + "
"); ) arr.forEach(foo, 5); //al doilea argument va fi transmis ca valoare a acestui //exemplu cu trei parametri var a = ; a.forEach(function(el, idx, a) ( document. scrie( "a["+idx+"] = "+el+" în ["+a+"]
"); )); Încerca "

filtru

Sintaxa metodei:

array_name.filter(callback, thisObject)

Metoda filter() creează și returnează o nouă matrice care va conține doar acele elemente ale matricei pentru care funcția de apel invers returnează true.

Funcția isBig(element, index, array) ( // returnează numere care sunt mai mari sau egale cu 10 returnează (element >= 10); // dacă valoarea elementului este mai mare sau egală cu 10, expresia va returna true ) var filtrat = .filter(isBig) ; //filtrat

Hartă

Metoda map() creează și returnează o nouă matrice, care va consta din rezultatele apelării funcției callback(item, idx, ar) pentru fiecare element de matrice.

Var a = ; var b = a.map(function(item, idx, arr) ( return item * item; )); // b =

fiecare și unii

Metoda every() returnează adevărat dacă pentru toate elementele matricei, funcția specificată folosită pentru a le verifica returnează adevărat.

Metoda some() returnează adevărat dacă, în timpul testului în funcția specificată, unul sau mai multe elemente returnează adevărat.

Var a = ; a.fiecare(funcție(x) ( return x 10; )) //adevărat: un număr > 10

reduce și reduceDreapta

Sintaxa metodei:

array_name.reduce(callback, initialValue) array_name.reduceRight(callback, initialValue)

Metoda reduce() aplică funcția specificată (callback) la două valori din matrice simultan, parcurgând elementele de la stânga la dreapta, menținând în același timp rezultatul intermediar.

Argumente ale funcției de apel invers: (previousValue, currentItem, index, array)

• previousValue - rezultatul returnat al funcției de apel invers (aka rezultat intermediar)
• currentItem - elementul curent al matricei (elementele sunt sortate pe rând de la stânga la dreapta)
• index - indexul elementului curent
• array - matricea care trebuie procesată

initialValue (valoare de inițializare) - obiectul folosit ca prim argument al primului apel la funcția de apel invers. Mai simplu spus, valoarea previousValue la primul apel este egală cu initialValue. Dacă nu există initialValue, atunci este egal cu primul element al matricei, iar iterația începe de la al doilea:

Var a = ; function foo(prevNum,curNum) ( sum = prevNum + curNum; alert(sum); return sum; ) var rezultat = a.reduce(foo, 0); document.write(rezultat); Încerca "

Să vedem cum funcționează acest exemplu. Primele argumente ale funcției foo sunt:

• prevNum = 0 (deoarece initialValue este 0)
• curNum = 1 (elementul curent este primul element al matricei)

1 se adaugă la numărul 0. Acest rezultat (suma: 1) va fi trecut ca prevNum data viitoare când funcția este rulată. Și așa mai departe până când se ajunge la ultimul element. Rezultatul returnat este suma din ultima rundă, care este 15 (1+2+3+4+5).

Metoda reduceRight funcționează similar cu metoda reduce, dar iterează peste matrice de la dreapta la stânga:

Var a = ["h","o","m","e"]; bara de funcții(prevStr, curItem) ( return prevStr + curItem; ) document.write(a.reduceRight(bar)); //emoh

În JavaScript, precum și în alte limbaje de programare, sunt folosite diferite metode pentru a lucra cu matrice.

Metodele facilitează construirea logicii și implementarea acesteia într-un script.

Următoarele sunt metodele de bază pentru lucrul cu matrice în JS.

Apăsați

Metoda push() adaugă o valoare la sfârșitul matricei.

Fie arr = ; arr.push(312); jurnalul consolei(arr); // →

pop

Metoda pop() elimină ultimul element din matrice sau returnează valoarea acestuia.

Fie arr = ; arr.pop(); jurnalul consolei(arr); // →

Folosind capacitatea de a obține valoarea ultimului element al unui tablou ca exemplu, putem obține formatul imaginii:

Let img = "https://example.com/img/name.png"; let format = img.split(".").pop(); jurnal console (format); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

unshift

Metoda unshift() adaugă un element la începutul matricei.

Fie arr = ; arr.unshift(312); jurnalul consolei(arr); // →

schimb

Metoda shift() elimină primul element din matrice.

Fie arr = ; arr.shift(); jurnalul consolei(arr); // → ;

Trebuie să înțelegeți că atunci când utilizați metodele shift și unshift, fiecare element al matricei își schimbă indexul. Acest lucru poate încetini execuția programului dacă matricea este mare.

Despică

Metoda split() este folosită pentru a transforma un șir într-o matrice. Split împarte un șir (șir) după parametrul specificat.

Let str = „Anya, Masha, Sasha, Dasha”; // acesta este un șir let arr = str.split(", "); jurnalul consolei(arr); // → ["Anya", "Masha", "Sasha", "Dasha"] este o matrice

a te alatura

Metoda join() combină elementele unui tablou într-un șir folosind delimitatorul specificat în parametru.

Fie arr = ["Notpad++", "Sublime", "VSCode"]; // acesta este un tablou let str = arr.join(", "); console.log("Editoare de cod: " + str); // → „Editoare de cod: Notpad++, Sublime, VSCode”

felie

Metoda slice() creează o nouă matrice în care copiază elementele din sursă, începând de la elementul cu indexul primului parametru trecut la metodă, până la elementul cu indexul celui de-al doilea parametru.

De exemplu: slice(3, 7) va returna elemente cu indexurile 3, 4, 5, 6. Elementul cu indexul 7 nu va fi inclus în tablou.

Dacă un parametru cu o valoare negativă este trecut la slice(), atunci acesta returnează o nouă matrice cu numărul de elemente specificat în parametru, dar luate deja de la sfârșitul matricei originale.

Metoda slice nu modifică matricea originală.

Iată câteva exemple despre cum funcționează metoda slice():

Fie arr = ["A", "B", "C", "D", "E", "F", "G"]; // Returnează un tablou care conține elemente cu indici de la 2 la 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Returnează o nouă matrice care conține elemente cu indici de la 3 la arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Returnează o copie a matricei originale console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Returnează o nouă matrice formată din ultimele trei elemente ale console.log original (arr.slice (-3)); // → ["E", "F", "G"]

lipitură

Metoda splice() modifică conținutul unui tablou prin eliminarea elementelor existente și/sau adăugarea altora noi.

Sintaxă:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Parametri:

• start- Index la care să începeți modificarea matricei. Dacă este mai mare decât lungimea matricei, indexul real va fi setat la lungimea matricei. Dacă este negativ, specifică indicele elementului de la sfârșit.
• deleteCount- Un număr întreg care indică numărul de elemente vechi care trebuie eliminate din matrice. Dacă deleteCount este 0, nu se șterge niciun element. În acest caz, trebuie să specificați cel puțin un element nou. Dacă deleteCount este mai mare decât numărul de elemente rămase în matrice, începând de la începutul indexului, atunci toate elementele până la sfârșitul matricei vor fi șterse.
• articolN- Parametri optionali. Elemente de adăugat la matrice. Dacă nu specificați niciun element, splice() va elimina pur și simplu elementele din matrice.

Valoare returnată

Descriere

Dacă numărul de elemente specificat pentru a fi inserate este diferit de numărul de elemente care trebuie eliminate, matricea se va schimba lungimea după apel.

Fie arr = [Barca, Shakhtar, Manchester United, Milan, Real Madrid, Ajax, Juventus]; lat nax = arr.splice(2, 3); arr.splice(2, 3); jurnalul consolei(nax); // → ["Man Utd", "Milan", "Real"] console.log(arr); // → ["Baruri", "Shakhtar"] arr.splice(1, 0, "Zenith", "CSKA", "Spartak"); jurnalul consolei(arr); // → [Barca, Zenit, CSKA, Spartak, Shakhtar]

verso

Metoda reverse() inversează ordinea elementelor matricei. Ca rezultat, primul element al matricei devine ultimul, iar ultimul element devine primul.

Fie arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]

Hartă

Metoda map() parcurge elementele matricei, efectuând cu acestea acțiunile specificate și returnează o copie a matricei cu elementele modificate.

În exemplul de mai jos, pentru fiecare element al matricei, adăugați valoarea indexului acestui element (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Fie arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //

sau înmulțiți fiecare valoare a matricei, de exemplu, cu 12

Fie arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →

filtru

Metoda filter() este folosită pentru a filtra matrice. Iterează prin matrice, returnând doar acele elemente care trec condiția dată.

De exemplu, filtrăm valorile matricei din numere lăsând doar pe cele mai mari de 21

Fie arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →

Vă rugăm să rețineți că 21 nu a fost inclus în rezultatul matricei, deoarece condiția era să returneze ceva mai mare decât 21. Pentru ca 21 să fie inclus în matrice, atunci condiția este setată ca mai mare sau egală cu: element >= 21

reduce

Metoda reduce() trece secvenţial prin elementele matricei, în timp ce acumulează rezultatul intermediar conform acţiunii funcţiei specificate în condiţie. În final, returnează o singură valoare.

Adesea, această metodă este folosită pentru a găsi suma tuturor numerelor dintr-o matrice. Exemplu:

Fie arr = ; let summa = arr.reduce((acc, element) => acc + element); jurnalul consolei (summa); // → 370

fel

Metoda sort() este folosită pentru a sorta elementele unui tablou în funcție de parametrii dați.

Exemplu - luați o serie de numere și sortați-le în ordine crescătoare:

Fie arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →

include

Metoda includes() determină dacă o matrice conține un anumit element, returnând adevărat sau fals în funcție de asta.

Un exemplu de utilizare includes() .

Iată o expresie logică:

Let animal = „câine”; dacă (animal == „pisica” || animal == „câine” || animal == „leu” || animal == „cal”) ( // ........ )

folosind metoda includes, o puteți scrie astfel:

Let animal = „câine”; const animale = ["pisica", "câine", "leu", "cal"]; dacă (animale.include(animal)) ( // ........... )

Învățați să indexați matrice în js, să eliminați și să adăugați elementele acestora.

O matrice în JavaScript este un obiect global conceput pentru a stoca o listă de valori.

Este similar cu alte variabile prin faptul că poate stoca orice tip de date. Dar o matrice are o diferență importantă față de o variabilă: poate stoca mai mult de un element la un moment dat.

Un tablou este o colecție ordonată de valori. Fiecare valoare se numește element și are propriul său număr, care se numește index.

Un element dintr-o matrice poate fi de orice tip. Mai mult, elementele unei matrice pot fi de diferite tipuri: numere, șiruri, elemente logice și chiar obiecte sau alte matrice.

Ordinea elementelor matricei este bazată pe 0. Se pare că tabloul va avea întotdeauna un index compensat cu unu: primul element va avea un indice de 0, al doilea va avea un indice de 1 și așa mai departe.

Iată un exemplu de matrice cu elemente de diferite tipuri:

Crearea (declararea) unui tablou

Matricele sunt foarte convenabile, deoarece puteți stoca în ele câte date aveți nevoie. Dimensiunea maximă posibilă a matricei js este de 2 32 de elemente.

Trebuie să spunem JavaScript că vrem să creăm o matrice. Există două opțiuni pentru aceasta: valoarea între paranteze drepte sau noul cuvânt cheie.

Stenografie: folosind paranteze drepte

O listă de valori separate prin virgulă, cuprinsă între paranteze drepte.

var myArray = [ "Jack", "Sawyer", "John", "Desmond" ];

Conținutul matricei este determinat de ceea ce se află între paranteze drepte. Fiecare valoare este separată prin virgulă.

Valorile sunt stabilite în același mod ca variabilele simple, adică șirurile de caractere trebuie declarate între ghilimele etc.

Pentru a declara o matrice goală, lăsați parantezele goale:

var myArray = ;

Notă lungă: Utilizarea constructorului Array().

var lostArray = new Array ("Jack", "Sawyer", "John", "Desmond"); var twinPeaksArray = new Array("Laura", 2, ["Bob", "Leland", "Dale"]);

Noul cuvânt cheie îi spune JavaScript să creeze o nouă matrice ale cărei valori sunt transmise ca parametri.

Dacă știți dinainte câte elemente va avea matricea dvs., puteți trece imediat această valoare în constructor.

var myArray = new Array(80);

Expresia de mai sus va crea o matrice goală de 80 de sloturi cu valori nedefinite.

Declarație de matrice goală:

var myArray = new Array();

Accesarea elementelor matricei

Folosind indexul fiecărui element, puteți lucra cu orice date din matrice, accesându-le folosind operatorul:

var myArray = ["Jack", "Sawyer", "John", "Desmond"]; jurnalul consolei(myArray); // Tipărește „Jack” console.log(myArray); // Tipărește „Desmond”

O matrice poate avea mai multe niveluri, ceea ce înseamnă că fiecare element poate fi el însuși o matrice. Rezultatul este un js-array bidimensional. Cum să vă referiți la aceste matrice, care sunt situate în interiorul altora - " tablouri multidimensionale»?

De exemplu, să considerăm o matrice care reprezintă o familie. Copiii din această familie sunt înregistrați într-o matrice separată în interiorul celei principale:

var familyArray = ["Marge", "Homer", ["Bart", "Lisa", "Maggie"]];

Acesta poate fi reprezentat astfel:

Pentru a face referire la valoarea „Lisa”:

varlisa = familyArray; jurnalul consolei(lisa); // tipărește „Lisa”

Acest lucru poate fi continuat aproape la nesfârșit, ceea ce vă permite să stocați seturi de date imbricate în matrice și să le accesați folosind indecși.

Adăugarea de elemente la o matrice

Ne-am dat seama cum să accesăm elementele unui tablou folosind indicii lor respectivi. În mod similar, puteți adăuga (sau modifica) elemente declarând, de exemplu:

var myArray = [ "Kate", "Sun"]; myArray = „Julieta”; jurnalul consolei(myArray); // Tipărește „Kate, Sun, Juliet”

Ce se întâmplă dacă declar un element la un index care nu are alte elemente înaintea lui? Matricea în sine va crea toate elementele lipsă și le va atribui valoarea nedefinită:

var myArray = ["Kate", "Sun"]; myArray = „Julieta”; console.log(myArray.length); // Imprimă „6” console.log(myArray); // Tipărește ["Kate", "Sun", nedefinit, nedefinit, nedefinit, "Juliet"]

Puteți afla cât de lungă este o matrice js utilizând proprietatea length. În exemplul de mai sus, există șase elemente în matrice, iar trei dintre ele nu au primit o valoare - sunt marcate ca nedefinite.

metoda push().

Folosind metoda push(), puteți adăuga unul sau mai multe elemente la matricea js. Push() acceptă un număr nelimitat de parametri, toți vor fi adăugați la sfârșitul matricei.

var myArray = [ "Kate", "Sut"]; myArray.push(„Juliet”); // Adaugă elementul „Juliet” la sfârșitul matricei myArray.push(“Libby”, „Shannon”);// Adaugă elementele „Libby” și „Shannon” la sfârșitul matricei console.log(myaArray ); // Tipărește ["Kate", "Soon", "Juliet", "Libby", "Shannon"]

metoda unshift().

Metoda unshift() funcționează la fel ca push() , cu excepția faptului că adaugă elemente la începutul matricei.

var myArray = [ "Kate", "Sun"]; myArray.unshift(„Juliet”); // Adaugă elementul "Juliet" la începutul matricei myArray.unshift("Libby", "Shannon"); // Adaugă elementele „Libby” și „Shannon” la începutul matricei console.log(myArray); // Iese ["Libby", "Shannon", "Juliet", "Kate", "Sun"]

Eliminarea elementelor matricei

metodele pop() și shift().

Metodele pop() și shift() elimină ultimul și, respectiv, primul element al unui tablou:

var myArray = ["Jack", "Sawyer", "John", "Desmond", "Kate"]; myArray.pop(); // Îndepărtează elementul "Kate" myArray.shift(); // Îndepărtează elementul "Jack" console.log(myArray); // Iese ["Sawyer", "John", "Desmond"]

metoda splice().

Folosind metoda splice(), puteți elimina sau adăuga elemente într-o matrice, specificând în același timp indexul exact al elementelor.

În exemplul următor, metoda splice() adaugă două elemente începând cu indexul 2 ( adică din al treilea element):

var fruitArray = ["măr", "piersică", "portocală", "lămâie", "lime", "cireș"]; fruitArray.splice(2, 0, "pepene galben", "banana"); console.log(fruitArray); // Iese ["măr", "piersică", "pepene", "banana", "portocală", "lămâie", "lai verde", "cireș"]

Primul parametru al metodei splice() este un index. Specifică în ce poziție să adăugați/eliminați elemente. În exemplul nostru, am ales indicele 2 ( adică „portocaliu”).

Al doilea parametru este numărul de elemente care trebuie eliminate. Am specificat o valoare de 0, deci nimic nu va fi șters.

Următorii parametri sunt opționali. Ele adaugă noi valori matricei. În cazul nostru, trebuie să adăugăm „pepene” și „banană”, începând cu indicele 2.