Un Ghid Pentru a Reduce Metodă În Javascript

de Josh Pitzalis

metoda de reducere JavaScript este una dintre pietrele de temelie ale programării funcționale. Să explorăm cum funcționează, când ar trebui să-l folosești și unele dintre lucrurile interesante pe care le poate face.

o reducere de bază

folosiți-o când: aveți o serie de sume și doriți să le adăugați pe toate.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

cum se utilizează:

• În acest exemplu, reducerea acceptă doi parametri, totalul și suma curentă.
• metoda reduce ciclurile prin fiecare număr din matrice la fel ca într-o buclă for.
• când bucla începe, valoarea totală este numărul din extrema stângă (29.76), iar suma curentă este cea de lângă ea (41.85).
• în acest exemplu special, dorim să adăugăm suma curentă la total.,
• calculul se repetă pentru fiecare sumă din matrice, dar de fiecare dată când valoarea curentă se modifică la următorul număr din matrice, deplasându-se spre dreapta.
• când nu mai sunt numere rămase în matrice, metoda returnează valoarea totală.

versiunea ES5 a metodei de reducere în JavaScript

dacă nu ați folosit niciodată sintaxa ES6 înainte, nu lăsați exemplul de mai sus să vă intimideze., E exact la fel ca scris:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

utilizare const în loc de var și am înlocui cuvântul function cu o grăsime „săgeată” (=>) după parametrii, și am omite cuvântul „întoarcere”.

voi folosi sintaxa ES6 pentru restul exemplelor, deoarece este mai concisă și lasă mai puțin loc pentru erori.

găsirea unei medii cu metoda de reducere în JavaScript

în loc să înregistrați suma, puteți împărți suma la lungimea matricei înainte de a returna o valoare finală.,modul de a face acest lucru este profitând de celelalte argumente din metoda de reducere. Primul dintre aceste argumente este indexul. La fel ca un for-loop, indicele se referă la numărul de ori reductorul a buclat peste matrice. Ultimul argument este matricea în sine.

mapați și filtrați ca Reduceri

dacă puteți utiliza funcția de reducere pentru a scuipa o medie, atunci o puteți utiliza în orice mod doriți.,de exemplu, puteți dubla totalul sau jumătate din fiecare număr înainte de a le adăuga împreună sau puteți utiliza o declarație if în interiorul reductorului pentru a adăuga doar numere mai mari de 10. Ideea mea este că metoda de reducere în JavaScript vă oferă un mini CodePen unde puteți scrie orice logică doriți. Se va repeta logica pentru fiecare sumă din matrice și apoi se va returna o singură valoare.

chestia este că nu trebuie să returnați întotdeauna o singură valoare. Puteți reduce o matrice într-o nouă matrice.,

de exemplu, permite reducerea unei matrice de sume într-o altă matrice în cazul în care fiecare sumă este dublată. Pentru a face acest lucru, trebuie să setați valoarea inițială pentru acumulatorul nostru la o matrice goală.

valoarea inițială este valoarea parametrului total atunci când începe reducerea. Setați valoarea inițială adăugând o virgulă urmată de valoarea inițială în paranteze, dar după bretele ondulate (bolded în exemplul de mai jos).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

în exemplele anterioare, valoarea inițială a fost zero, așa că am omis-o., Prin omiterea valorii inițiale, totalul va implicit la prima sumă în matrice.

prin setarea valorii inițiale la o matrice goală, putem împinge fiecare sumă în total. Dacă vrem să reducem o serie de valori într-o altă matrice în care fiecare valoare este dublată, trebuie să împingem suma * 2. Apoi returnăm totalul atunci când nu mai sunt sume de împins.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

am creat o nouă matrice în care fiecare sumă este dublată. De asemenea, am putea filtra numerele pe care nu vrem să le dublăm adăugând o declarație if în reductorul nostru.,aceste operații sunt metodele de hartă și filtrare rescrise ca metodă de reducere.

pentru aceste exemple, ar avea mai mult sens să folosiți map sau filter, deoarece acestea sunt mai simple de utilizat. Beneficiul utilizării reduce intră în joc atunci când doriți să cartografiați și să filtrați împreună și aveți o mulțime de date pentru a trece peste.

dacă lanțul harta și filtru împreună faci munca de două ori. Filtrați fiecare valoare și apoi mapați valorile rămase. Cu reducerea puteți filtra și apoi harta într-o singură trecere.,

utilizați harta și filtrul, dar când începeți să înlănțuiți o mulțime de metode împreună, știți acum că este mai rapid să reduceți datele.

crearea unei concordanțe cu metoda de reducere în JavaScript

folosiți-o când: aveți o colecție de articole și doriți să știți câte din fiecare articol sunt în colecție.

pentru a corespunde elemente într-o matrice valoarea noastră inițială trebuie să fie un obiect gol, nu un tablou gol ca a fost în ultimul exemplu.

deoarece vom returna un obiect, acum putem stoca perechi cheie-valoare în total.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

la prima noastră trecere, dorim ca numele primei chei să fie valoarea noastră curentă și vrem să-i dăm o valoare de 1.acest lucru ne dă un obiect cu toate fructele ca chei, fiecare cu o valoare de 1. Vrem ca cantitatea fiecărui fruct să crească dacă se repetă.pentru a face acest lucru, în a doua buclă verificăm dacă totalul nostru conține o cheie cu fructul curent al reductorului. Dacă nu, atunci îl creăm. În cazul în care o face, atunci am incrementa suma de unul.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

am rescris exact aceeași logică într-un mod mai concis în sus.,

aplatizarea unei matrice de matrice cu metoda de reducere în JavaScript

putem folosi reduce pentru a aplatiza sumele imbricate într-o singură matrice.

setăm valoarea inițială la o matrice goală și apoi concatenăm valoarea curentă la total.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

de cele mai multe ori, informațiile sunt imbricate în moduri mai complicate. De exemplu, să spunem că vrem doar toate culorile din variabila de date de mai jos.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

vom trece prin fiecare obiect și vom scoate culorile. Facem acest lucru indicând suma.c pentru fiecare obiect din matrice., Apoi folosim o buclă forEach pentru a împinge fiecare valoare din matricea imbricată în total.dacă avem nevoie doar de un număr unic, atunci putem verifica dacă numărul există deja în total înainte de a-l împinge.un aspect interesant al metodei de reducere în JavaScript este că puteți reduce funcțiile, precum și numerele și șirurile.să presupunem că avem o colecție de funcții matematice simple. aceste funcții ne permit să creștem, să scădem, să dublăm și să înjumătățim o sumă.,din orice motiv, trebuie să creștem, apoi să dublăm, apoi să scădem o sumă.puteți scrie o funcție care preia o intrare și returnează (input + 1) * 2 -1. Problema este că știm că va trebui să creștem suma de trei ori, apoi să o dublăm, apoi să o decrementăm și apoi să o înjumătățim la un moment dat în viitor. Nu vrem să ne rescriem funcția de fiecare dată, așa că vom folosi reducerea pentru a crea o conductă.

o conductă este un termen folosit pentru o listă de funcții care transformă o anumită valoare inițială într-o valoare finală., Conducta noastră va consta din cele trei funcții ale noastre în ordinea în care dorim să le folosim.

let pipeline = ;

în loc să reducem o serie de valori, reducem conducta noastră de funcții. Acest lucru funcționează deoarece setăm valoarea inițială ca sumă pe care dorim să o transformăm.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

deoarece conducta este o matrice, aceasta poate fi ușor modificată. Dacă vrem să decrementăm ceva de trei ori, apoi să-l dublăm , să-l decrementăm și să-l înjumătățim, atunci pur și simplu modificăm conducta.

var pipeline = ;

funcția de reducere rămâne exact aceeași.,

greșeli stupide pentru a evita

dacă nu treci într-o valoare inițială, reduce va presupune primul element din matrice este valoarea inițială. Acest lucru a lucrat bine în primele câteva exemple pentru că am fost adăugarea de o listă de numere.

dacă încercați să numărați fructele și lăsați valoarea inițială, atunci lucrurile devin ciudate. Nu introduceți o valoare inițială este o greșeală ușoară de făcut și unul dintre primele lucruri pe care ar trebui să le verificați la depanare.o altă greșeală obișnuită este să uitați să returnați totalul. Trebuie să returnați ceva pentru ca funcția de reducere să funcționeze., Verificați întotdeauna dublu și asigurați-vă că returnați de fapt valoarea dorită.

instrumente, sfaturi & referințe

• totul în acest post a venit dintr-o serie video fantastic pe egghead numit introducerea Reduce. Îi dau credit integral lui Mykola Bilokonsky și îi sunt recunoscător pentru tot ceea ce știu acum despre utilizarea metodei reduc în JavaScript. Am încercat să rescriu o mare parte din ceea ce explică în propriile mele cuvinte ca un exercițiu pentru a înțelege mai bine fiecare concept., De asemenea, este mai ușor pentru mine să trimit un articol, spre deosebire de un videoclip, atunci când trebuie să-mi amintesc cum să fac ceva.
• MDN reduce etichetele de documentare ceea ce am numit un total accumulator. Este important să știți acest lucru, deoarece majoritatea oamenilor se vor referi la acesta ca la un acumulator dacă citiți despre el online. Unii oameni o numesc prev ca în valoarea anterioară. Totul se referă la același lucru. Am găsit – o mai ușor să se gândească la un total atunci când am fost de învățare reduce.,
• dacă doriți să practicați utilizarea reduce, Vă recomand să vă înscrieți la freeCodeCamp și să completați cât mai mulți algoritmi intermediari folosind reduce.
• dacă variabilele „const” din fragmentele de exemplu sunt noi pentru dvs., am scris un alt articol despre Variabilele ES6 și de ce ați putea dori să le utilizați.
• am scris, de asemenea, un articol numit The Trouble With Loops care explică modul de utilizare a hărții() și a filtrului() dacă sunt noi pentru dvs.

Vă mulțumim pentru lectură! Dacă doriți să fiți anunțat când scriu un articol nou, vă rugăm să introduceți adresa dvs. de e-mail aici.,

și dacă ți-a plăcut articolul, te rugăm să-l partajezi pe rețelele de socializare, astfel încât alții să-l poată găsi.