Ezek a JavaScript módszerek néhány perc alatt növelik képességeit

A ma épített alkalmazások többsége valamilyen adatgyűjtési módosítást igényel. A gyűjteményben lévő elemek feldolgozása olyan gyakori művelet, amellyel valószínűleg találkozni fog. Felejtse el a hagyományos módon csinál for-loop, mint (let i=0; i < value.length; i++).

Gyors heads-up, az constin használata for-loophibát fog okozni. Ennek oka, mert minden végrehajtás során újra deklarálja az értéket, ezért ia i++. Tehát, amikor arra gondol, hogy használja, constvagy letkérdezze meg magától - újra deklarálják ezt az értéket? Ha a válasz igen , akkor menjen let, és ha nem , akkor menjen const. Több információ.

Tegyük fel, hogy meg akarja jeleníteni a termékek listáját és kategorizálni, szűrni, keresni, módosítani vagy frissíteni a gyűjteményt. Vagy esetleg gyors számításokat szeretne végezni, például összeget, szorzót stb. Mi az optimális módszer ennek elérésére?

Lehet, hogy nem szereted a nyíl funkciókat , nem akarsz túl sok időt tölteni valami új elsajátításával, vagy egyszerűen nem relevánsak számodra. Ne aggódj, nem vagy egyedül. Megmutatom, hogyan történik ez ES5-ben (funkcionális lassítás) és ES6-ban (nyílfüggvények).

Ne feledje: A nyílfüggvények és a függvénydeklarációk / kifejezések nem egyenértékűek, és nem helyettesíthetők vakon. Ne feledje, hogy a thiskulcsszó másképp működik a kettő között.

A megvizsgálandó módszerek:

  1. Spread operátor
  2. az iterátor számára
  3. magába foglalja()
  4. néhány()
  5. minden()
  6. szűrő()
  7. térkép()
  8. csökkenteni ()
Ha jobb webfejlesztőként szeretnél lenni, saját vállalkozást alapítani, másokat tanítani vagy fejlesztési készségeidet fejleszteni, heti tippeket és trükköket teszek közzé a legújabb webfejlesztési nyelveken.

1. Spread operátor

A Spread Operator kiterjeszt egy tömböt az elemeire. Objektum literálokhoz is használható.

Miért használjam?

  • Ez egy egyszerű és gyors mód egy tömb elemeinek megjelenítésére
  • Tömböknél és objektum literáloknál működik
  • Ez egy gyors és intuitív érvelés módja
  • Csak három pontot igényel ...

Példa:

Tegyük fel, hogy loop funkció létrehozása nélkül szeretné megjeleníteni a kedvenc ételek listáját. Használjon ilyen kiterjesztésű operátort:

2.… iterátor számára

Az for...ofutasítás ciklusonként / iterálva halad át a gyűjteményen, és lehetőséget nyújt bizonyos elemek módosítására. Helyettesíti a hagyományos módszert a for-loop.

Miért használjam?

  • Ez egyszerű elem hozzáadásához vagy frissítéséhez
  • Számítások elvégzéséhez (összeg, szorzás stb.)
  • Feltételes utasítások használatakor (if, while, switch stb.)
  • Tiszta és olvasható kódhoz vezet

Példa:

Tegyük fel, hogy van eszköztára, és meg akarja mutatni az összes eszközt benne. Az for...ofiterátor megkönnyíti.

3. Tartalmazza a () metódust

A includes()módszer segítségével ellenőrizhető, hogy létezik-e egy adott karakterlánc a gyűjteményben, és visszatér-e truevagy false. Ne feledje, hogy a kis- és nagybetűk különböznek egymástól: ha a gyűjteményben lévő elem SCHOOL, és rákeres school, akkor visszatér false.

Miért használjam?

  • Egyszerű keresési funkciók kiépítése
  • Intuitív megközelítés annak megállapításához, hogy létezik-e karakterlánc
  • Feltételes utasításokat használ a módosításhoz, a szűréshez és így tovább
  • Olvasható kódhoz vezet

Példa:

Tegyük fel bármilyen okból, hogy nincs tisztában azzal, milyen autók vannak a garázsban, és szükség van egy rendszerre, hogy ellenőrizze, létezik-e a kívánt autó. includes()a megmentésére!

4. Néhány () módszer

A some()módszer ellenőrzi, hogy létezik-e néhány elem egy tömbben, és visszaadja a truevagy -t false. Ez némileg hasonlít a includes()módszer fogalmához , azzal a különbséggel, hogy az argumentum függvény és nem karakterlánc.

Miért használjam?

  • Biztosítja, hogy valamelyik elem sikeres legyen
  • Függvények használatával feltételes utasításokat hajt végre
  • Legyen deklaratív a kódod
  • Néhány elég jó

Példa:

Tegyük fel, hogy klubtulajdonos vagy, és nem érdekel, ki lép be a klubba. De néhányat nem engednek be, mert túl sokat isznak (kreativitásom a legjobb). Ellenőrizze az alábbi különbségeket az ES5 és az ES6 között:

ES5:

ES6:

5. Minden () módszer

A every()módszer végignézi a tömböt, minden ellenőrzést végezelemet, és visszatér truevagy false. Ugyanaz a koncepció, mint some(). Kivéve, hogy minden tételnek meg kell felelnie a feltételes utasításnak, különben visszatér false.

Miért használjam?

  • Biztosítja, hogy minden elem megfeleljen a tesztnek
  • A feltételes utasításokat függvények segítségével hajthat végre
  • Legyen deklaratív a kódod

Példa:

Amikor legutóbb some()kiskorú diákokat engedtél be a klubba, valaki ezt jelentette, és a rendőrség elkapott. Ezúttal nem engedi, hogy ez megtörténjen, és ügyeljen arra, hogy mindenki átlépje a korhatárt az every()üzemeltetővel.

ES5

ES6

6. Szűrő () módszer

A filter()módszer új tömböt hoz létre a tesztet teljesítő összes elemgel.

Miért használjam?

  • Így elkerülheti a fő tömb megváltoztatását
  • Ez lehetővé teszi a nem szükséges elemek kiszűrését
  • Jobban olvasható kódot ad

Példa:

Tegyük fel, hogy csak a 30 feletti vagy azzal egyenlő árakat szeretné visszaadni. Szűrje ki az összes többi árat ...

ES5

ES6

7. Térkép () módszer

A map()módszer filter()egy új tömb visszaküldése szempontjából hasonló a módszerhez. Az egyetlen különbség azonban az, hogy az elemek módosítására szolgál.

Miért használjam?

  • Ezzel elkerülheti a fő tömb megváltoztatását
  • Módosíthatja a kívánt elemeket
  • Jobban olvasható kódot ad

Példa:

Tegyük fel, hogy van egy terméklistája az árakkal együtt. Menedzserének listára van szüksége az új árak megjelenítéséhez, miután 25% -kal megadóztatták őket. A map()módszer segíthet.

ES5

ES6

8. Csökkentés () módszer

A reduce()módszer használható egy tömb átalakítására valami másra, ami lehet egész szám, objektum, ígéretek láncolata (az ígéretek egymás utáni végrehajtása) stb. Gyakorlati okokból egy egyszerű felhasználási eset az egész számok összegzése lenne . Röviden: az egész tömböt egyetlen értékre „redukálja”.

Miért használjam?

  • Végezze el a számításokat
  • Számítson ki egy értéket
  • Számolja meg az ismétlődéseket
  • Objektumok csoportosítása tulajdonságok szerint
  • Az ígéretek egymás utáni végrehajtása
  • Ez egy gyors módszer a számítások elvégzésére

Példa:

Tegyük fel, hogy meg akarja tudni egy hét összes költségét. Használja reduce()ezt az értéket.

ES5

ES6

Megtalálhat a Fejlesztői hírekben, ahol minden héten publikálok. Vagy követhet a Twitteren, ahol releváns webfejlesztési tippeket és trükköket teszek közzé.