Aceste metode JavaScript vă vor spori abilitățile în doar câteva minute

Majoritatea aplicațiilor pe care le construim astăzi necesită un fel de modificare a culegerii de date. Prelucrarea articolelor dintr-o colecție este o operație obișnuită pe care cel mai probabil o veți întâlni. Uitați de modul convențional de a face for-loop ca (let i=0; i < value.length; i++).

Head-up rapid, folosind const în for-loop vă va da o eroare. Motivul este pentru că, din nou, declară valoarea în timpul fiecărei execuții i este modificat de i++. Deci, ori de câte ori vă gândiți să folosiți const sau let, întreabă-te – Va fi declarată din nou această valoare? Dacă răspunsul este da, du-te pentru let , si daca Nu, du-te pentru const. Mai multe informatii.

Să presupunem că doriți să afișați lista produselor și să clasificați, filtrați, căutați, modificați sau actualizați o colecție. Sau poate doriți să efectuați calcule rapide, cum ar fi suma, multiplicarea și așa mai departe. Care este modalitatea optimă de a realiza acest lucru?

Poate că nu îți place funcții săgeată, nu vrei să petreci prea mult timp învățând ceva nou sau pur și simplu nu sunt relevante pentru tine. Nu-ți face griji, nu ești singur. Vă voi arăta cum se face în ES5 (decelerare funcțională) și ES6 (funcții săgeată).

Fi conștient: Funcțiile săgeată și declarațiile / expresiile funcției nu sunt echivalente și nu pot fi înlocuit orbește. Rețineți că this cuvântul cheie funcționează diferit între cele două.

Metodele pe care le vom analiza:

1. Operator de răspândire
2. pentru … de iterator
3. include ()
4. niste()
5. fiecare()
6. filtru()
7. Hartă()
8. reduce()

Dacă doriți să deveniți un dezvoltator web mai bun, să vă începeți propria afacere, să-i învățați pe alții sau să vă îmbunătățiți abilitățile de dezvoltare, voi posta săptămânal sfaturi și trucuri despre cele mai recente limbi de dezvoltare web.

1. Operator de răspândire

Operatorul Spread se extinde o matrice în elementele sale. Poate fi folosit și pentru literele obiectelor.

De ce ar trebui să-l folosesc?

• Este o modalitate simplă și rapidă de a afișa articolele dintr-o matrice
• Funcționează pentru tablouri și litere obiecte
• Este un mod rapid și intuitiv de a transmite argumente
• Necesită doar trei puncte …

Exemplu:
Să presupunem că doriți să afișați o listă de alimente preferate fără a crea o funcție de buclă. Utilizați un operator de tip spread astfel:

2. pentru … de iterator

for...of declarația bucle / iterează prin colecție și vă oferă posibilitatea de a modifica anumite elemente. Înlocuiește modul convențional de a face un for-loop.

De ce ar trebui să-l folosesc?

• Este un mod simplu de a adăuga sau actualiza un articol
• Pentru a efectua calcule (suma, multiplicarea etc)
• Când utilizați instrucțiuni condiționale (dacă, în timp ce, comutați și așa mai departe)
• Conduce la un cod curat și lizibil

Exemplu:
Să presupunem că aveți o cutie de instrumente și doriți să afișați toate instrumentele din ea. for...of iteratorul o face ușoară.

3. Include () metoda

includes() metoda este utilizată pentru a verifica dacă există un șir specific într-o colecție și se întoarce true sau false. Rețineți că este sensibil la majuscule și minuscule: dacă elementul din colecție este SCHOOL, și căutați school, se va întoarce false.

De ce ar trebui să-l folosesc?

• Pentru a construi funcționalități de căutare simple
• Este o abordare intuitivă pentru a determina dacă există un șir
• Utilizează instrucțiuni condiționate pentru a modifica, filtra și așa mai departe
• Conduce la un cod lizibil

Exemplu:
Să spunem din orice motiv că nu știți ce mașini aveți în garaj și aveți nevoie de un sistem pentru a verifica dacă mașina pe care o doriți există sau nu. includes()la salvare!

4. Metoda Some ()

some() metoda verifică dacă unele elemente există într-o matrice și returnează true sau false. Acest lucru este oarecum similar cu conceptul de includes() metoda, cu excepția argumentului, este o funcție și nu un șir.

De ce ar trebui să-l folosesc?

• Se asigură niste elementul trece testul
• Realizează enunțuri condiționate folosind funcții
• Faceți codul dvs. declarativ
• Unele sunt destul de bune

Exemplu:
Să presupunem că sunteți proprietarul unui club și că nu vă pasă cine intră în club. Însă unii nu au voie să intre, pentru că au băut prea mult (creativitatea mea este la maxim). Verificați diferențele dintre ES5 și ES6 mai jos:

ES5:

ES6:

5. Fiecare () metodă

every() metoda bucle prin matrice, verifică fiecare articol și returnează true sau false. Același concept ca some(). Cu excepția faptului că fiecare articol trebuie să îndeplinească declarația condiționată, în caz contrar, va reveni false.

De ce ar trebui să-l folosesc?

• Se asigură fiecare elementul trece testul
• Puteți efectua declarații condiționale folosind funcții
• Faceți codul dvs. declarativ

Exemplu:
Ultima dată când ai permis some() studenți minori să intre în club, cineva a raportat acest lucru și poliția te-a prins. De data aceasta nu vei lăsa să se întâmple asta și te vei asigura că asta toata lumea trece limita de vârstă cu every()operator.

ES5

ES6

6. Metoda Filter ()

filter() metoda creează o nouă matrice cu toate elementele care trec testul.

De ce ar trebui să-l folosesc?

• Deci, puteți evita schimbarea matricei principale
• Vă permite să filtrați elementele de care nu aveți nevoie
• Vă oferă un cod mai lizibil

Exemplu:
Să presupunem că doriți să returnați numai prețuri mai mari sau egale cu 30. Filtrează toate celelalte prețuri …

ES5

ES6

7. Metoda Map ()

map() metoda este similară cu filter() metodă în ceea ce privește returnarea unui nou array. Cu toate acestea, singura diferență este că este utilizată pentru modificarea articolelor.

De ce ar trebui să-l folosesc?

• Vă permite să evitați modificarea matricei principale
• Puteți modifica articolele dorite
• Vă oferă un cod mai lizibil

Exemplu:
Să presupunem că aveți o listă de produse cu prețuri. Managerul dvs. are nevoie de o listă pentru a afișa noile prețuri după ce au fost impozitate cu 25%. map() metoda vă poate ajuta.

ES5

ES6

8. Metoda Reduce ()

reduce() metoda poate fi utilizată pentru a transforma o matrice în altceva, care ar putea fi un întreg, un obiect, un lanț de promisiuni (executarea secvențială a promisiunilor) etc. Din motive practice, un caz de utilizare simplu ar fi să însumăm o listă de numere întregi. Pe scurt, „reduce” întreaga matrice într-o singură valoare.

De ce ar trebui să-l folosesc?

• Efectuați calcule
• Calculați o valoare
• Numărați duplicatele
• Grupați obiectele după proprietate
• Executați promisiuni secvențial
• Este o modalitate rapidă de a efectua calcule

Exemplu:
Să presupunem că doriți să aflați cheltuielile totale pentru o săptămână. Utilizare reduce() pentru a obține acea valoare.

ES5

ES6

Mă puteți găsi pe Developer News, unde public în fiecare săptămână. Sau poți să mă urmărești mai departe Stare de nervozitate, unde postez sfaturi și trucuri relevante pentru dezvoltarea web.