Javascript adaugă valoare matricei. Tehnici utile pentru lucrul cu matrice în JavaScript. metodele pop() și shift().

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 unei matrice în limbajul JavaScript, majoritatea surselor vor afirma că acest tip de valoare variabilă este reprezentată ca un 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 matricei într-o buclă

Deoarece indicii de matrice pot lua doar 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 printr-o nouă buclă for...of.

Bucla for...of este proiectată să itereze prin elementele unui tablou 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 acest caz, ar fi corect să numiți matricea arie „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

Care este diferența dintre o matrice și o variabilă?

Pentru a înțelege mai bine ce matrice sunt în Javascript și în orice alt limbaj de programare, voi arăta exemple despre obiecte reale din viață.

Când mergi la un supermarket, s-ar putea să vezi un dulap cu compartimente, într-unul din care poți pune lucrurile.

Fiecare celulă are un număr. Prin acest număr, după ce ai finalizat cumpărăturile, poți înțelege în ce celulă se află articolele tale.

Prin analogie, putem numi o celulă a dulapului în care sunt stocate lucrurile tale o variabilă, iar toate celulele sunt o matrice.

Cum se creează o matrice în Javascript

În Javascript, o matrice poate fi creată în diferite moduri.

Prima modalitate de a crea o matrice în Javascript

Această metodă este pentru date numerice și obiecte:

În acest fel pentru șiruri:

Folosind această metodă, am creat o matrice de patru elemente.

A doua modalitate de a crea o matrice în Javascript

A doua modalitate de a crea matrice în Javascript este prin intermediul obiectelor.

Arata cam asa:

matrice = new Array(1, 23, 15, 10, 33);

Pentru datele din matrice de șiruri, șirurile trebuie să fie cuprinse între ghilimele.

Cum se accesează o matrice în Javascript

Pentru a accesa primul element al unui tablou, trebuie să scrieți:

unde, scoatem primul element al matricei - array. Console.log - afișează conținutul matricei.

Numerotarea matricei începe de la zero. De aceea atunci când accesăm array ni se dă valoarea primului element 1 sau în exemplul cu șiruri - One.

Metode de lucru cu matrice

Javascript are metode de lucru cu matrice. Aceste metode sunt foarte utile și unii programatori, dintr-un motiv necunoscut, le evită și își scriu propriile biciclete.

Metoda inversă

Metoda inversă modifică matricea și formează o nouă matrice cu elementele în ordine inversă.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.reverse();

Rezultat:

[„Patru”, „Trei”, „Doi”, „Unul”]

Metoda Concat

Metoda concat concatenează o matrice cu o altă matrice sau cu alte date. Metoda concat nu modifică tabloul original.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.concat(12);

Rezultat:

[„Unul”, „Doi”, „Trei”, „Patru”, 12]

Metoda feliei

Metoda slice taie o parte dintr-un șir și poate lua doi parametri (început și sfârșit) sau un parametru ca intrare.

Dacă al doilea parametru este setat la -1, atunci va returna restul șirului cu penultimul element.

Metoda slice nu modifică matricea originală.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.slice(1,-1);

Rezultat:

Metoda splice

Metoda de îmbinare este destul de multifuncțională.

Este nevoie de trei argumente ca intrare:

2. Numărul de elemente ale matricei care trebuie eliminate

3. Al treilea argument sunt valorile care trebuie inserate de unde am eliminat elementele matricei

Metoda splice modifică matricea originală.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.splice(1, 2, "2", "3");

Rezultat:

[„Unul”, „2”, „3”, „Patru”]

Al treilea argument din metoda splice este opțional. Dacă nu utilizați al treilea argument, atunci metoda splice va elimina elementele matricei specificate în primele două argumente și va returna o nouă matrice fără aceste elemente.

Metoda push

Metoda push inserează un element la sfârșitul matricei

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.push("Cinci");

Rezultat:

["Unu doi trei patru cinci"]

Metoda UnShift

Metoda unshift inserează un element la începutul matricei

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.unshift("Zero");

Rezultat:

[„Zero”, „Unu”, „Doi”, „Trei”, „Patru”]

Metoda pop

Metoda pop elimină ultimul element din matrice și returnează elementul eliminat.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.pop();

Rezultat:

["Unu, doi, trei"]

Metoda Shift

Metoda shift elimină primul element din matrice și returnează elementul eliminat.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

Rezultat:

[„Doi trei patru”]

Metoda de alăturare

Metoda join din Javascript convertește o matrice într-un șir și vă permite să specificați propriul delimitator. În mod implicit, metoda join folosește o virgulă ca delimitator. Să încercăm să adăugăm un separator „-”.

Exemplu:

matrice = ["Unul", "Doi", "Trei", "Patru"];

array.join("-");

Rezultat:

Unu doi trei patru

Metoda de sortare

Metoda Soft sortează în mod implicit matricea în ordine alfabetică. Îi putem transmite o funcție cu o logică de sortare diferită. Vom vorbi despre asta într-un articol separat dedicat metodelor separat.

Exemplu:

matrice = ["a", "c", "b", "d"];

Rezultat:

["a B C D"]

Lucrul cu matrice în bucle

Buclele sunt metode foarte importante pentru lucrul cu matrice. Folosindu-le, putem accesa un singur element al unui tablou și putem traversa întreaga matrice.

FOR Loop

O buclă simplă pentru a itera printr-o matrice

Exemplu:

Rezultat:

unu
Două
Trei
Patru

Pentru fiecare buclă

Buclă de matrice îmbunătățită. Poate lua trei elemente ca intrare: element, index, array.

Exemplul 1:

Rezultat:

unu
Două
Trei
Patru

Exemplul 2:

Metoda toUpperCase() valorifică toate elementele

Rezultat:

["UNU DOI TREI PATRU"]

Concluzii despre Arrays în Javascript

Există multe metode de lucru cu matrice în Javascript. În acest articol nu ne-am uitat la toate metodele, cu siguranță le vom acorda atenție în articolele viitoare, dar dacă știi să folosești metodele de lucru cu matrice din acest articol, abilitățile tale vor fi de plus 150 la sută și vei crește semnificativ nivelul tău de dezvoltator frontend în limbajul de programare Javascript.

Urmărește articole noi și tutoriale video, abonează-te la canalul nostru YouTubeși alăturați-vă grupului

În această lecție ne vom familiariza cu matricele, 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ță a unui obiect Array. 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: elementul 1 (indice 0) - numărul 123, elementul 2 (indicele 1) - numărul 214, elementul 3 (indicele 2) - numărul 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. Puteți specifica una dintre următoarele valori în parantezele funcției de constructor Array:

• 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ă sunt în mod inerent dinamice. Asemenea matrice nu trebuie să primească dimensiuni. O altă caracteristică distinctivă a matricelor JavaScript este aceea că diferite elemente ale aceleiași matrice pot conține diferite tipuri de date.

Lucrul cu elemente de matrice

Pentru a accesa un anumit element al unui tablou, trebuie să specificați numele acestei matrice și indexul său între paranteze drepte. Această operație se mai numește și operațiune 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 în 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

Valoarea primului element al unui tablou se obține prin specificarea numărului 0 între paranteze drepte ale acestei matrice:

//crearea unui array 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 array 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 o buclă for.

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