Opas Javascriptin vähentämismenetelmään

JavaScriptin vähentämismenetelmä on yksi toiminnallisen ohjelmoinnin kulmakivistä.Tutkitaan, miten se toimii, milloin sinun pitäisi käyttää sitä, ja joitain hienoja asioita, joita se voi tehdä.

Perusvähennys

Käytä sitä, kun : Sinulla on joukko summia ja haluat lisätä ne kaikki.

const euros = [29.76, 41.85, 46.5]; const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Kuinka käyttää sitä:

  • Tässä esimerkissä Reduce hyväksyy kaksi parametria, kokonaissumman ja nykyisen määrän.
  • Pienennysmenetelmä kiertää taulukon jokaisen numeron läpi samalla tavalla kuin for-loopissa.
  • Kun silmukka alkaa, kokonaisarvo on numero vasemmalla puolella (29,76) ja nykyinen summa on sen vieressä (41,85).
  • Tässä nimenomaisessa esimerkissä haluamme lisätä nykyisen määrän kokonaismäärään.
  • Laskenta toistetaan jokaiselle matriisin määrälle, mutta joka kerta, kun nykyinen arvo muuttuu taulukon seuraavaksi numeroksi, liikkuu oikealle.
  • Kun taulukossa ei ole enää numeroita, menetelmä palauttaa kokonaisarvon.

ES5-versio Reduce-menetelmästä JavaScriptissä

Jos et ole koskaan käyttänyt ES6-syntaksia aiemmin, älä anna yllä olevan esimerkin pelotella sinua. Se on täsmälleen sama kuin kirjoittaminen:

var euros = [29.76, 41.85, 46.5]; var sum = euros.reduce( function(total, amount){ return total + amount }); sum // 118.11

Käytämme sanan constsijaan varja korvataan sana function"rasvanuolella" ( =>) parametrien jälkeen, ja jätämme pois sanan "return".

Käytän ES6-syntaksia muissa esimerkeissä, koska se on suppeampi ja jättää vähemmän tilaa virheille.

Keskiarvon löytäminen Reduce-menetelmällä JavaScriptissä

Summan kirjaamisen sijasta voit jakaa summan matriisin pituudella ennen lopullisen arvon palauttamista.

Tapa tehdä tämä on hyödyntää muita pelkistysmenetelmän argumentteja. Ensimmäinen näistä argumenteista on hakemisto . Aivan kuten for-silmukan kohdalla, indeksi viittaa siihen, kuinka monta kertaa vähennysventtiili on silmukannut ryhmän yli. Viimeinen argumentti on itse taulukko .

const euros = [29.76, 41.85, 46.5]; const average = euros.reduce((total, amount, index, array) => { total += amount; if( index === array.length-1) { return total/array.length; }else { return total; } }); average // 39.37

Kartta ja suodatin vähennyksinä

Jos voit käyttää vähennystoimintoa keskimääräisen sylkemiseen, voit käyttää sitä haluamallasi tavalla.

Esimerkiksi voisi kaksinkertaistaa koko tai puoli jokainen numero ennen niiden laskemista yhteen, tai käytä, jos ilmoitus sisälle alennusvaihde lisäämään vain numeroita, jotka ovat suurempia kuin 10. Pointtini on, että Vähennä menetelmä JavaScript antaa mini CodePen, johon voit kirjoittaa haluamasi logiikan. Se toistaa taulukon jokaisen summan logiikan ja palauttaa sitten yhden arvon.

Asia on, että sinun ei aina tarvitse palauttaa yhtä arvoa. Voit pienentää taulukon uudeksi taulukoksi.

Esimerkiksi antaa vähentää joukon määriä toiseen ryhmään, jossa jokainen summa kaksinkertaistetaan. Tätä varten meidän on asetettava akun alkuperäiseksi arvoksi tyhjä taulukko.

Alkuarvo on kokonaisparametrin arvo, kun vähennys alkaa. Alkuarvo asetetaan lisäämällä pilkku, jota seuraa alkuarvo suluissa, mutta kiharoiden aaltosulkeiden jälkeen ( lihavoitu alla olevassa esimerkissä ).

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

Aikaisemmissa esimerkeissä alkuarvo oli nolla, joten jätin sen pois. Jos alkuperäinen arvo jätetään pois, kokonaismäärä oletuksena on matriisin ensimmäinen summa.

Asettamalla alkuarvo tyhjään array voimme sitten työntää kunkin määrä oli yhteensä . Jos haluamme pienentää arvoryhmän toiseen matriisiin, jossa jokainen arvo kaksinkertaistetaan, meidän on työnnettävä summa * 2. Sitten palautamme kokonaissumman, kun ei enää ole painettavia määriä.

const euros = [29.76, 41.85, 46.5]; const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total; }, []); doubled // [59.52, 83.7, 93]

Olemme luoneet uuden taulukon, jossa jokainen summa kaksinkertaistetaan. Voisimme myös suodattaa pois numerot, joita emme halua tuplata lisäämällä if-lausekkeen vähennysventtiiliin.

const euro = [29.76, 41.85, 46.5]; const above30 = euro.reduce((total, amount) => { if (amount > 30) { total.push(amount); } return total; }, []); above30 // [ 41.85, 46.5 ]

Nämä toiminnot ovat kartta- ja suodatusmenetelmiä, jotka on kirjoitettu uudelleen pelkistysmenetelmänä.

Näissä esimerkeissä olisi järkevämpää käyttää karttaa tai suodatinta, koska ne ovat yksinkertaisempia käyttää. Pienennyksen käytön etu tulee esiin, kun haluat kartoittaa ja suodattaa yhdessä ja sinulla on paljon tietoa.

Jos ketjutat kartan ja suodatat yhdessä, teet työtä kahdesti. Suodatat jokaisen arvon ja kartoitat loput arvot. Pienennyksen avulla voit suodattaa ja kartoittaa yhdellä kertaa.

Käytä karttaa ja suodatinta, mutta kun aloitat ketjujen ketjun ketjut yhteen, tiedät nyt, että sen sijaan on nopeampi vähentää dataa.

Tallyn luominen Reduce-menetelmällä JavaScriptissä

Käytä sitä, kun : Sinulla on kokoelma esineitä ja haluat tietää, kuinka monta kutakin tuotetta on kokoelmassa.

const fruitBasket = ['banana', 'cherry', 'orange', 'apple', 'cherry', 'orange', 'apple', 'banana', 'cherry', 'orange', 'fig' ]; const count = fruitBasket.reduce( (tally, fruit) =>  , {}) count // { banana: 2, cherry: 3, orange: 3, apple: 2, fig: 1 }

Taulukon kohteiden laskemiseksi alkuarvomme on oltava tyhjä objekti, ei tyhjä taulukko, kuten se oli edellisessä esimerkissä.

Koska aiomme palauttaa objektin, voimme nyt tallentaa avainarvopareja kokonaismäärään.

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

Ensimmäisellä kierroksella haluamme ensimmäisen avaimen nimen olevan nykyinen arvo ja haluamme antaa sille arvon 1.

Tämä antaa meille esineen, jossa kaikki hedelmät ovat avaimet, jokaisen arvo on 1. Haluamme, että jokaisen hedelmän määrä kasvaa, jos ne toistuvat.

Tätä varten tarkistamme toisella silmukallamme, onko kokonaissummasi avain pelkistimen nykyisen hedelmän kanssa. Jos ei, niin luomme sen. Jos näin tapahtuu, kasvatamme määrää yhdellä.

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

Kirjoitin täsmälleen saman logiikan ytimekkäämmällä tavalla ylöspäin.

Matriisiryhmän tasoittaminen JavaScript-pienennysmenetelmällä

Voimme käyttää pienennystä litistämään sisäkkäisiä määriä yhdeksi ryhmäksi.

Alkuarvoksi asetetaan tyhjä taulukko ja liitetään sitten nykyinen arvo kokonaisarvoon.

const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; const flat = data.reduce((total, amount) => { return total.concat(amount); }, []); flat // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Useimmiten tieto on sisäkkäin monimutkaisemmilla tavoilla. Oletetaan esimerkiksi, että haluamme vain kaikki värit alla olevassa muuttujassa.

const data = [ {a: 'happy', b: 'robin', c: ['blue','green']}, {a: 'tired', b: 'panther', c: ['green','black','orange','blue']}, {a: 'sad', b: 'goldfish', c: ['green','red']} ];

Aiomme käydä läpi kaikki esineet ja vetää värit. Teemme tämän osoittamalla määrä.c jokaiselle objektille taulukossa. Sitten käytämme forEach-silmukkaa työntämään sisäkkäisen taulukon kaikki arvot kokonaislukuun.

const colors = data.reduce((total, amount) => { amount.c.forEach( color => { total.push(color); }) return total; }, []) colors //['blue','green','green','black','orange','blue','green','red']

Jos tarvitsemme vain oma numero niin voimme tarkistaa, että numero on jo yhteensä ennen kuin sitä käytetään.

const uniqueColors = data.reduce((total, amount) => { amount.c.forEach( color => { if (total.indexOf(color) === -1){ total.push(color); } }); return total; }, []); uniqueColors // [ 'blue', 'red', 'green', 'black', 'orange']

Putki Reducen kanssa

Mielenkiintoinen näkökohta JavaScript-menetelmässä on se, että voit vähentää funktioiden lisäksi myös numeroita ja merkkijonoja.

Oletetaan, että meillä on kokoelma yksinkertaisia ​​matemaattisia toimintoja. näiden toimintojen avulla voimme lisätä, vähentää, tuplata ja puolittaa määrää.

function increment(input) { return input + 1;} function decrement(input) { return input — 1; } function double(input) { return input * 2; } function halve(input) { return input / 2; }

Mistä tahansa syystä meidän on lisättävä, sitten kaksinkertaistettava, sitten vähennettävä summa.

Voit kirjoittaa funktion, joka ottaa syötteen ja palauttaa (tulo + 1) * 2-1. Ongelmana on, että tiedämme, että joudumme lisäämään määrää kolme kertaa, sitten kaksinkertaistamaan sen, sitten vähentämään sitä ja puolittamaan sen jossain vaiheessa tulevaisuudessa. Emme halua, että meidän on kirjoitettava toimintoamme joka kerta, joten aiomme käyttää vähennystä putkilinjan luomiseen.

Putki on termi, jota käytetään luetteloon toiminnoista, jotka muuttavat jonkin alkuarvon lopulliseksi arvoksi. Putkistomme koostuu kolmesta toiminnostamme siinä järjestyksessä kuin haluamme niitä käyttää.

let pipeline = [increment, double, decrement];

Arvojen joukon pienentämisen sijaan pienennämme toimintojemme läpi. Tämä toimii, koska asetamme alkuarvoksi muutettavan määrän.

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

Koska putki on matriisi, sitä voidaan helposti muokata. Jos haluamme vähentää jotain kolme kertaa, tuplaa se, vähennä se ja puolittele se, muutamme vain putkistoa.

var pipeline = [ increment, increment, increment, double, decrement, halve ];

Pienennystoiminto pysyy täsmälleen samana.

Silly virheitä välttää

Jos et anna alkuperäistä arvoa, pienennä olettaa, että matriisin ensimmäinen kohde on alkuperäinen arvo. Tämä toimi hyvin muutamassa ensimmäisessä esimerkissä, koska olimme lisäämässä luetteloa numeroista.

Jos yrität kerätä hedelmiä ja jätät alkuperäisen arvon pois, asiat muuttuvat outoiksi. Alkuarvon syöttämättä jättäminen on helppo virhe ja yksi ensimmäisistä asioista, jotka kannattaa tarkistaa virheenkorjauksessa.

Toinen yleinen virhe on unohtaa palauttaa summa. Sinun on palautettava jotain, jotta vähennystoiminto toimii. Tarkista aina ja varmista, että palautat todella haluamasi arvon.

Työkalut, vinkit ja viitteet

  • Kaikki tämä viesti tuli fantastisesta egghead-videosarjasta nimeltä Introducing Reduce. Annan Mykola Bilokonskylle täyden tunnustuksen ja olen hänelle kiitollinen kaikesta, mitä tiedän nyt Reduce Method In JavaScriptin käytöstä. Olen yrittänyt kirjoittaa suuren osan siitä, mitä hän selittää omin sanoin, harjoituksena ymmärtääkseni paremmin jokaisen käsitteen. Minulla on myös helpompi viitata artikkeliin, toisin kuin video, kun minun on muistettava, miten tehdä jotain.
  • MDN Vähennä dokumentaation tarrat mitä kutsutaan yhteensäaccumulator . On tärkeää tietää tämä, koska useimmat ihmiset kutsuvat sitä akuksi, jos luet siitä verkossa. Jotkut ihmiset kutsuvat sitä prevkuten edellisessä arvossa . Kaikki viittaa samaan asiaan. Minusta oli helpompaa ajatella kokonaismäärää, kun opiskelin vähentämistä.
  • Jos haluat harjoitella vähentämisen käyttöä, suosittelen rekisteröitymistä freeCodeCampiin ja suorittamaan niin monta välialgoritmia kuin voit käyttää reducia.
  • Jos esimerkkikatkelmien 'const' -muuttujat ovat sinulle uusia, kirjoitin toisen artikkelin ES6-muuttujista ja miksi haluat ehkä käyttää niitä.
  • Kirjoitin myös artikkelin nimeltä Trouble With Loops, joka selittää kuinka käyttää karttaa () ja suodattaa () jos ne ovat uusia sinulle.

Kiitos lukemisesta! Jos haluat ilmoituksen kirjoittaessani uutta artikkelia, kirjoita sähköpostiosoitteesi tähän.

Ja jos pidit artikkelista, jaa se sosiaalisessa mediassa, jotta muut voivat löytää sen.