Home-theater-designers
Dezvoltatorii web de toate nivelurile de calificare, de la programatori debutanți la experți în codificare, ajung să vadă importanța JavaScript-ului în dezvoltarea site-urilor web moderne. JavaScript este atât de dominant încât este o abilitate esențială să știi dacă vei crea aplicații web.
Unul dintre cele mai puternice blocuri de construcție încorporate în limbajul JavaScript sunt matricele. Tablourile se găsesc în mod obișnuit în multe limbaje de programare și sunt utile pentru stocarea datelor.
JavaScript include, de asemenea, caracteristici utile cunoscute sub numele de metode matrice. Iată cincisprezece la care ar trebui să aruncați o privire atentă pentru a vă dezvolta abilitățile de dezvoltator.
Ce sunt metodele Array?
Metode de matrice sunt funcții încorporate în JavaScript pe care le puteți aplica matricelor. Fiecare metodă are o funcție unică care efectuează o schimbare sau un calcul asupra matricei dvs., scutindu-vă de necesitatea codificării funcțiilor comune de la zero.
Metodele de matrice din JavaScript sunt executate folosind o notație punct atașată variabilei matricei. Deoarece sunt doar funcții JavaScript, ele se încheie întotdeauna cu paranteză care poate conține argumente opționale. Iată o metodă atașată la o matrice simplă numită myArray .
let myArray = [1,2,3]; myArray.pop();Acest cod ar aplica o metodă numită pop la matrice.
Exemplu Array
Pentru fiecare exemplu, utilizați un exemplu de matrice pe care îl vom apela myArray , pentru a efectua metodele pe. Simțiți-vă liber să vă ridicați consola și codul.
let myArray = [2,4,5,7,9,12,14];Aceste exemple vă vor presupune că cunoașteți fundamentul ce este JavaScript și cum funcționează . Dacă nu, e în regulă, suntem cu toții aici pentru a învăța și a crește.
Sapă în aceste cincisprezece metode puternice de matrice!
1. Array.push ()
Ce face: Apăsați() ia matricea și adaugă unul sau mai multe elemente la sfârșitul matricei, apoi returnează noua lungime a matricei. Această metodă vă va modifica matricea existentă.
Adăugați numărul 20 în matrice rulând Apăsați() , folosind 20 ca argument.
let myArray = [2,4,5,7,9,12,14];
myArray.push(20);Verificați dacă a funcționat:
console.log(myArray); [2,4,5,7,9,12,14,20]Rularea Apăsați() metoda de pe myArray a adăugat valoarea dată în argument în matrice. În acest caz, 20. Când verificați myArray în consolă, veți vedea că valoarea este acum adăugată la sfârșitul matricei.
2. Array.concat ()
Ce face: concat () poate îmbina două sau mai multe tablouri într-o nouă matrice. Nu modifică matricele existente, dar creează una nouă.
Lua myArray și fuzionează o matrice numită newArray în el.
let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]Această metodă face minuni atunci când aveți de-a face cu mai multe tablouri sau valori pe care trebuie să le combinați, toate într-un singur pas destul de simplu atunci când utilizați variabile.
3. Array.join ()
Ce face: a te alatura() ia o matrice și concatenează conținutul matricei, separate printr-o virgulă. Rezultatul este plasat într-un șir. Puteți specifica un separator dacă doriți să utilizați o alternativă la virgulă.
Uitați-vă la modul în care funcționează acest lucru folosind myArray. Mai întâi folosind metoda implicită fără argument separator, care va folosi o virgulă.
let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'JavaScript va afișa un șir, fiecare valoare din matrice fiind separată printr-o virgulă. Puteți utiliza un argument în funcție pentru a schimba separatorul. Observați-l cu două argumente: un singur spațiu și un șir.
myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'Primul exemplu este un spațiu, realizând un șir pe care îl puteți citi cu ușurință.
Al doilea exemplu folosește (' și ') , și sunt două lucruri de știut aici.
În primul rând, folosim cuvântul „și” pentru a separa valorile. În al doilea rând, există un spațiu pe ambele părți ale cuvântului „și”. Acesta este un lucru important de care trebuie să țineți cont atunci când utilizați a te alatura() . JavaScript citește argumentele literalmente; deci, dacă acest spațiu este lăsat în afara, totul va fi scrunched împreună (de exemplu, „2and4and5 ...” etc.) Nu este o ieșire foarte lizibilă!
4. Array.forEach ()
Ce face: pentru fiecare() (diferențiat de majuscule și minuscule!) îndeplinește o funcție pentru fiecare element din matrice. Această funcție este orice funcție pe care o creați, similară cu utilizarea unei bucle „pentru” pentru a aplica o funcție unui tablou, dar cu mult mai puțin lucru la cod.
Mai sunt ceva de făcut pentru fiecare() ; uitați-vă la sintaxă, apoi efectuați o funcție simplă de demonstrat.
myArray.forEach(function(item){
//code
});
Folosim myArray , pentru fiecare() se aplică cu notația punct. Plasați funcția pe care doriți să o utilizați în paranteză argument, care este funcție (element) în exemplu.
Aruncăm o privire la funcție (element) . Aceasta este funcția executată în interiorul forEach () și are propriul argument. Cheamăm argumentul articol . Există două lucruri de știut despre acest argument:
- Când forEach () trece peste matrice, aplică codul acestui argument. Gândiți-vă la aceasta ca la o variabilă temporară care deține elementul curent.
- Alegeți numele argumentului, acesta poate fi numit orice doriți. De obicei, acest lucru ar fi numit ceva care îl face mai ușor de înțeles, cum ar fi „element” sau „element”.
Având în vedere aceste două lucruri, consultați acest exemplu simplu. Adăugați 15 la fiecare valoare și solicitați consolei să arate rezultatul.
myArray.forEach(function(item){
console.log(item + 15);
});
Folosim articol în acest exemplu ca variabilă, deci funcția este scrisă pentru a adăuga 15 la fiecare valoare prin articol . Consola imprimă apoi rezultatele. Iată cum arată într-o consolă Google Chrome.
Rezultatul este fiecare număr din matrice, dar cu 15 adăugate!
5. Array.map ()
Ce face: Hartă() efectuează o funcție pentru fiecare element din matricea dvs. și plasează rezultatul într-o matrice nouă.
Rularea unei funcții pe fiecare element sună ca forEach (). Diferența aici este Hartă() creează o nouă matrice atunci când rulează. forEach () nu creează automat o nouă matrice, ar trebui să codați o anumită funcție pentru a face acest lucru.
Utilizați map () pentru a dubla valoarea fiecărui element din myArray și plasați-le într-o nouă matrice. Veți vedea la fel funcție (element) sintaxa pentru un pic mai multă practică.
let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});Verificați rezultatele în consolă.
console.log(doubleArray); [4,8,10,14,18,24,28]myArray este neschimbat:
console.log(myArray); [2,4,5,7,9,12,14]6. Array.unshift ()
Ce face: Similar cu modul în care funcționează metoda push (), unshift () metoda vă ia matricea și adaugă unul sau mai multe elemente la începutul matricei în loc de sfârșit și returnează noua lungime a matricei. Această metodă vă va modifica matricea existentă.
let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);La conectarea tabloului la consolă, ar trebui să vedeți numărul 0 la începutul tabloului.
console.log(myArray); [0, 2,4,5,7,9,12,14]7. Array.sort ()
Ce face: Sortarea este una dintre cele mai frecvente operații efectuate pe o matrice și este extrem de utilă. JavaScript fel() metoda matrice poate fi utilizată pentru a sorta o matrice de numere sau chiar șiruri cu doar o singură linie de cod. Această operațiune este în loc și returnează matricea sortată modificând matricea inițială. Luați un set diferit de numere pentru myArray de data asta.
let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);Deoarece sortarea se face în loc, nu trebuie să declarați o variabilă separată pentru matricea sortată.
console.log(myArray); [10, 12, 34, 55, 65]În mod implicit, matricea este sortată în ordine crescătoare, dar opțional puteți trece o funcție personalizată către fel() metoda de sortare a matricei în modul dorit. În acest caz, am trecut un obicei funcția săgeată pentru a sorta matricea numeric în ordine crescătoare.
8. Array.reverse ()
Ce face: După cum sugerează și numele, verso() metoda este utilizată pentru a inversa ordinea elementelor din matrice. Rețineți că acest lucru nu inversează conținutul matricei, ci doar ordinea în sine. Iată un exemplu pentru a înțelege mai bine această metodă:
let myArray = [2,4,5,7,9,12,14];
myArray.reverse()Înregistrați ieșirea pe consolă pentru a verifica funcționarea.
console.log(myArray); [14, 12, 9, 7, 5, 4, 2]După cum puteți vedea, ordinea elementelor a fost inversată. Anterior, elementul de la ultimul index (elementul 14 la indexul 6) este acum elementul la indexul zero și așa mai departe.
9. Array.slice ()
Ce face: felie() este folosit pentru a recupera o copie superficială a unei porțiuni dintr-o matrice. În termeni mai simpli, această metodă vă permite să selectați elemente specifice dintr-o matrice după indexul lor. Puteți trece indexul de pornire al elementului din care doriți să preluați și elemente și opțional și indexul final.
Dacă nu furnizați indexul final, toate elementele de la indexul inițial până la sfârșitul matricei vor fi recuperate. Această metodă returnează o nouă matrice și nu o modifică pe cea existentă.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);În codul de mai sus, toate elementele de la al doilea index la ultimul index sunt recuperate, deoarece parametrul indexului final nu este trecut. Înregistrați ambele matrice pe consolă.
console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]
Evident, matricea inițială nu este modificată prin metoda slice () și în schimb returnează o matrice nouă care este stocată în slicedArray variabil. Iată un exemplu în care parametrul indexului final este trecut și la felie() metodă.
let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]10. Array.splice ()
Ce face: lipitură() este o metodă de matrice utilă utilizată pentru eliminarea sau înlocuirea elementelor din matrice în loc. Prin specificarea indexului și a numărului de elemente de șters, acesta modifică matricea.
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);În exemplul de mai sus, myArray matricea este îmbinată din indexul 2 și 3 elemente sunt eliminate din acesta. Matricea constă acum din:
[2, 4, 12, 14]Pentru a înlocui elementele în loc să le ștergeți, puteți trece orice număr de parametri opționali cu elementele cu care doriți să le înlocuiți, ca acesta:
cum să eliberați spațiul de stocare pe Apple Watch
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]11. Array.filter ()
Ce face: filtru() metoda este o metodă de matrice utilă care ia o funcție care conține un test și returnează o matrice nouă cu toate elementele care trec testul respectiv. Fidel numelui său, această metodă este utilizată pentru a filtra elementele de care aveți nevoie din celelalte elemente. Filtrarea se face folosind o funcție care returnează o valoare booleană.
Iată un exemplu de filtru() metoda utilizată pentru a obține numai acele elemente din matrice care sunt divizibile cu 2.
let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);În exemplul de mai sus, o funcție săgeată este transmisă ca parametru care ia fiecare număr din matricea originală și verifică dacă este divizibil cu 2 folosind modulul ( % ) și egalitate ( === ) operator. Iată cum arată rezultatul:
[2, 4, 12, 14]12. Array.reduce ()
Ce face: reduce() este o metodă de matrice care ia o funcție de reducere și o execută pe fiecare element de matrice pentru a produce o singură valoare în timp ce revine. Este nevoie de o funcție de reducere cu o variabilă de acumulator și o variabilă de element curent ca parametri necesari. Valoarea acumulatorului este amintită în toate iterațiile și este returnată în cele din urmă după iterația finală.
Un caz de utilizare popular al acestei metode este de a calcula suma tuturor elementelor din matrice. Implementarea acestei funcționalități este după cum urmează:
let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);0 este trecut ca al doilea parametru în exemplul de mai sus, care este utilizat ca valoare inițială a variabilei acumulatorului. The sumOfNums variabila va conține valoarea returnată a reduce() metoda care este de așteptat să fie suma tuturor elementelor din matrice.
console.log(sumOfNums); 5313. Array.include ()
Ce face: Căutarea unui element dintr-o matrice pentru a verifica dacă este prezent este o operație care este utilizată destul de frecvent și, prin urmare, JavaScript are o metodă încorporată pentru aceasta sub forma include () metoda matricei. Iată cum îl puteți folosi:
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));Această metodă ia un parametru necesar, elementul de căutat și un parametru opțional, indexul matricei din care să înceapă căutarea. În funcție de faptul că acel element este prezent sau nu, acesta va reveni Adevărat sau fals respectiv. Prin urmare, ieșirea va fi:
true
false
true
false14. Array.indexOf ()
Ce face: Index de() metoda este utilizată pentru a afla indexul la care prima apariție a unui element specificat poate fi găsită în matrice. Deși este similară cu metoda include (), această metodă returnează indexul numeric sau -1 dacă elementul nu este prezent în matrice.
let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));Index de() metoda folosește egalitate strictă pentru a verifica dacă un element este prezent, ceea ce înseamnă că valoarea, precum și tipul de date, ar trebui să fie aceleași. Al doilea parametru opțional ia indexul pentru a începe căutarea. Pe baza acestor criterii, rezultatul va arăta astfel:
1
-1
415. Array.fill ()
Ce face: Adesea, poate fi necesar să setați toate valorile din matrice la o valoare statică, cum ar fi 0. În loc să utilizați o buclă, puteți încerca completati() metoda în același scop. Puteți apela această metodă pe o matrice cu 1 parametru necesar: valoarea cu care să completați matricea și 2 parametri opționali: indexul de început și de sfârșit între care să completați. Această metodă modifică matricea care iese.
let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);La înregistrarea ieșirii pe consolă, veți vedea:
console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]Pașii următori în călătoria dvs. JavaScript
Tablourile sunt o parte puternică a limbajului JavaScript, motiv pentru care există atât de multe metode încorporate pentru a vă face viața mai ușoară ca dezvoltator. Cel mai bun mod de a stăpâni aceste cincisprezece metode este de a practica.
Pe măsură ce continuați să învățați JavaScript, MDN este o resursă excelentă pentru documentare detaliată. Vă simțiți confortabil în consolă, apoi ridicați-vă abilitățile cu cei mai buni editori JavaScript pentru programatori. Sunteți gata să vă construiți site-ul web cu JavaScript? De ce să nu aruncați o privire asupra unor cadre pe care le puteți lua în considerare.
Acțiune Acțiune Tweet E-mail 6 cadre JavaScript care merită învățateExistă multe cadre JavaScript pentru a ajuta la dezvoltare. Iată câteva pe care ar trebui să le cunoașteți.
Citiți în continuare Subiecte asemănătoare- Programare
- JavaScript
- Sfaturi de codare
Nitin este un dezvoltator avid de software și un student în ingineria computerelor care dezvoltă aplicații web folosind tehnologii JavaScript. Lucrează ca dezvoltator web independent și îi place să scrie pentru Linux și Programare în timpul liber.
Mai multe de la Nitin RanganathAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona