egyszerűsítse a JavaScript-használat .térkép (),.csökkentse(), és .szűrő()

Ha kezdve a JavaScript használatát, lehet, hogy még nem hallottam, hogy a .map(), .reduce() vagy .filter()., Számomra egy ideig tartott, amíg néhány évvel ezelőtt el kellett támogatnom az Internet Explorer 8-at. De ha nem kell kompatibilisnek lennie ezzel a nagyon régi böngészővel, ismernie kell ezeket a módszereket.

vegye figyelembe, hogy ez a cikk valószínűleg bármilyen más programozási nyelvre is vonatkozik, mivel ezek olyan fogalmak, amelyek sok más nyelven léteznek.

hadd magyarázzam el, hogyan működik egy egyszerű példával. Tegyük fel, hogy több objektumot tartalmazó tömböt kapott-mindegyik egy személyt képvisel., A dolog, amire valóban szüksége van a végén, bár, egy olyan tömb, amely csak az egyes személyek azonosítóját tartalmazza.

hasonlítsuk össze!

használata.forEach():

var officersIds = ;officers.forEach(function (officer) {
officersIds.push(officer.id);
});

figyeljük meg, hogyan kell létrehozni egy üres tömb előre? Lássuk, hogyan néz ki a .map():

var officersIds = officers.map(function (officer) {
return officer.id
});

még tömörebbek lehetünk a nyíl funkciókkal (ES6 támogatást, Babel vagy Typescriptet igényel)

const officersIds = officers.map(officer => officer.id);

tehát hogyan működik a .map() munka?, Alapvetően 2 argumentumot, visszahívást és egy opcionális kontextust vesz igénybe (a visszahívásban this – nak tekintendő), amelyet az előző példában nem használtam. A visszahívás a tömb minden egyes értékére fut, és minden új értéket visszaad a kapott tömbben.

ne feledje, hogy a kapott tömb mindig azonos hosszúságú lesz, mint az eredeti tömb.

.reduce ()

csakúgy, mint a .map(), .reduce() is fut egy visszahívás minden eleme egy tömb., Itt az a különbség, hogy a reduce átadja ennek a visszahívásnak (az akkumulátornak) az eredményét az egyik tömb elemről a másikra.

az akkumulátor nagyjából bármi lehet (egész szám, karakterlánc, objektum stb.), és a .reduce()hívásakor kell példányosítani vagy átadni.

egy példa ideje! Tegyük fel, hogy van egy tömb ezekkel a pilótákkal és a megfelelő éves tapasztalattal:

meg kell tudni, hogy a teljes éves tapasztalat az összes őket., A .reduce(), ez elég egyszerű:

var totalYears = pilots.reduce(function (accumulator, pilot) {
return accumulator + pilot.years;
}, 0);

vegye figyelembe, hogy a kiindulási értéket 0-ra állítottam. Használhattam volna egy meglévő változót is, ha szükséges. Miután futtatta a visszahívást a tömb minden elemére, a reduce visszaadja akkumulátorunk végső értékét(esetünkben: 82).

lássuk, hogyan lehet ezt lerövidíteni az ES6 nyílfunkcióival:

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

most tegyük fel, hogy meg akarom találni, melyik pilóta a legtapasztaltabb., Ehhez használhatom a reduce – t is:

var mostExpPilot = pilots.reduce(function (oldest, pilot) {
return (oldest.years || 0) > pilot.years ? oldest : pilot;
}, {});

elneveztem az akkumulátoromat oldest. A visszahívásom összehasonlítja az akkumulátort minden pilótával. Ha egy pilóta több éves tapasztalattal rendelkezik, mint a oldest, akkor ez a pilóta lesz az új oldest, tehát ez az, amit visszatérek.

mint látható, a.reduce() használata egyszerű módja annak, hogy egyetlen értéket vagy objektumot hozzon létre egy tömbből.

.szűrő ()

mi van, ha van tömb, de csak néhány elemet szeretne benne?, Itt jön be a .filter()!

itt vannak az adataink:

mondjuk, hogy most két tömböt akarunk: az egyik a lázadó pilótáknak, a másik az imperiáloknak. A .filter() ez nem lehet könnyebb!

ennyi! Ez még rövidebb a nyílfüggvényekkel:

const rebels = pilots.filter(pilot => pilot.faction === "Rebels");
const empire = pilots.filter(pilot => pilot.faction === "Empire");

alapvetően, ha a visszahívási funkció true, akkor az aktuális elem a kapott tömbben lesz. Ha hamis, akkor nem lesz.

térkép (),.csökkentse(), és .,szűrő()

mivel mind a hármat tömbökre hívják, és mivel .map() és .filter() mindkét visszatérő tömböt, könnyen láncolhatjuk hívásainkat.

nézzünk meg egy másik példát. Itt vannak az adataink:

célunk: csak a force felhasználók teljes pontszámát szerezzük meg. Csináljuk lépésről lépésre!

először ki kell szűrnünk azokat a személyzetet, akik nem tudják használni az erőt:

var jediPersonnel = personnel.filter(function (person) {
return person.isForceUser;
});// Result: (Luke, Ezra and Caleb)

azzal, hogy 3 elem maradt a kapott tömbünkben. Most létre kell hoznunk egy tömböt, amely tartalmazza az egyes Jedik teljes pontszámát.,

var jediScores = jediPersonnel.map(function (jedi) {
return jedi.pilotingScore + jedi.shootingScore;
});// Result: 

lehetőséget, Majd használjuk csökkenti, hogy a összesen:

var totalJediScore = jediScores.reduce(function (acc, score) {
return acc + score;
}, 0);// Result: 420

most jön a poén… tudjuk lánc, hogy megszerezzük, amit akarunk, egyetlen sort:

nézd, milyen szép a nyíl funkciók:

Bumm! 💥

Megjegyzés: Az előző példában a .map() és .filter() nem is volt szükség. Ugyanazt az eredményt csak .reduce()segítségével tudtuk elérni. A példa kedvéért hagytam ott őket., Meg tudja tippelni, hogyan tudnánk csak megtartani a .reduce() – t és ugyanazt az eredményt elérni egy sor kóddal? Lásd a megoldást CodePen

miért nem használja .forEach ()?

for.map(),.reduce() és.filter(). De néhány évvel ezelőtt sokkal többet kezdtem dolgozni az API-ból származó adatokkal. Itt kezdtem látni a .forEach mögött hagyásának előnyeit.,

formázás

azt mondják, hogy meg kell jeleníteni egy listát az emberek, a nevük és a munka címe.

var data = 

az API megadja a fenti adatokat, de csak az egyes személyek címére és vezetéknevére van szüksége… meg kell formázni az adatokat. Az alkalmazásnak azonban minden egyes személy számára egyetlen nézetre is szüksége van, ezért olyan adatformázási funkciót kell írnia, amely mind listanézetben, mind egyetlen nézetben működik.,

ez azt jelenti, Hogy a .forEach hurok belsejében a formázás funkciót, vagy más volna, hogy lezárja az egyetlen elem egy tömb előtt adja, hogy a funkció csak, hogy ez a munka, mint így:

var result = formatElement();
// Yeah... that's not right at all

Tehát a hurok van, hogy lezárja a call of a funkció, mint ez:

data.forEach(function (element) {
var formatted = formatElement(element);
// But what then....
});

De .forEach() nem tér vissza semmit. Ez azt jelenti, hogy az eredményeket egy előre meghatározott tömbben kell nyomni.,

var results = ;data.forEach(function (element) {
var formatted = formatElement(element);
results.push(formatted);
});

ennek eredményeként 2 funkciója van: a formatElement() függvénye és a függvénye, amely az eredményeket a tömbben tolja.

miért van 2 funkciója, ha csak egy lehet?

var results = data.map(formatElement);

A tesztelés könnyebb

ha egységteszteket ír a kódhoz, akkor egyszerűbbnek találja a .map(), .reduce() vagy .filter().

mindössze annyit kell tennie, hogy bejövő adatokat szolgáltat a funkcióhoz, és elvárja, hogy az eredmény megjelenjen., Alapvetően ” mi jön ki, ha ezt átadják?”. Kevesebb manipuláció, kevesebb beforeEach()s és afterEach() s. ez egyszerű, egyszerű tesztelés.

próbáld ki!

Ha tetszett a cikk, és szeretne többet megtudni array módszerek, nézd meg a cikket, hogyan kell használni .some() és .find() A JavaScript.

kódolás!