Matrice javascript imbricate. Metode de matrice JavaScript

• Traducere

Majoritatea aplicațiilor dezvoltate în zilele noastre necesită interacțiune 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 tablouri, puteți, fără să vă gândiți, să utilizați o buclă for obișnuită, 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ă filtram, să căutăm prin ea, să modificăm această listă sau elementele acesteia. Poate că trebuie să efectuați rapid câteva calcule care implică elementele unei liste. Să presupunem că trebuie să adăugați ceva cu ceva, să înmulțiți ceva cu ceva. Este posibil să găsiți instrumente î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 discutate î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(). Vom vorbi în mare parte despre matrice aici, dar tehnicile discutate aici sunt în general potrivite pentru lucrul cu alte tipuri de obiecte.

Trebuie remarcat faptul că recenziile abordărilor moderne ale dezvoltării 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 sunt potrivite pentru tine. 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 nu lucrează cu funcții de săgeți, funcțiile de săgeți nu sunt echivalentul declarațiilor și expresiilor de funcție. 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 vă permite să „extindeți” matrice prin înlocuirea elementelor lor în loc de matrice în locul în care este utilizat acest operator. O abordare similară a fost propusă pentru literalele obiect.

▍Puntele tari ale operatorului de expansiune

• 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.
• Aceasta este o metodă rapidă și intuitivă de lucru cu argumentele funcției.
• Operatorul de extensie nu ocupă mult spațiu în cod - arată ca trei puncte (...).

▍Exemplu

Să presupunem că ai sarcina de a enumera tratările tale preferate fără a folosi o buclă. Folosind operatorul de extensie, acest lucru se face astfel:

2. Buclă pentru...de

Instrucțiunea 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, le permite să fie modificate. Poate fi considerat un înlocuitor pentru bucla for obișnuită.

▍Puntele forte ale buclei for...of

• Aceasta este o modalitate simplă de a adăuga sau actualiza articole de colecție.
• Bucla for…of vă permite să efectuați diferite calcule folosind elemente (sumare, înmulțire și așa mai departe).
• Este convenabil de utilizat atunci când trebuie 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 folosind o buclă for...of:

3. Metoda includes().

Metoda includes() este folosită pentru a verifica prezența unui anumit element într-o colecție, în special, de exemplu, un anumit șir într-o matrice care conține șiruri. Această metodă returnează adevărat sau fals în funcție de rezultatele testului. Când îl utilizați, merită să luați în considerare faptul că este sensibil la majuscule și minuscule. Dacă, de exemplu, colecția conține elementul șir SCHOOL și include() verificări pentru prezența sa folosind școala șir, metoda va returna false.

▍Punctele forte ale metodei includes().

• Metoda includes() este utilă în crearea unor mecanisme simple de regăsire a datelor.
• Oferă dezvoltatorului o modalitate intuitivă de a determina prezența anumitor date într-o matrice.
• Este convenabil să se folosească în expresii condiționale pentru a modifica, filtra elemente și a efectua alte operații.
• Utilizarea acestuia duce la îmbunătățirea lizibilității codului.

▍Exemplu

Să presupunem că aveți un garaj, reprezentat printr-o matrice cu o listă de mașini și nu știți dacă o anumită mașină se află sau nu în acest garaj. Pentru a rezolva această problemă, trebuie să scrieți un cod care vă permite să verificați dacă o mașină 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. Pe baza 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() ne permite să verificăm dacă tabloul conține cel puțin unul dintre elementele care ne interesează.
• Efectuează un test de stare folosind funcția care i-a fost transmisă.
• Această metodă este convenabilă de utilizat.

▍Exemplu

Să presupunem că ești proprietarul unui club ș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 pentru că sunt predispuși la consumul excesiv de băuturi alcoolice, cel puțin dacă se găsesc singuri în unitatea dvs. și nu este nimeni cu ei 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, vom folosi metoda some(). Mai jos aplicarea sa este demonstrată în două versiuni.

ES5

ES6

5. Metoda Fiecare().

Metoda every() iterează printr-o matrice și testează fiecare element cu o anumită condiție, returnând adevărat dacă toate elementele matricei se potrivesc cu 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ă toate elementele unui tablou îndeplinesc o condiție.
• 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 te-ai trezit într-o situație neplăcută. După ce totul a fost rezolvat, 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ă fiecare membru al grupului are 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 unei anumite matrice, 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() evită 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 numai 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.
• Poate fi folosit pentru a modifica în mod convenabil elementele matricei.
• Î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 ale căror prețuri au fost reduse cu 25%. Să folosim metoda map() pentru a rezolva această problemă.

ES5

ES6

8. metoda reduce().

Metoda reduce(), în forma sa cea mai simplă, vă permite să însumați elementele tablourilor numerice. Cu alte cuvinte, reduce matricea la o singură valoare. Acest lucru vă permite să îl utilizați pentru a efectua diferite 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

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

Metodele simplifică construcția logicii și implementarea acesteia într-un script.

Mai jos 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); console.log(arr); // →

pop

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

Fie arr = ; arr.pop(); console.log(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(); console.log(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); console.log(arr); // →

schimb

Metoda shift() elimină primul element din matrice.

Fie arr = ; arr.shift(); console.log(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 în funcție de parametrul specificat.

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

a te alatura

Metoda join() combină elemente de matrice într-un șir folosind delimitatorul specificat în parametru.

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

felie

Metoda slice() creează o nouă matrice în care copiază elemente din sursă, începând de la elementul cu indicele primului parametru trecut la metodă, până la elementul cu indicele 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 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 de metoda slice() în acțiune:

Fie arr = ["A", "B", "C", "D", "E", "F", "G"]; // Returnează un tablou care conține elemente cu indecși 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[, ...]]])

Opțiuni:

• start- Indexul la care se începe schimbarea 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 elemente 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", "Ajax", "Juventus"]; lat nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["Manchester United", "Milan", "Real"] console.log(arr); // → ["Barca", "Shakhtar"] arr.splice(1, 0, "Zenit", "CSKA", "Spartak"); console.log(arr); // → [Barça, 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() trece prin elementele matricei, efectuând acțiuni specificate asupra acestora și returnează o copie a matricei cu elementele modificate.

În exemplul de mai jos, la fiecare element de matrice adăugăm 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 o anumită condiție.

De exemplu, să filtram valorile unei matrice de 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, am stabilit condiția ca mai mare sau egală cu: element >= 21

reduce

Metoda reduce() parcurge secvențial elementele matricei, acumulând rezultatul intermediar conform funcției specificate în condiția funcției. În rezultatul final, returnează o singură valoare.

Această metodă este adesea folosită pentru a găsi suma tuturor numerelor dintr-o matrice. Exemplu:

Fie arr = ; let summa = arr.reduce((acc, element) => acc + element); console.log(sumă); // → 370

fel

Metoda sort() este folosită pentru a sorta elementele matricei în funcție de parametri specificați.

Exemplu - să luăm o serie de numere și să le sortăm în ordine crescătoare:

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

include

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

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)) ( // ........... )

Matrice

Matrice este o colecție ordonată de valori. Valorile dintr-o matrice se numesc elemente, iar fiecare element este caracterizat de o poziție numerică în matrice, numită index. Matricele în JavaScript sunt netipizate: elementele unei matrice pot fi de orice tip, iar elementele diferite ale aceleiași matrice pot avea tipuri diferite. Elementele de matrice pot fi chiar obiecte sau alte matrice, permițându-vă să creați structuri de date complexe, cum ar fi matrice de obiecte și matrice de matrice.

Indicii de matrice JavaScript încep de la zero și folosesc numere întregi de 32 de biți - primul element al matricei are indicele 0. Matricele JavaScript sunt dinamice: pot crește și micșora dimensiunea după cum este necesar; nu este nevoie să declarați dimensiuni fixe ale matricei atunci când le creați sau să realocați memorie atunci când dimensiunile lor se schimbă.

Matricele în JavaScript sunt o formă specializată de obiecte, iar indicii de matrice înseamnă puțin mai mult decât nume de proprietăți, care întâmplător sunt numere întregi.

Crearea de tablouri

Cel mai simplu mod de a crea o matrice este de a folosi un literal, care este o simplă listă de elemente de matrice, separate prin virgulă, înconjurate de paranteze drepte. Valorile dintr-un literal de matrice nu trebuie să fie constante - pot fi orice expresii, inclusiv literale obiect:

Var gol = ; // Matrice goală var numere = ; // Matrice cu cinci elemente numerice var misc = [ 1.1, true, "a", ]; // 3 elemente de diferite tipuri + virgulă finală var bază = 1024; var table = ; // Matrice cu variabile var arrObj = [, ]; // 2 tablouri în interior care conțin obiecte

Sintaxa literală a matricei vă permite să inserați o virgulă finală opțională, de ex. literalul [,] se potrivește cu o matrice cu două elemente, nu trei.

O altă modalitate de a crea o matrice este apelarea constructorului matrice (). Puteți apela constructorul în trei moduri diferite:

Apelați constructorul fără argumente:

Var arr = nou Array();

În acest caz, va fi creată o matrice goală, echivalentă cu literalul.

Apelați constructorul cu un singur argument numeric care specifică lungimea matricei:

Var arr = nou Array(10);

În acest caz, va fi creată o matrice goală de lungimea specificată. Această formă de apelare a constructorului Array() poate fi folosită pentru a pre-aloca memorie pentru o matrice dacă numărul elementelor sale este cunoscut dinainte. Rețineți că aceasta nu stochează nicio valoare în matrice.

Specificați în mod explicit valorile primelor două sau mai multe elemente de matrice sau a unui element nenumeric în apelul constructorului:

Var arr = new Array(5, 4, 3, 2, 1, "test");

În acest caz, argumentele către constructor devin valorile elementelor noii matrice. Utilizarea literalelor matrice este aproape întotdeauna mai ușoară decât utilizarea constructorului Array().

Citirea și scrierea elementelor de matrice

Elementele matricei sunt accesate cu ajutorul operatorului. În stânga parantezelor trebuie să existe o referință de matrice. În paranteze trebuie să existe o expresie arbitrară care returnează o valoare întreagă nenegativă. Această sintaxă este utilă atât pentru citirea, cât și pentru scrierea valorii unui element de matrice. Prin urmare, toate următoarele instrucțiuni JavaScript sunt valide:

// Creați o matrice cu un element var arr = ["world"]; // Citiți elementul 0 var value = arr; // Scrieți valoarea elementului 1 arr = 3,14; // Scrieți valoarea elementului 2 i = 2; arr[i] = 3; // Scrieți valoarea elementului 3 arr = "bună ziua"; // Citiți elementele 0 și 2, scrieți valoarea în elementul 3 arr] = arr;

Permiteți-mi să vă reamintesc că tablourile sunt un tip specializat de obiect. Parantezele pătrate folosite pentru a accesa elementele matricei acționează exact la fel ca parantezele pătrate folosite pentru a accesa proprietățile obiectului. Interpretul JavaScript convertește indecșii numerici din paranteze în șiruri de caractere — indexul 1 devine șirul „1” — și apoi folosește șirurile ca nume de proprietate.

Nu este nimic special în conversia indicilor numerici în șiruri de caractere: puteți face același lucru cu obiectele obișnuite:

Var obj = (); // Creați un obiect simplu obj = "unul"; // Indexați-l cu numere întregi

Lucrul cu matrice este că atunci când utilizați nume de proprietate care sunt numere întregi nenegative, matricele determină automat valoarea proprietății lungime. De exemplu, mai sus am creat o matrice arr cu un singur element. Apoi a atribuit valori elementelor sale la indecșii 1, 2 și 3. Ca urmare a acestor operațiuni, valoarea proprietății lungime a tabloului s-a schimbat la 4.

Ar trebui să distingeți clar indecșii dintr-o matrice de numele proprietăților obiectelor. Toți indicii sunt nume de proprietăți, dar numai proprietățile cu nume reprezentate prin numere întregi sunt indici. Toate tablourile sunt obiecte și le puteți adăuga proprietăți cu orice nume. Cu toate acestea, dacă atingeți proprietăți care sunt indici de matrice, matricele răspund prin actualizarea valorii proprietății lungime după cum este necesar.

Vă rugăm să rețineți că numerele negative și non-întregi pot fi folosite ca indici de matrice. În acest caz, numerele sunt convertite în șiruri de caractere, care sunt folosite ca nume de proprietăți.

Adăugarea și eliminarea elementelor de matrice

Am văzut deja că cel mai simplu mod de a adăuga elemente la o matrice este de a atribui valori noilor indici. De asemenea, puteți utiliza metoda pentru a adăuga unul sau mai multe elemente la sfârșitul matricei. Apăsaţi():

Var arr = ; // Creați o matrice goală arr.push("zero"); // Adăugați o valoare la final arr.push("one",2); // Adăugați încă două valori

De asemenea, puteți adăuga un element la sfârșitul matricei, atribuind o valoare elementului arr. Pentru a insera un element la începutul unui tablou, puteți folosi metoda unshift(), care mută elementele existente în matrice în poziții cu indici mai mari.

Puteți șterge elemente de matrice folosind operatorul de ștergere, la fel ca proprietățile obișnuite ale obiectului:

Var arr = ; șterge arr; 2 în arr; // fals, indexul 2 din matrice nu este definit arr.length; // 3: operatorul de ștergere nu modifică proprietatea de lungime a matricei

Eliminarea unui element este similară (dar ușor diferită) cu alocarea valorii nedefinite acelui element. Rețineți că aplicarea operatorului de ștergere la un element de matrice nu modifică valoarea proprietății lungime și nici nu deplasează în jos elementele cu indici mai mari pentru a umple golul lăsat prin ștergerea elementului.

De asemenea, este posibil să eliminați elemente la sfârșitul unui tablou prin simpla atribuire a unei noi valori proprietății lungime. Array-urile au o metodă pop()(opusul metodei push()), care reduce lungimea matricei cu 1 și returnează valoarea elementului eliminat. Există și o metodă schimb()(opusul metodei unshift()), care elimină elementul de la începutul matricei. Spre deosebire de operatorul de ștergere, metoda shift() mută toate elementele în jos într-o poziție sub indexul lor curent.

În cele din urmă, există o metodă multifuncțională lipitură(), care vă permite să inserați, să ștergeți și să înlocuiți elemente de matrice. Schimbă valoarea proprietății lungime și mută elementele matricei la indecși mai mici sau mai mari, după cum este necesar. Ne vom uita la toate aceste metode puțin mai târziu.

Matrice multidimensionale

JavaScript nu acceptă matrice multidimensionale „adevărate”, dar oferă o modalitate bună de a le simula folosind matrice de matrice. Pentru a accesa un element de date dintr-o matrice de matrice, pur și simplu utilizați operatorul de două ori.

De exemplu, să presupunem că matricea variabilă este o matrice de matrice de numere. Fiecare element al matricei[x] este o matrice de numere. Pentru a accesa un anumit număr dintr-o matrice, puteți utiliza expresia matrice [x][y]. Mai jos este un exemplu specific în care o matrice bidimensională este folosită ca tabelă de înmulțire:

// Creați o matrice multidimensională var table = new Array(10); // Există 10 rânduri în tabel pentru (var i = 0; i

Metode ale clasei Array

Standardul ECMAScript 3 definește Array.prototype ca un set de funcții convenabile pentru lucrul cu matrice, care sunt disponibile ca metode pe orice matrice. Aceste metode vor fi prezentate în următoarele subsecțiuni.

metoda join().

Metoda Array.join() convertește toate elementele matricei în șiruri de caractere, le unește și returnează șirul rezultat. Ca argument opțional, puteți trece un șir metodei care va fi folosită pentru a separa elementele din șirul rezultat. Dacă nu este specificat un șir delimitator, se folosește o virgulă. De exemplu, următorul fragment are ca rezultat șirul „1,2,3”:

Var arr = ; arr.join(); // "1,2,3" arr.join ("-"); // „1-2-3”

metoda reverse().

Metoda Array.reverse() inversează ordinea elementelor dintr-o matrice și returnează o matrice reordonată. Permutarea se realizează direct în matricea originală, adică. Această metodă nu creează o nouă matrice cu elementele reordonate, ci mai degrabă le reordonează într-o matrice deja existentă. De exemplu, următorul fragment, folosind metodele reverse() și join(), are ca rezultat șirul „3,2,1”:

Var arr = ; arr.reverse().join(); // "3,2,1"

metoda sort().

Metoda Array.sort() sortează elementele din tabloul sursă și returnează tabloul sortat. Dacă metoda sort() este apelată fără argumente, sortarea se face în ordine alfabetică (elementele sunt convertite temporar în șiruri de caractere pentru comparare dacă este necesar). Elementele nedefinite sunt mutate la sfârșitul matricei.

Pentru a sorta în altă ordine decât alfabetică, puteți trece o funcție de comparație ca argument la metoda sort(). Această funcție stabilește care dintre cele două argumente ale sale ar trebui să apară primul în lista sortată. Dacă primul argument trebuie să vină înaintea celui de-al doilea, funcția de comparare trebuie să returneze un număr negativ. Dacă primul argument îl urmează pe al doilea într-o matrice sortată, atunci funcția trebuie să returneze un număr mai mare decât zero. Și dacă două valori sunt echivalente (adică ordinea lor nu contează), funcția de comparație ar trebui să returneze 0:

Var arr = ; arr.sort(); // Ordine alfabetică: 1111, 222, 33, 4 arr.sort(function(a,b) ( // Ordine numerică: 4, 33, 222, 1111 returnează a-b; // Returnează 0 // în funcție de ordinea de sortare a și b)); // Sortează în sens invers, de la cel mai mare la cel mai mic arr.sort(function(a,b) (return b-a));

Observați cât de convenabil este să utilizați o funcție fără nume în acest fragment. Funcția de comparare este folosită doar aici, deci nu este nevoie să-i dea un nume.

metoda concat().

Metoda Array.concat() creează și returnează o nouă matrice care conține elementele matricei originale pe care a fost apelat concat() și valorile oricăror argumente transmise la concat(). Dacă oricare dintre aceste argumente este el însuși o matrice, elementele sale sunt adăugate la tabloul returnat. Trebuie remarcat, totuși, că nu există o transformare recursivă a unei matrice de matrice într-o matrice unidimensională. Metoda concat() nu modifică tabloul original. Mai jos sunt câteva exemple:

Var arr = ; arr.concat(4, 5); // Returnează arr.concat(); // Întoarce arr.concat(,) // Întoarce arr.concat(4, ]) // Întoarce ]

metoda slice().

Metoda Array.slice() returnează o porțiune, sau un subbary, din tabloul specificat. Cele două argumente ale metodei specifică începutul și sfârșitul fragmentului returnat. Matricea returnată conține elementul al cărui număr este specificat în primul argument, plus toate elementele ulterioare, până la (dar fără a include) elementul al cărui număr este specificat în al doilea argument.

Dacă este dat un singur argument, tabloul returnat conține toate elementele de la poziția de început până la sfârșitul matricei. Dacă oricare dintre argumente este negativ, acesta determină numărul elementului relativ la sfârșitul matricei. Deci, argumentul -1 corespunde ultimului element al tabloului, iar argumentul -3 corespunde celui de-al treilea element al tabloului de la sfârșit. Aici sunt cateva exemple:

Var arr = ; arr.slice(0,3); // Returnează arr.slice(3); // Returnează arr.slice(1,-1); // Returnează arr.slice(-3,-2); // Întoarcere

metoda splice().

Metoda Array.splice() este o metodă generică care efectuează inserarea sau ștergerea elementelor matricei. Spre deosebire de metodele slice() și concat(), metoda splice() modifică tabloul original pe care a fost apelată. Rețineți că metodele splice() și slice() au nume foarte asemănătoare, dar efectuează operații complet diferite.

Metoda splice() poate elimina elemente dintr-o matrice, poate introduce elemente noi sau poate face ambele în același timp. Elementele matricei sunt deplasate după cum este necesar pentru a crea o secvență continuă după inserare sau ștergere.

Primul argument al metodei splice() specifică poziția din matrice din care se va efectua inserarea și/sau ștergerea. Al doilea argument specifică numărul de elemente care ar trebui eliminate (tăiate) din matrice. Dacă al doilea argument este omis, toate elementele matricei de la specificat până la sfârșitul matricei sunt eliminate. Metoda splice() returnează o matrice a elementelor eliminate sau (dacă niciun element nu a fost eliminat) o matrice goală.

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

Var arr = ; arr.splice(4); // Return , arr = arr.splice(1,2); // Return , arr = arr.splice(1,1); // Întoarcere ; arr = arr = ; arr.splice(2,0,"a","b"); // Întoarcere ; arr =

metodele push() și pop().

Metodele push() și pop() vă permit să lucrați cu matrice ca și cum ar fi stive. Metoda push() adaugă unul sau mai multe elemente noi la sfârșitul matricei și returnează noua lungime. Metoda pop() efectuează operația inversă - elimină ultimul element al matricei, reduce lungimea matricei și returnează valoarea pe care a eliminat-o. Rețineți că ambele metode modifică matricea originală, mai degrabă decât să creeze o copie modificată a acesteia.

metodele unshift() și shift().

Metodele unshift() și shift() se comportă aproape la fel ca push() și pop(), cu excepția faptului că inserează și elimină elemente la începutul matricei, mai degrabă decât la sfârșit. Metoda unshift() mută elementele existente la indici mai mari pentru a elibera spațiu, adaugă elementul sau elementele la începutul matricei și returnează noua lungime a matricei. Metoda shift() elimină și returnează primul element al matricei, deplasând toate elementele ulterioare cu o poziție în jos pentru a ocupa spațiul liber la începutul matricei.

• Traducere

• I. Iterarea peste matrice reale
  1. pentruFiecare metodă și metode aferente
  2. pentru buclă
  3. Utilizarea corectă a buclei for...in
  4. for...of loop (utilizarea implicită a iteratorului)
  5. Utilizarea explicită a iteratorului
• 1. Folosind metode de iterare peste matrice reale
  2. Convertiți într-o matrice reală
  3. O notă despre obiectele runtime

I. Iterarea peste matrice reale

În acest moment, există trei moduri de a itera elementele unei matrice reale:

1. metoda Array.prototype.forEach ;
2. clasic pentru buclă
3. un „corect” construit pentru... în buclă.

În plus, în curând, odată cu apariția noului standard ECMAScript 6 (ES 6), sunt așteptate încă două metode:

1. for...of loop (utilizarea implicită a iteratorului);
2. utilizarea explicită a iteratorului.

1. Metoda forEach și metodele conexe

Dacă proiectul dvs. este proiectat să suporte caracteristicile standardului ECMAScript 5 (ES5), puteți utiliza una dintre inovațiile acestuia - metoda forEach.

Exemplu de utilizare:
var a = ["a", "b", "c"]; a.forEach(funcție(intrare) ( console.log(intrare); ));
În general, utilizarea forEach necesită conectarea bibliotecii de emulare es5-shim pentru browserele care nu acceptă nativ această metodă. Acestea includ IE 8 și versiuni anterioare, care sunt încă utilizate în unele locuri.

Avantajul forEach este că nu este nevoie să declarați variabile locale pentru a stoca indexul și valoarea elementului de matrice curent, deoarece acestea sunt transmise automat funcției de apel invers ca argumente.

Dacă sunteți îngrijorat de costul posibil al apelării unui apel invers pentru fiecare element, nu vă faceți griji și citiți asta.

ForEach este proiectat să itereze prin toate elementele unei matrice, dar în afară de aceasta, ES5 oferă mai multe metode utile pentru a repeta prin toate sau unele elemente plus efectuarea unor acțiuni asupra acestora:

• every - returnează adevărat dacă pentru fiecare element al matricei callback returnează o valoare care poate fi convertită în adevărat.
• some - returnează adevărat dacă pentru cel puțin un element al matricei, callback returnează o valoare care poate fi convertită în adevărat.
• filter - creează o nouă matrice care include acele elemente ale matricei originale pentru care callback returnează true .
• hartă - creează o nouă matrice constând din valorile returnate de apel invers.
• reduce - reduce o matrice la o singură valoare, aplicând un callback fiecărui element al matricei pe rând, începând cu primul (poate fi util pentru calcularea sumei elementelor matricei și a altor funcții rezumative).
• reduceRight - funcționează similar cu reduce, dar iterează prin elemente în ordine inversă.

2. Pentru buclă

Bine vechi pentru reguli:

Var a = ["a", "b", "c"]; indicele var; pentru (index = 0; index< a.length; ++index) { console.log(a); }
Dacă lungimea matricei este constantă pe tot parcursul buclei, iar bucla în sine aparține unei secțiuni de cod critice pentru performanță (ceea ce este puțin probabil), atunci puteți utiliza o versiune „mai optimă” a pentru care stochează lungimea matricei. :

Var a = ["a", "b", "c"]; var index, len; pentru (index = 0, len = a.lungime; index< len; ++index) { console.log(a); }
În teorie, acest cod ar trebui să ruleze puțin mai repede decât cel anterior.

Dacă ordinea elementelor nu este importantă, atunci puteți merge și mai departe în ceea ce privește optimizarea și puteți scăpa de variabila pentru stocarea lungimii matricei, schimbând ordinea căutării în sens invers:

Var a = ["a", "b", "c"]; indicele var; pentru (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Cu toate acestea, în motoarele JavaScript moderne, astfel de jocuri de optimizare nu înseamnă de obicei nimic.

3. Utilizarea corectă a buclei for...in

Dacă vi se recomandă să utilizați o buclă for...in, amintiți-vă că iterarea peste matrice nu este scopul pentru care este destinată. Contrar unei concepții greșite obișnuite, bucla for...in nu iterează peste indici de matrice, ci mai degrabă prin proprietăți enumerabile ale unui obiect.

Cu toate acestea, în unele cazuri, cum ar fi iterarea peste matrice rare, pentru...in poate fi utilă, atâta timp cât luați măsuri de precauție, așa cum se arată în exemplul de mai jos:

// a - tablou rar var a = ; a = „a”; a = „b”; a = "c"; pentru (cheie var în a) ( if (a.hasOwnProperty(cheie) && /^0$|^\d*$/.test(cheie) && cheie<= 4294967294) { console.log(a); } }
În acest exemplu, sunt efectuate două verificări la fiecare iterație a buclei:

1. că matricea are propria sa proprietate numită cheie (nu este moștenită de la prototipul său).
2. acea cheie este un șir care conține reprezentarea zecimală a unui număr întreg a cărui valoare este mai mică decât 4294967294 . De unde vine ultimul număr? Din definiția unui index de matrice din ES5, care arată că cel mai mare indice pe care îl poate avea un element dintr-o matrice este: (2^32 - 2) = 4294967294 .

Desigur, astfel de verificări vor lua timp inutil la executarea buclei. Dar în cazul unei matrice rare, această metodă este mai eficientă decât o buclă for, deoarece în acest caz sunt iterate doar acele elemente care sunt definite în mod explicit în matrice. Deci, în exemplul de mai sus, vor fi efectuate doar 3 iterații (pentru indicii 0, 10 și 10000) - față de 10001 în bucla for.

Pentru a nu scrie un cod de verificare atât de greoi de fiecare dată când trebuie să iterați printr-o matrice, îl puteți scrie ca o funcție separată:

Funcția arrayHasOwnIndex(matrice, cheie) ( returnează matrice.hasOwnProperty(cheie) && /^0$|^\d*$/.test(cheie) && cheie<= 4294967294; }
Apoi corpul buclei din exemplu va fi redus semnificativ:

Pentru (tastați a) ( dacă (arrayHasOwnIndex(a, cheie)) ( console.log(a); ) )
Codul de verificare discutat mai sus este universal, potrivit pentru toate cazurile. Dar, în schimb, puteți utiliza o versiune mai scurtă, deși formal nu este complet corectă, dar totuși potrivită pentru majoritatea cazurilor:

Pentru (tastați a) ( dacă (a.hasOwnProperty(cheie) && String(parseInt(key, 10)) === cheie) ( console.log(a); ) )

4. For...of loop (utilizarea implicită a iteratorului)

ES6, încă în stare de schiță, ar trebui să introducă iteratori în JavaScript.

Iterator este un protocol implementat de un obiect care definește o modalitate standard de a obține o secvență de valori (finită sau infinită).
Un iterator este un obiect care definește o metodă next() - o funcție fără argument care returnează un obiect cu două proprietăți:

1. done (boolean) - adevărat dacă iteratorul a ajuns la sfârșitul secvenței iterabile. În caz contrar, valoarea este falsă.
2. valoare - definește valoarea returnată de iterator. Poate fi nedefinit (lipsește) dacă proprietatea realizată este adevărată.

Multe obiecte încorporate, incl. tablourile reale au iteratoare în mod implicit. Cea mai simplă modalitate de a folosi un iterator pe tablouri reale este să folosiți noul for...of construct.

Exemplu de utilizare pentru...de:

Varval; var a = ["a", "b", "c"]; pentru (val of a) ( console.log(val); )
În exemplul de mai sus, bucla for...of apelează implicit iteratorul obiectului Array pentru a obține fiecare valoare a matricei.

5. Utilizarea explicită a iteratorului

Iteratorii pot fi, de asemenea, folosiți în mod explicit, totuși, în acest caz, codul devine mult mai complicat în comparație cu bucla for...of. Arata cam asa:

Var a = ["a", "b", "c"]; var it = a.entries(); intrare var; în timp ce (!(entry = it.next()). done) ( console.log(entry.value); )
În acest exemplu, metoda Array.prototype.entries returnează un iterator care este utilizat pentru a afișa valorile matricei. La fiecare iterație, entry.value conține o matrice de forma [cheie, valoare] .

II. Iterarea peste obiecte asemănătoare matricei

Pe lângă matricele reale, în JavaScript există și obiecte asemănătoare matricei . Ceea ce au în comun cu tablourile reale este că au o proprietate de lungime și proprietăți numite ca numere corespunzătoare elementelor matricei. Exemplele includ DOM-ul colecției NodeList și pseudo-matricea de argumente, disponibile în orice funcție/metodă.

1. Folosirea metodelor de iterare peste matrice reale

Cel puțin, majoritatea, dacă nu toate, metodele de iterare peste matrice reale pot fi folosite pentru a repeta peste obiecte asemănătoare matricei.

Construcțiile for și for...in pot fi aplicate la obiecte asemănătoare matrice exact în același mod în care sunt aplicate matricelor reale.

Metodele ForEach și alte Array.prototype se aplică și obiectelor asemănătoare matricei. Pentru a face acest lucru, trebuie să utilizați Function.call sau Function.apply .

De exemplu, dacă doriți să aplicați forEach la proprietatea childNodes a unui obiect Node, ați proceda astfel:

Array.prototype.forEach.call(node.childNodes, function(child) ( // face ceva cu obiectul copil));
Pentru a face acest truc mai ușor de reutilizat, puteți declara o referință la metoda Array.prototype.forEach într-o variabilă separată și o puteți utiliza ca scurtătură:

// (Presupunând că tot codul de mai jos este în același domeniu) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // face ceva cu obiectul copil));
Dacă un obiect asemănător matricei are un iterator, acesta poate fi utilizat în mod explicit sau implicit pentru a itera asupra obiectului în același mod ca și pentru matricele reale.

2. Convertiți într-o matrice reală

Există, de asemenea, o altă modalitate, foarte simplă, de a repeta peste un obiect asemănător matricei: convertiți-l într-o matrice reală și utilizați oricare dintre metodele discutate mai sus pentru a repeta peste matrice reale. Pentru conversie, puteți utiliza metoda generică Array.prototype.slice, care poate fi aplicată oricărui obiect asemănător matricei. Acest lucru se face foarte simplu, așa cum se arată în exemplul de mai jos:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
De exemplu, dacă doriți să convertiți o colecție NodeList într-o matrice reală, veți avea nevoie de cod de genul acesta:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Actualizați: După cum s-a menționat în comentarii

Să învățăm cum să indexăm tablourile în js, să eliminăm și să adăugăm 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, numit index.

Un element din interiorul unei 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 începe de la 0. Se pare că tabloul va avea întotdeauna un index compensat cu unu: primul element va avea indicele 0, al doilea 1 etc.

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

Crearea (declararea) unui tablou

Matricele sunt foarte convenabile deoarece pot stoca atâtea date câte aveți nevoie. Dimensiunea maximă posibilă a unui tablou 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.

Notare scurtă: folosind paranteze pătrate

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 specificate în același mod ca și variabilele simple, adică șirurile de caractere trebuie declarate între ghilimele etc.

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

var myArray = ;

Intrare lungă: folosind constructorul 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 vor fi în tabloul dvs., puteți trece imediat această valoare în constructor.

var myArray = new Array(80);

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

Declararea unui tablou gol:

var myArray = new Array();

Accesarea elementelor de matrice

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

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

O matrice poate avea mai multe niveluri, adică fiecare element poate fi el însuși o matrice. Rezultatul va fi o matrice js bidimensională. Cum putem accesa aceste matrice care se află în interiorul altora - „ tablouri multidimensionale»?

Ca 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"]];

Vă puteți imagina așa:

Pentru a face referire la valoarea „Lisa”:

var lisa = familyArray; console.log(lisa); // afișează „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 matricei folosind indicii lor corespunzători. Într-un mod similar, puteți adăuga (sau modifica) elemente declarând, de exemplu:

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

Ce se întâmplă dacă declar un element cu 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 = „Juliet”; console.log(myArray.length); // Imprimă „6” console.log(myArray); // Tipărește ["Kate", "Sung", nedefinit, nedefinit, nedefinit, "Juliet"]

Puteți afla care este lungimea unui tablou js folosind 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 o matrice js. Push() acceptă un număr nelimitat de parametri, toți care 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", "Soon"]

Eliminarea elementelor de matrice

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); // Tipărește ["Sawyer", "John", "Desmond"]

metoda splice().

Folosind metoda splice(), puteți elimina sau adăuga elemente într-o matrice, specificând în același timp cu precizie indexul 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 indexul. Indică în ce poziție trebuie adăugate/înlăturate elementele. În exemplul nostru, am ales indicele 2 ( însemnând „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.