Explicații vizuale ale conceptelor HTML, CSS și JavaScript

javascript

Metoda de reducere a JavaScript-ului explicată printr-o dietă

Dacă ați citit vreodată o etichetă nutrițională, atunci puteți înțelege metoda reduce () în JavaScript.

Metoda de reducere din JavaScript vă oferă o modalitate simplă de a lua o matrice de valori și de a le combina într-o singură valoare sau de a suma matricei pe baza mai multor categorii.

Uau, sunt multe într-o singură frază, așa că să facem un pas înapoi aici.

Desigur, puteți folosi oricând o buclă for pentru a itera printr-o matrice și să efectuați o acțiune specifică pentru fiecare valoare. Dar, dacă nu utilizați metode precum filter (), map () și reduce (), atunci codul dvs. va deveni mai greu de citit. Alți dezvoltatori vor trebui să citească fiecare buclă cu atenție pentru a înțelege scopul. Și va crea mai multe șanse pentru bug-uri, deoarece va trebui să creați mai multe variabile pentru a urmări valorile individuale.

Metodele de filtrare iau toate elementele dintr-o matrice inițială și permit doar anumite elemente într-o matrice finală.

Metodele de mapare rulează o funcție pe fiecare element dintr-o matrice inițială înainte de a o stoca într-o matrice finală.

Și metodele de reducere combină elementele dintr-o matrice inițială într-o valoare finală sau o matrice de valori.

Mi-am dat seama că acest lucru este cam asemănător unei diete. De la metode foarte simple, cum ar fi numărarea caloriilor, la diete mai complicate, cum ar fi Atkins sau WeightWatchers, obiectivul este de a distila toate alimentele pe care le-ați putea mânca pe parcursul zilei într-o singură valoare (sau valori) pentru a vedea dacă sunteți pe drumul cel bun slăbi.

Deci, să sărim în el! Pentru a înțelege acest tutorial, trebuie doar să aveți experiență cu buclele.

Simularea reducerii cu o buclă For

Iată o modalitate rapidă de a arăta funcționalitatea reduce (), folosind o buclă for. Să presupunem că aveți o serie de calorii din 5 alimente separate pe care le-ați consumat pe parcursul zilei. Vrei să-ți dai seama câte calorii totale ai consumat. Iată codul.

Este destul de simplu. Creați o variabilă pentru a păstra suma finală, apoi adăugați la ea în timp ce rulați prin matrice. Dar, tot trebuie să introduceți o nouă variabilă, iar bucla nu oferă niciun indiciu despre scopul buclei.

Un exemplu simplu de reducere

Să învățăm cum să realizăm același obiectiv cu metoda reduce ().

  1. Reduce este o metodă matricială, așa că vom începe cu matricea numărului de calorii.
  2. Folosește o funcție de apel invers care rulează pe fiecare element din matrice.
  3. Folosește o instrucțiune return pentru a arăta cum ar trebui să se acumuleze valoarea după fiecare iterație a matricei.

Deci, reduce are un concept de memorie. Pe măsură ce parcurgeți fiecare element din matrice, valorile sunt urmărite în argumentul sumă. În exemplul nostru anterior, a trebuit să declarăm o nouă variabilă în afara scopului buclei pentru a „aminti” valorile.

Utilizați această versiune interactivă pentru a compara versiunea dietă cu versiunea numerică.

Poate că nu pare să existe o diferență prea mare în lizibilitate între acest lucru și pentru (). Dar, atunci când dvs. (sau un alt dezvoltator) trebuie să scanați sute de linii de cod, reduceți vă va oferi un indiciu rapid despre scopul blocului de cod.

Exemplul 2- Utilizarea obiectelor

Tocmai ne-am uitat la matrice unidimensionale până acum. Dar, dacă puteți itera printr-o matrice plină de numere, puteți, de asemenea, să iterați printr-o matrice plină de obiecte. Să adăugăm un nume fiecărui element, astfel încât să ne putem da seama ce mâncăm de fapt pe parcursul zilei.

Ai mâncat o friptură la micul dejun ... cu niște fructe ... apoi niște salată și chipsuri la prânz ... apoi în final înghețată la cină. Asta e o zi.

De asemenea, am adăugat 0 la final, astfel încât metoda să știe că adăugăm la un număr care începe de la 0, nu un șir.

Sperăm că puteți vedea fluxul pe măsură ce parcurgem matricea. Pe măsură ce parcurgem fiecare element, suma crește pentru a reprezenta caloriile totale consumate pe parcursul zilei. Scopul este să puneți aceste valori într-o găleată mare - numărul de calorii pe parcursul zilei.

Exemplul 3- Utilizarea categoriilor Mulitple

Deci, dacă este vorba de calorii, de ce naiba există atât de multe diete diferite? Nu am de gând să intru în nutriția nutrițională, dar iată rezumatul general - există o mulțime de dezacorduri cu privire la „cel mai bun” mod de a slăbi. Unii vă încurajează să numărați doar caloriile, în timp ce alții se vor uita la proteine, carbohidrați, grăsimi și orice alt număr de factori.

Să ne imaginăm pentru o clipă că doriți să modificați codul, astfel încât să vă puteți evalua dieta pe baza oricărui sistem obișnuit de dietă. Va trebui să urmăriți carbohidrații și grăsimile pentru fiecare tip de mâncare. Apoi, va trebui să rezumați totul la final, astfel încât să puteți da seama câte grame ați consumat în fiecare categorie. Iată obiectul alimentelor noastre cu valori nutritive false.

Acum, trebuie să rulăm metoda reduce (). Dar nu toate pot fi urmărite într-o singură valoare. Vrem să ne păstrăm categoriile. Deci, acumulatorul nostru trebuie să fie un obiect cu aceleași categorii ca matricea.

Iată o diagramă interactivă rapidă,

Pe măsură ce parcurgeți fiecare articol, veți schimba valoarea unei anumite proprietăți dintr-un obiect. Dacă acel obiect nu are încă o proprietate cu numele corect, îl veți crea. Iată codul.

Folosim găleți ca obiect pentru a clasifica valorile în funcție de numele proprietății lor. Folosim operatorul + = pentru a adăuga la găleată corespunzătoare pentru fiecare valoare din obiectul inițial din matricea de alimente. Observați cum nu stocăm numele? Asta pentru că este nesemnificativ - ne dorim doar numerele, astfel încât să putem analiza succesul dietei dvs. pentru ziua respectivă.

După cum puteți vedea, a existat o problemă în rezultatul nostru. Avem un câmp de nume setat la „friptură”. Nu vrem să stocăm numele! Deci, trebuie să specificăm un alt argument - valoarea inițială.

Acest argument vine după apel invers și dorim să inițializăm câmpul de calorii, carbohidrați și grăsimi la 0, astfel încât metoda noastră de reducere să știe că acestea sunt singurele trei perechi cheie/valoare pe care le vom folosi pentru argumentul găleți. Puteți vedea un exemplu aici.

Obțineți cele mai recente tutoriale

V-a plăcut acest tutorial? Înscrieți-vă aici pentru a obține cele mai recente ghiduri vizuale pentru subiecte HTML, CSS și JavaScript.