matrice Js. ▍Puntele forte ale buclei for...of. Reordonarea elementelor matricei în ordine inversă - inversă

Matricele sunt unul dintre cele mai frecvent utilizate tipuri de variabile care vă permit să stocați multe valori secvențiale într-un „un singur loc”. Cu toate acestea, când vine vorba de JavaScript, există loc de îmbunătățire.

În acest articol, vom analiza trei tehnici puțin cunoscute care pot fi utilizate atunci când lucrați cu matrice.

1. Adăugarea proprietăților personalizate la matrice

Dacă utilizați o căutare pentru a găsi definiția JavaScript a unei matrice, majoritatea surselor vor afirma acest lucru acest tip Valoarea unei variabile este reprezentată ca obiect.

În general, multe dintre lucrurile pe care le întâlnim în JavaScript sunt obiecte. Ar fi corect să rețineți că limbajul conține și tipuri de date „primitive”, dar valorile lor sunt cumva folosite în proprietățile din interiorul obiectelor.

2. Accesarea elementelor de matrice într-o buclă

Deoarece indicii de matrice pot lua numai valori pozitive, numărarea începe de la zero. Mai târziu putem folosi acest index pentru a accesa elementul de matrice la o iterație de buclă dată.

ECMAScript6 a introdus o modalitate de a derula printr-o matrice fără a utiliza indecși, ci prin ciclu nou pentru...de.

Bucla for...of este concepută pentru a itera prin elementele unei matrice fără a afecta indexul elementului.

Var ary = ["portocale","mere","litchi"]; for (let item of ary)( console.log(item); ) // „orange”, „apple”, „lychee” Pentru comparație: afișarea indicilor articolului într-o buclă for. var ary = ["portocală","măr","litchi"]; pentru (var item = 0; item< ary.length; item++){ console.log(item); } // 0, 1, 2

3. Numărul de elemente nu este dimensiunea tabloului

Când vorbim despre dimensiunea unei matrice, de obicei ne gândim la ea ca la numărul de elemente stocate în ea. De fapt, acest lucru nu este în întregime adevărat - proprietatea lungime este calculată în funcție de indicele maxim al elementului.

Proprietatea lungimii este foarte ambiguă. Pentru a verifica acest lucru, priviți următoarele manipulări:

Var ary = ; ary.lungime = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

În ultimul exemplu, a fost suficient să puneți elementul în poziția a cincea, drept urmare lungimea matricei a devenit 6. Dacă credeți că indici de la 0 la 4 vor fi creați automat, veți greși. Acest lucru poate fi verificat folosind operatorul in.

Var ary = ; ary.lungime = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 în ary); // fals

ÎN în acest caz, Este corect să numiți matricea ary „sparse”.

De asemenea, putem manipula proprietatea lungime pentru a tăia matrice. Exemplul de mai jos demonstrează „pierderea” elementului la indicele 5 prin decrementarea proprietății de lungime a matricei ari.

Var ary = ; ary.lungime = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ari.lungime = 2; console.log(ary.length); // 2 console.log(ary); // nedefinit

Matrice

Un tablou 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. Matrice în JavaScript sunt netipizate: elementele unui tablou 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 tipuri diferite+ 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 Array(). 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 despre 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 push() pentru a adăuga unul sau mai multe elemente la sfârșitul unui tablou:

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. Metoda unshift() poate fi folosită pentru a insera un element la începutul unui tablou, care mută elementele existente în matrice în poziții mai înalte ale indexului.

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; // false, 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. Matricele au o metodă pop() (opusul push()), care reduce lungimea matricei cu 1 și returnează valoarea elementului eliminat. Există și o metodă shift() (opusul 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ă polivalentă splice() care vă permite să inserați, să eliminaț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ă „real” tablouri multidimensionale, dar vă permite să le simulați bine 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 exemplu concret, Unde matrice bidimensională folosit ca tabel de inmultire:

// 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 funcții convenabile pentru lucrul cu matrice, care sunt disponibile ca metode ale oricărei 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ă revină un număr negativ. Dacă primul argument urmează să-l urmeze 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(); // ordinea alfabetului: 1111, 222, 33, 4 arr.sort(funcție(a,b) ( // Ordine numerică: 4, 33, 222, 1111 întoarcere a-b; // Returnează valoarea 0 // în funcție de ordinea de sortare a lui a și b )); // Filtrează după direcție 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 un tablou, elementele sale sunt adăugate la tabloul returnat. Trebuie remarcat, totuși, că transformarea recursiv a unui tablou de matrice în matrice unidimensională nu se intampla. Metoda concat() nu schimbă 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 metoda universala, care inserează sau elimină elemente dintr-o matrice. 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 urmează să fie inserate în matrice, începând de la 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() o face operare 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 de schimbare() 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.

În această lecție, ne vom familiariza cu tablourile, vom învăța cum să le creăm, să efectuăm operații asupra elementelor lor și, de asemenea, ne vom uita la metodele și proprietățile de bază disponibile atunci când lucrăm cu ele.

Conceptul de matrice

O matrice este o colecție ordonată de date care are un nume și este o instanță Obiect matrice. Este format din elemente care sunt accesate folosind numărul lor de index. Numerotarea elementelor dintr-o matrice nu începe de la 1, ci de la 0.

Următoarea figură prezintă o matrice numerică formată din 7 elemente. Elementele acestui tablou conțin următoarele date: primul element (indice 0) - numărul 123, al doilea element (indice I) - număr 214, element al treilea (indice al doilea) - număr 315 etc.

//element în care vom scoate matricea //creând o matrice numerică var numberArray = new Array(123,214,315,312,124,206,218); //reducerea matricei la elementul care are id="myP" document.getElementById("myP").innerHTML = "1 element Array: " + numberArray + "
" + "2 element de matrice: " + numberArray + "
" + "3 Element matrice: " + numberArray + "
" + "4 Element de matrice: " + numberArray + "
" + "Element de matrice 5: " + numberArray + "
" + "6 Element de matrice: " + numberArray + "
" + "7 Element Array: " + numberArray;

Crearea (declararea) unui tablou

Crearea unui tablou în JavaScript se face folosind operatorul nou și funcția constructor Array. ÎN parantezele Funcția constructor Array poate fi specificată cu una dintre următoarele valori:

Număr. În acest caz această funcție va crea o matrice formată din numărul specificat de elemente. Toate aceste elemente vor avea valoarea undefined .
Valori multiple separate prin virgule. În acest caz, funcția de constructor Array va crea o matrice formată din numărul specificat de elemente și le va atribui valorile corespunzătoare.
Nimic. În acest caz, această funcție va crea o matrice goală.

Spre deosebire de multe alte limbaje de programare, tablourile din JavaScript își schimbă automat dimensiunea, adică ele sunt în mod inerent dinamice. Asemenea matrice nu trebuie să primească dimensiuni. Încă una trăsătură distinctivă Matrice JavaScript este faptul că diferite elemente ale aceleiași matrice pot conține Tipuri variate date.

Lucrul cu elemente de matrice

Pentru a contacta element specific matrice, trebuie să specificați numele acestei matrice și indexul său între paranteze drepte. Această operațiune numită și operație de indexare.

De exemplu, să creăm o matrice goală și să îi adăugăm 4 elemente de text:

//crearea unei matrice goale smartphoneColors var smartphoneColors = new Array(); //atribuiți 1 element al matricei (index 0) valoarea „Black” smartphoneColors = „Black”; //atribuiți al 2-lea element al matricei (index 1) valorii „White” smartphoneColors = „White”; //atribuiți al 3-lea element de matrice (index 2) valorii „Grey” smartphoneColors = „Grey”; //atribuiți al 4-lea element al matricei (index 3) valorii „Blue” smartphoneColors = „Blue”;

De exemplu, să afișăm valorile a 2 și 4 elemente ale matricei smartphoneColors pe consola browserului (F12):

Console.log("2 element = " + smartphoneColors); console.log("4 element = " + smartphoneColors);

Lungimea matricei (numărul de elemente din matrice)

Determinarea numărului de elemente dintr-o matrice se face folosind proprietatea length.

//creați o matrice listând valorile elementelor din funcția Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //atribui variabilei lengthArray la lungimea matricei volumeHDDs var lengthArray = volumeHDDs.length;

Cum să obțineți primul element al unui tablou

Obținerea valorii primului element al unui tablou se face prin specificarea numărului 0 între paranteze drepte ale acestei matrice:

//crearea unui tablou format din 3 elemente var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //obținerea valorii primului element al matricei var firstValue = volumeHDDs;

Cum să obțineți ultimul element al unui tablou

Valoarea ultimului element al unui tablou se obține prin specificarea expresiei nume_tablou.lungime-1 între paranteze drepte din această matrice:

//crearea unui tablou format din 3 elemente var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //obținerea valorii ultimului element al matricei var lastValue = volumeHDDs;

Iterarea peste o matrice

Iterarea prin elementele matricei se face folosind pentru buclă.

De exemplu, să repetăm toate elementele matricei și să le afișăm valorile în consola browserului (F12):

//crearea unui tablou nameStudents, format din 4 elemente var nameStudents = new Array("Petya","Vasya","Kolya","Maxim"); //iterează elementele matricei de la 0 la lungimea matricei-1 pentru (var i=0; i