Jos olet alkaa JavaScript, ehkä et ole kuullut .map(), .reduce() ja .filter()., Minulle, se kesti jonkin aikaa, koska minun piti tukea Internet Explorer 8 kunnes pari vuotta sitten. Mutta jos sinun ei tarvitse olla yhteensopiva tämän erittäin vanhan selaimen kanssa, sinun on tutustuttava näihin menetelmiin.
Ota huomioon, että tämä artikkeli todennäköisesti koskee, mitä muut ohjelmointi kieli saatat käyttää, koska nämä ovat käsitteitä, joita esiintyy monia muita kieliä.
Let me explain how it works with a simple example. Sano, että olet saanut joukon, joka sisältää useita esineitä-jokainen edustaa henkilöä., Loppujen lopuksi tarvitset kuitenkin joukon, joka sisältää vain jokaisen henkilön henkilöllisyyden.
Let ’ s compare!
Käyttäen .forEach():
var officersIds = ;officers.forEach(function (officer) {
officersIds.push(officer.id);
});
Huomaa, miten sinun täytyy luo tyhjä jono etukäteen? Katsotaanpa, mitä se näyttää, kun käytät .map():
var officersIds = officers.map(function (officer) {
return officer.id
});
Emme voi edes olla suppeampi nuoli toiminnot (vaatii ES6 tukea, Babel tai Kirjoituskoneella)
const officersIds = officers.map(officer => officer.id);
miten .map() toimii?, Periaatteessa on kestää 2 argumentteja, soittopyynnön ja valinnainen yhteydessä (pidetään this callback), jota en käytä edellisessä esimerkissä. Callback toimii kunkin arvon array ja palauttaa jokaisen uuden arvon tuloksena array.
pidä mielessä, että tuloksena oleva array on aina sama pituus kuin alkuperäinen array.
.vähentää()
Aivan kuin .map(), .reduce() toimii myös soittopyynnön kunkin elementin array., Mikä on erilaista tässä on, että vähentää kulkee tämän seurauksena soittopyynnön (varaaja) yhdestä array elementti toiseen.
akulla voi olla aika paljon mitä tahansa (kokonaisluku, merkkijono, objekti jne.) ja se on asennettava tai ohitettava soitettaessa .reduce().
time for an example! Sano, että sinulla on joukko näitä lentäjiä ja heidän kokemusvuosiaan:
meidän on tiedettävä kaikkien lentäjien kokonaiskokemusvuodet., .reduce(), se on melko yksinkertainen:
var totalYears = pilots.reduce(function (accumulator, pilot) {
return accumulator + pilot.years;
}, 0);
Huomaa, että olen asettaa aloitus-arvo kuin 0. Olisin tarvittaessa voinut käyttää myös olemassa olevaa muuttujaa. Suoritettuaan takaisinkutsun jokaiselle array-elementille, reduce palauttaa akun lopullisen arvon (meidän tapauksessamme: 82).
katsotaanpa, miten tämä voidaan lyhentää ES6 on nuoli toimintoja:
const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);
Nyt oletetaan, että haluan löytää joka ohjaajan on kokeneimmista yksi., Sillä, että voin käyttää vähentää sekä:
var mostExpPilot = pilots.reduce(function (oldest, pilot) {
return (oldest.years || 0) > pilot.years ? oldest : pilot;
}, {});
nimesin varaajan oldest. Takaisinkutsuni vertaa varaajaa jokaiseen lentäjään. Jos lentäjä on useamman vuoden kokemus kuin oldest, niin, että ohjaajan tulee uusi oldest joten se on yksi minun palata.
Kuten näette, käyttäen .reduce() on helppo tapa tuottaa yhden arvon tai objektin array.
.suodatin ()
Mitä jos sinulla on matriisi, mutta haluat vain osan sen elementeistä?, Sinne .filter() tulee!
Tässä on meidän tiedot:
Sano että haluamme kaksi paneelit nyt: yksi kapinallisten pilotit, toisen keisarilliset. .filter() se ei voisi olla helpompaa!
That ’ s it! Ja se on jopa lyhyempi nuoli toimintoja:
const rebels = pilots.filter(pilot => pilot.faction === "Rebels");
const empire = pilots.filter(pilot => pilot.faction === "Empire");
Pohjimmiltaan, jos takaisinsoitto-funktio palauttaa arvon tosi, nykyinen elementti on saatu valikoimaan. Jos se palaa väärin, se ei ole.
yhdistäminen .kartta(), .vähennä (), ja .,filter()
Koska kaikki kolme ovat nimeltään taulukot ja koska .map() ja .filter() sekä palauttaa taulukot, voimme helposti ketjun meidän puhelut.
Let ’ s check out another example. Tässä datamme:
tavoitteemme: Hanki vain voimankäyttäjien kokonaispistemäärä. Tehdään se askel askeleelta!
Ensinnäkin, meidän täytyy suodattaa pois ihmiset, jotka eivät voi käyttää voima:
var jediPersonnel = personnel.filter(function (person) {
return person.isForceUser;
});// Result: (Luke, Ezra and Caleb)
Kanssa, että meillä on 3 elementit jäljellä meidän tuloksena array. Meidän on luotava järjestelmä, joka sisältää jokaisen Jedin kokonaispisteet.,
var jediScores = jediPersonnel.map(function (jedi) {
return jedi.pilotingScore + jedi.shootingScore;
});// Result:
Ja oletetaan, käyttö vähentää saada yhteensä:
var totalJediScore = jediScores.reduce(function (acc, score) {
return acc + score;
}, 0);// Result: 420
Ja nyt tässä on hauska osa, voimme ketjun kaikki tämä saada mitä haluamme yhdellä rivillä:
Ja katso, miten kaunis se on nuoli toimintoja:
Boom! 💥
Huom: edellisessä esimerkissä .map() ja .filter() ollut edes tarpeen. Saman tuloksen voisi helposti saavuttaa vain .reduce(). Jätin ne sinne tämän esimerkin vuoksi., Arvaatko, miten voisimme pitää vain .reduce() ja saada saman tuloksen yhdellä koodirivillä? KS. codepen
– injektioneste, liuos.forEach()?
minulla oli tapana käyttää for silmukoita kaikkialla sijasta .map(), .reduce() ja .filter(). Mutta pari vuotta sitten aloin työskennellä paljon enemmän dataa, joka tuli API. Siellä aloin nähdä, mitä hyötyä on jättää .forEach taakse.,
muotoilu
sanoo, että pitää näyttää lista ihmisistä, joiden nimi ja työnimi on.
var data =
API antaa edellä mainitut tiedot, mutta sinun tarvitsee vain otsikko ja viimeinen nimi kunkin henkilön. Sinun täytyy alustaa tiedot. Kuitenkin, app on myös yksi näkymä jokaiselle henkilölle, joten sinun on kirjoittaa data alustus toiminto, joka sekä toimii luettelona ja samassa näkymässä.,
se tarkoittaa, Että et voi olla .forEach silmukan sisällä alustus-toiminto, tai muuten et olisi wrap your yksittäinen elementti array, ennen kuin voit siirtää sen toiminta vain, jotta se toimisi, kuten niin:
var result = formatElement();
// Yeah... that's not right at all
Joten silmukka on kääri soittaa toiminto, kuten tämä:
data.forEach(function (element) {
var formatted = formatElement(element);
// But what then....
});
Mutta .forEach() ei palauta mitään. Se tarkoittaa, että tulokset on työnnettävä ennalta määrätyn joukon sisään.,
var results = ;data.forEach(function (element) {
var formatted = formatElement(element);
results.push(formatted);
});
tämän seurauksena, sinulla on 2 toiminnot: oman formatElement() toiminto ja toiminto, joka työntää tuloksia array.
miksi on 2 toimintoa, kun voi olla vain yksi?
var results = data.map(formatElement);
Testaus on helpompaa
Jos olet kirjoittaa yksikkö testit koodin, löydät sen helpompi testata toimintoja voit soittaa .map(), .reduce() tai .filter().
kaikki mitä sinun tarvitsee tehdä on antaa saapuvia tietoja funktiosta ja odottaa tuloksen tulevan ulos., Pohjimmiltaan ” mitä tulee ulos, Jos tämä on ohi?”. Vähemmän manipulointia, vähemmän beforeEach(): n ja afterEach()s. Se on suoraviivainen, yksinkertainen testaus.
kokeile!
Jos pidit, että artikkelin ja haluavat oppia lisää array menetelmiä, check out my artikkeli siitä, miten käyttää .some() ja .find() JavaScript.
pidä koodaus!