Okosan kódolj! Legyen gyorsabb, produktívabb és boldogabb JavaScript-fejlesztő, ha elsajátítja a nyelv legfontosabb és visszatérő funkcióit.
Legyen szó backendről vagy frontendről (vagy akár űrhajók), a JavaScript mindenhol megtalálható. Ezenkívül meglehetősen rugalmas nyelv (azaz kemény funkcionális programozási mintákkal és jó öreg osztályokkal rendelkezik), és más „C-szerű” nyelvekhez való hasonlósága megkönnyíti a fejlesztők számára az átállást más nyelvekről.
Ha akarod szintre emelje a JS játékot, azt javaslom, hogy ismerkedjen meg, gyakorolja és végül sajátítsa el a nyelven elérhető alábbi alapvető funkciókat. Ezek nem mindegyike feltétlenül „szükséges” a problémák megoldásához, de bizonyos esetekben nagy terhet róhatnak rád, míg másokban csökkenthetik a megírandó kód mennyiségét.
Tartalomjegyzék
térkép()
Eretnekség lenne fontos JavaScript-függvényekről cikket írni, és nem említeni a map()-t! 😆😆 A filter() és a redukció() mellett a map() egyfajta szentháromságot alkot. Ezek olyan funkciók, amelyeket karrierje során újra és újra használni fog, ezért érdemes megnézni őket. Vizsgáljuk meg őket egyenként, kezdve a map()-al.
A map() azon függvények közé tartozik, amelyek a legtöbb gondot okozzák a JavaScriptet tanuló embereknek. Miért? Nem azért, mert valami eredendően bonyolult lenne benne, hanem azért, mert a függvény működése az úgynevezett funkcionális programozásból származik. És mivel nem vagyunk kitéve a funkcionális programozásnak – iskoláink és az ipar tele van objektum-orientált nyelvekkel –, a működés furcsának, sőt helytelennek tűnik elfogult agyunk számára.
A JavaScript sokkal funkcionálisabb, mint az objektum-orientált, bár modern verziói mindent megtesznek ennek a ténynek elrejtésére. De ez egy egész konzerv kukac, amit talán egy másik napon kinyithatok. 🤣 Oké, térkép() . . .
A map() egy nagyon egyszerű függvény; egy tömbhöz csatlakozik, és segít minden elemet valami mássá alakítani, ami egy új tömböt eredményez. Az, hogy pontosan hogyan konvertáljon át egy elemet, egy másik funkció, amely megegyezés szerint névtelen.
Ennyi az egész! Lehet, hogy a szintaxist meg kell szokni, de lényegében ezt csináljuk a map() függvényben. Miért érdemes a map()-t használni? Attól függ, mit akarunk elérni. Tegyük fel például, hogy feljegyeztük a hőmérsékletet az elmúlt hét minden napjára, és egy egyszerű tömbként tároltuk. Most azonban azt mondják, hogy a műszerek nem voltak túl pontosak, és 1,5 fokkal alacsonyabb hőmérsékletet jelentettek, mint kellett volna.
Ezt a javítást a map() függvény segítségével tudjuk elvégezni, így:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23]; const correctedWeeklyReadings = weeklyReadings.map(reading => reading + 1.5); console.log(correctedWeeklyReadings); // gives [ 21.5, 23.5, 22, 20.5, 22.5, 23, 24.5 ]
Egy másik, nagyon praktikus példa a React világából származik, ahol gyakori minta a DOM elemlisták tömbökből történő létrehozása; szóval az ilyesmi gyakori:
export default ({ products }) => {
return products.map(product => {
return (
<div className="product" key={product.id}>
<div className="p-name">{product.name}</div>
<div className="p-desc">{product.description}</div>
</div>
);
});
};
Itt van egy funkcionális React komponens, amely a termékek listáját kapja kellékként. Ebből a listából (tömbből) összeállítja a HTML „div”-ek listáját, lényegében minden termékobjektumot HTML-be konvertálva. Az eredeti termékek tárgya érintetlen marad.
Érvelheted, hogy a map() nem más, mint egy dicsőített for ciklus, és teljesen igazad van. De vedd észre, hogy amint felhozod ezt az érvet, az objektum-orientáltan képzett elméd beszél, míg ezek a funkciók és logikájuk a funkcionális programozásból származnak, ahol az egységességet, a tömörséget és az eleganciát nagy tisztelet övezi. 🙂
szűrő()
A filter() egy rendkívül hasznos funkció, amelyet sok esetben újra és újra alkalmazni fog. Ahogy a neve is sugallja, ez a függvény az Ön által megadott szabályok/logika alapján szűr egy tömböt, és egy új tömböt ad vissza, amely a szabályoknak megfelelő elemeket tartalmazza.
Használjuk újra az időjárási példánkat. Tételezzük fel, hogy van egy tömbünk, amely a múlt hét minden napjának maximális hőmérsékletét tartalmazza; most szeretnénk megtudni, hány nap volt hidegebb. Igen, a „hidegebb” szubjektív fogalom, tehát tegyük fel, hogy olyan napokat keresünk, amikor a hőmérséklet 20 fok alatt volt. Ezt a filter() függvény segítségével tehetjük meg:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
console.log("Total colder days in week were: " + colderDays.length); // 1
Vegye figyelembe, hogy a filter()-nek átadott névtelen függvénynek logikai értéket kell visszaadnia: igaz vagy hamis. A filter() így tudja, hogy az adott elemet bele kell-e venni a szűrt tömbbe. Ebben a névtelen függvényben tetszőleges mennyiségű összetett logikát írhat; API-hívásokat kezdeményezhet, felhasználói bemeneteket olvashat, és így tovább, mindaddig, amíg megbizonyosodik arról, hogy a végén logikai értéket ad vissza.
Vigyázat: JavaScript-fejlesztőként szerzett tapasztalataim alapján ez egy mellékes megjegyzés. Legyen szó hanyagságról vagy rossz alapokról, sok programozó finom hibákat okoz a programjában a filter() használatakor. Írjuk át az előző kódot, hogy tartalmazza a hibát:
const weeklyReadings = [20, 22, 20.5, 19, 21, 21.5, 23];
const colderDays = weeklyReadings.filter(dayTemperature => {
return dayTemperature < 20;
});
if(colderDays) {
console.log("Yes, there were colder days last week");
} else {
console.log("No, there were no colder days");
}
Észrevesz valamit? Remek munka, ha sikerült! Az if feltétel a vége felé ellenőrzi a colderDays-t, ami valójában egy tömb! Meg fogsz lepődni, hogy az emberek hányszor követik el ezt a hibát, miközben versenyeznek a határidők betartásával vagy rosszkedvűen kódolnak (bármilyen okból). Ezzel a feltétellel az a probléma, hogy a JavaScript sok szempontból furcsa és következetlen nyelv, és ezek közé tartozik a dolgok „igazsága”. Míg [] == a true hamis értéket ad vissza, és azt gondolja, hogy a fenti kód nem sérült, a valóság az, hogy egy if feltételen belül, [] igazra értékeli! Más szóval, az általunk írt kód soha nem fogja azt mondani, hogy a múlt héten nem voltak hidegebb napok.
A javítás nagyon egyszerű, amint azt a fenti kód előtti kód tartalmazza. Ellenőrizzük a colderDays.length-et, amely garantáltan egész számot ad (nulla vagy nagyobb), és így következetesen működik a logikai összehasonlításban. Vegye figyelembe, hogy a filter() mindig, mindig, mindig egy tömböt ad vissza, legyen az üres vagy nem üres, így erre támaszkodhatunk, és magabiztosan írhatjuk le logikai összehasonlításainkat.
Hosszabb kitérő volt, mint terveztem, de az ehhez hasonló hibákat érdemes tízezer szóban kiemelni, ha kell, nagybetűvel. Remélem, nem fog ez megharapni, és megspórolja magát több száz órányi hibakeresési erőfeszítéstől! 🙂
csökkenti()
A cikkben, valamint a szabványos JavaScript-könyvtárban szereplő összes függvény közül a Reduction() a „zavaró és furcsa” koronája közé tartozik. Bár ez a funkció rendkívül fontos, és sok esetben elegáns kódot eredményez, a legtöbb JavaScript-fejlesztő elkerüli, és inkább bőbeszédű kódot írnak helyette.
Ennek az az oka – és őszinte leszek! — A redukció() nehezen érthető, mind a koncepció, mind a végrehajtás értelmében. Amikor elolvasod a leírását, többször újraolvastad, és mégis kételkedsz benne, hogy rosszul olvasta-e; és amikor működés közben látod, és megpróbálod elképzelni, hogyan működik, az agyad ezer csomóba csavarodik! 🤭
Most pedig ne félj. A redukció() függvény bonyolultságában és megfélemlítésében közel sem áll hozzá, mondjuk B+ fák és azok algoritmusai. Csak ez a fajta logika ritkán találkozik egy átlagos programozó napi munkája során.
Szóval, miután elriasztottam a nappali fényt, majd azonnal azt mondtam, hogy ne aggódj, végre szeretném megmutatni, mi ez a funkció, és miért is lehet rá szükségünk.
Ahogy a neve is sugallja, a Reduction()-t arra szokták, hogy csökkentsünk valamit. Amit redukál, az egy tömb, az pedig, amire az adott tömböt redukálja, az egyetlen érték (szám, karakterlánc, függvény, objektum, bármi). Íme egy egyszerűbb megfogalmazás – a Reduction() egyetlen értékké alakítja át a tömböt. Ne feledje, hogy a Reduction() függvény visszatérési értéke nem egy tömb, ami a map() és filter() esetén is így van. Ha ennyit megértünk, az már fél siker. 🙂
Nos, nyilvánvaló, hogy ha átalakítunk (kicsinyítünk) egy tömböt, akkor biztosítanunk kell a szükséges logikát; és a JS fejlesztőként szerzett tapasztalatai alapján már sejtette, hogy ezt egy függvény segítségével tesszük. Ezt a függvényt reduktor függvénynek nevezzük, amely a redukció() első argumentumát képezi. A második argumentum egy kezdőérték, például egy szám, egy karakterlánc stb. (egy idő múlva elmagyarázom, mi a fenének ez a „kezdőérték”).
Eddigi ismereteink alapján azt mondhatjuk, hogy a redukció() hívása így néz ki: array.reduce(reducerFunction, startValue). Most pedig foglalkozzunk az egész dolog lényegével: a reduktor funkcióval. Mint már megállapítottuk, a reduktor függvény az, amely megmondja a redukció()-nak, hogyan kell a tömböt egyetlen értékké alakítani. Két argumentum szükséges: egy változó, amely akkumulátorként működik (ne aggódjon, ezt is elmagyarázom), és egy változó az aktuális érték tárolására.
Tudom, tudom . . . ez egy csomó terminológia volt egyetlen függvényhez, amely nem is kötelező a JavaScriptben. 😝😝 És ez az oka annak, hogy az emberek megszöknek a redukciótól. De ha lépésről lépésre megtanulja, nemcsak megérti, hanem értékelni is fogja, ahogy egyre jobb fejlesztő lesz.
Oké, akkor térjünk vissza az aktuális témához. A redukció()-nak átadott „kezdőérték” a . . . nos, a használni kívánt számítás kezdőértéke. Például, ha szorzást fog végezni a reduktor függvényben, az 1-es kezdőértéknek van értelme; az összeadáshoz 0-val kezdheti, és így tovább.
Most nézzük meg a reduktor funkció aláírását. A redukció()-hoz átadott redukáló függvény a következő formában van: reduktorFunction(akkumulátor, áramérték). Az „Akkumulátor” csak egy fantázianév a számítás eredményét gyűjtő és tároló változónak; pontosan olyan, mintha egy total nevű változót használnánk egy tömb összes elemének összegzéséhez, valami ilyesmivel: total += arr[i]. Pontosan így kerül alkalmazásra a reduktor függvény a Reduction()-ban: az akkumulátort először az Ön által megadott kezdőértékre állítja be, majd egyenként meglátogatja a tömb elemeit, elvégzi a számítást, és az eredményt eltárolja a az akkumulátort, és így tovább. . .
Tehát mi ez az „aktuális érték” egy reduktor funkcióban? Ugyanaz az ötlet, mint amit gondolatban elképzelne, ha megkérném, hogy bejárjon egy tömböt: vesz egy változót, amely a nulláról indul, és egy lépéssel előre mozgatja. Miközben ezt csinálod, ha megkérlek, hogy hirtelen állj le, a tömb egyik elemén találnád magad, igaz? Ezt értjük aktuális érték alatt: ez annak a változónak az értéke, amely az éppen mérlegelés alatt álló tömbelemet reprezentálja (gondoljon egy tömbön való hurkolásra, ha ez segít).
Mindezek ellenére itt az ideje, hogy lássunk egy egyszerű példát, és lássuk, hogyan áll össze ez a zsargon egy tényleges reduction() hívásban. Tegyük fel, hogy van egy tömbünk, amely az elsõ n természetes számot tartalmazza (1, 2, 3… n), és szeretnénk megtalálni n faktoriálisát. Tudjuk, hogy megtalálni n! egyszerűen mindent meg kell szoroznunk, ami elvezet minket ehhez a megvalósításhoz:
const numbers = [1, 2, 3, 4, 5]; const factorial = numbers.reduce((acc, item) => acc * item, 1); console.log(factorial); // 120
Sok minden történik ebben a mindössze három soros kódban, ezért bontsuk ki egyenként az eddigi (nagyon hosszú) vita keretében. Amint nyilvánvaló, a számok az a tömb, amely tartalmazza az összes számot, amelyet meg akarunk szorozni. Ezután nézzük meg a numbers.reduce() hívást, amely azt mondja, hogy az acc kezdőértéke 1 legyen (mert nem befolyásolja vagy semmisíti meg a szorzást). Ezután ellenőrizze a reduktor függvény törzsét, az `(acc, item) => acc * item, amely egyszerűen azt mondja, hogy a tömbön keresztüli minden iteráció visszatérési értékének az elemnek meg kell szoroznia azzal, ami már van az akkumulátorban. Az iteráció és a szorzás tényleges tárolása kifejezetten az akkumulátorban az, ami a színfalak mögött történik, és ez az egyik legnagyobb ok, amiért a reduction() ilyen akadályt jelent a JavaScript-fejlesztők számára.
Miért érdemes a redukciót használni?
Ez egy nagyon jó kérdés, és őszintén szólva nincs biztos válaszom. Bármit is csinál a redukció(), megtehető ciklusokon, forEach() stb. segítségével. Ezek a technikák azonban sokkal több kódot eredményeznek, ami megnehezíti az olvasást, különösen ha sietsz. Aztán ott van a változhatatlanság miatti aggodalom: a redukció() és hasonló függvényekkel biztos lehetsz benne, hogy az eredeti adatok nem változtak; ez önmagában a hibák teljes osztályait küszöböli ki, különösen az elosztott alkalmazásokban.
Végül a Reduction() sokkal rugalmasabb abban az értelemben, hogy az akkumulátor lehet objektum, tömb vagy akár függvény is, ha szükséges; ugyanez vonatkozik a kezdőértékre és a függvényhívás egyéb részeire is – szinte bármi bemehet, és szinte bármi kijöhet, tehát rendkívüli rugalmasság van az újrafelhasználható kód megtervezésében.
Ha még mindig nem vagy meggyőződve, az is teljesen rendben van; maga a JavaScript-közösség élesen megosztott a reduction() „tömörsége”, „eleganciája” és „ereje” között, szóval nem baj, ha nem használod. 🙂 De mindenképpen nézz meg néhányat ügyes példák mielőtt a bin redukció() mellett döntene.
néhány()
Tegyük fel, hogy van egy objektumtömbje, ahol minden objektum egy személyt jelképez. Azt szeretné tudni, hogy vannak-e a tömbben 35 év feletti emberek. Ne feledje, hogy nem kell megszámolni, hány ilyen ember van, nem is beszélve arról, hogy lekérjük a listát. Amit itt mondunk, az az „egy vagy több” vagy a „legalább egy” megfelelője.
Hogy csinálod ezt?
Igen, létrehozhat egy zászlóváltozót, és a tömbön át hurkolhat a probléma megoldásához, így:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
let foundOver35 = false;
for (let i = 0; i < persons.length; i ++) {
if(persons[i].age > 35) {
foundOver35 = true;
break;
}
}
if(foundOver35) {
console.log("Yup, there are a few people here!")
}
A probléma? A kód szerintem túl C-szerű vagy Java-szerű. A „bőbeszédű” egy másik szó, ami eszembe jut. A tapasztalt JS a „csúnya”, „borzalmas” stb.-re gondolhat. 😝 És jogosan, vitatkoznék. Ennek a kódrészletnek az egyik módja a map()-hoz hasonló megoldás, de a megoldás még akkor is egy kicsit macerás.
Kiderült, hogy van egy elég ügyes, some() nevű függvényünk, amely már elérhető az alapnyelven. Ez a függvény tömböket működik, és elfogad egy egyéni „szűrő” függvényt, amely igaz vagy hamis logikai értéket ad vissza. Lényegében azt csinálja, amit az elmúlt percekben próbáltunk, csak nagyon tömören és elegánsan. Így használhatjuk:
const persons = [
{
name: 'Person 1',
age: 32
},
{
name: 'Person 2',
age: 40
},
];
if(persons.some(person => {
return person.age > 35
})) {
console.log("Found some people!")
}
Ugyanaz a bemenet, ugyanaz az eredmény, mint korábban; de figyelje meg a kód jelentős csökkenését! Figyeld meg azt is, milyen drasztikusan csökken a kognitív terhelés, mert nem kell többé soronként értelmeznünk a kódot, mintha mi magunk lennénk a tolmács! A kód ma már szinte természetes nyelvként olvasható.
minden()
Csakúgy, mint néhány(), van egy másik hasznos függvényünk is every(). Ahogyan már sejthető, ez is egy logikai értéket ad vissza attól függően, hogy a tömb összes eleme átment-e az adott teszten. Természetesen a teljesítendő teszt legtöbbször anonim funkcióként jelenik meg. Megkíméllek attól a fájdalomtól, hogy hogyan nézhet ki a kód egy naiv verziója, ezért az every() használatának módja a következő:
const entries = [
{
id: 1
},
{
id: 2
},
{
id: 3
},
];
if(entries.every(entry => {
return Number.isInteger(entry.id) && entry.id > 0;
})) {
console.log("All the entries have a valid id")
}
Mint nyilvánvaló, a kód a tömb összes objektumát ellenőrzi, hogy érvényes-e az azonosító tulajdonság. Az „érvényes” definíciója a problémakörnyezettől függ, de mint látható, ennél a kódnál nem negatív egész számokat vettem figyelembe. Ismét látjuk, milyen egyszerűen és elegánsan olvasható a kód, ami ennek (és hasonló) függvény(ek)nek az egyetlen célja.
magába foglalja()
Hogyan ellenőrzi az alkarakterláncok és tömbelemek létezését? Nos, ha olyan, mint én, gyorsan eléri az indexOf()-t, majd megkeresi a dokumentumokat, hogy megismerje a lehetséges visszatérési értékeit. Ez jelentős kényelmetlenség, és a visszatérési értékeket nehéz megjegyezni (gyorsan – mit jelent az a folyamat, amely 2-t ad vissza az operációs rendszerbe?).
De van egy jó alternatíva, amelyet használhatunk: include(). A használat olyan egyszerű, mint a név, az így kapott kód pedig rendkívül szívet melengető. Ne feledje, hogy a párosítást az include() végzi, és a kis- és nagybetűket megkülönbözteti, de azt hiszem, intuitív módon egyébként is ezt várjuk. És most itt az ideje egy kódnak!
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(4));
const name = "Ankush";
console.log(name.includes('ank')); // false, because first letter is in small caps
console.log(name.includes('Ank')); // true, as expected
Azonban ne várjon túl sokat ettől a szerény módszertől:
const user = {a: 10, b: 20};
console.log(user.includes('a')); // blows up, as objects don't have a "includes" method
Nem tud belenézni az objektumokba, mivel egyszerűen nincs objektumokhoz definiálva. De hé, tudjuk, hogy tömbökön működik, szóval talán trükközhetünk itt. . . 🤔.
const persons = [{name: 'Phil'}, {name: 'Jane'}];
persons.includes({name: 'Phil'});
Szóval, mi történik, amikor ezt a kódot futtatod? Nem robban fel, de a kimenet is kiábrándító: false. 😫😫 Valójában ennek köze van az objektumokhoz, mutatókhoz és ahhoz, hogy a JavaScript hogyan látja és kezeli a memóriát, ami egy saját világ. Ha mélyebbre szeretne merülni, nyugodtan ugorjon bele (esetleg kezdje el itt), de itt abbahagyom.
A fenti kódot úgy tudjuk működésbe hozni, ha a következőképpen írjuk át, de ezen a ponton szerintem többé-kevésbé viccsé válik:
const phil = {name: 'Phil'};
const persons = [phil, {name: 'Jane'}];
persons.includes(phil); // true
Ennek ellenére azt mutatja, hogy képesek vagyunk az include()-t objektumokra dolgozni, úgyhogy azt hiszem, ez nem egy teljes katasztrófa. 😄
szelet()
Tegyük fel, hogy van egy karakterláncunk, és megkérem, hogy adjon vissza egy részt, amely „r”-vel kezdődik és „z”-vel végződik (a tényleges karakterek nem fontosak). Hogyan közelítenéd meg? Talán hozzon létre egy új karakterláncot, és használja az összes szükséges karakter tárolására és visszaadására. Vagy ha Ön olyan, mint a legtöbb programozó, akkor cserébe adna nekem két tömbindexet: az egyik a részkarakterlánc kezdetét, a másik a végét jelzi.
Mindkét megközelítés jó, de van egy szeletelésnek nevezett koncepció, amely ügyes megoldást kínál ilyen helyzetekre. Szerencsére nincs követendő elgondolkodtató elmélet; A szeletelés pontosan azt jelenti, aminek hangzik – egy kisebb karakterláncot/tömböt hozunk létre az adottból, hasonlóan ahhoz, ahogyan gyümölcsszeleteket készítünk. Nézzük, mire gondolok, egy egyszerű példa segítségével:
const headline = "And in tonight's special, the guest we've all been waiting for!";
const startIndex = headline.indexOf('guest');
const endIndex = headline.indexOf('waiting');
const newHeadline = headline.slice(startIndex, endIndex);
console.log(newHeadline); // guest we've all been
A slice() esetén két indexet biztosítunk a JavaScript számára – az egyiket, ahol el akarjuk kezdeni a szeletelést, a másikat pedig, ahol le akarjuk fejezni. A slice()-vel az a bökkenő, hogy a végindex nem szerepel a végeredményben, ezért azt látjuk, hogy a fenti kód új címsorából hiányzik a „waiting” szó.
Az olyan fogalmak, mint a szeletelés, sokkal hangsúlyosabbak más nyelvekben, különösen a Pythonban. Ha megkérdezi ezeket a fejlesztőket, azt mondják, hogy nem tudják elképzelni az életet e funkció nélkül, és jogosan, amikor a nyelv nagyon ügyes szintaxist biztosít a szeleteléshez.
A szeletelés ügyes és rendkívül kényelmes, és nincs ok arra, hogy ne használja. Ez sem szintaktikai cukor, amely tele van teljesítménybüntetéssel, mivel sekély másolatokat hoz létre az eredeti tömbről/karakterláncról. A JavaScript-fejlesztőknek erősen ajánlom, hogy ismerkedjenek meg a slice()-vel, és vegyék fel az arzenáljába!
splice()
A splice() metódus úgy hangzik, mint a slice() rokona, és bizonyos szempontból vitathatjuk, hogy az. Mindkettő új tömböket/karakterláncokat hoz létre az eredetiekből, egy apró, de fontos különbséggel – a splice() eltávolítja, módosítja vagy hozzáadja az elemeket, de módosítja az eredeti tömböt. Az eredeti tömb ilyen „megsemmisítése” óriási problémákat okozhat, ha nem vagy óvatos, vagy nem érted a mély másolatokat és hivatkozásokat. Vajon mi akadályozta meg a fejlesztőket abban, hogy ugyanazt a megközelítést használják, mint a slice() esetében, és érintetlenül hagyják az eredeti tömböt, de azt hiszem, elnézőbbek lehetünk egy nyelvvel szemben tíz nap alatt készült el.
A panaszaim ellenére nézzük meg a splice() működését. Mutatok egy példát, ahol eltávolítunk néhány elemet egy tömbből, mivel ez a módszer leggyakrabban használt használata. Tartózkodni fogok attól sem, hogy példákat adjak hozzáadásra és beillesztésre, mert ezek könnyen megkereshetők és egyszerűek is.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter']; items.splice(2, 1); console.log(items); // [ 'eggs', 'milk', 'bread', 'butter' ]
A fenti splice() hívás a következőt mondja: kezdje a tömb 2. indexével (azaz a harmadik helyével), és távolítson el egy elemet. Az adott tömbben a ‘sajt’ a harmadik elem, így kikerül a tömbből, és az elemek tömbje a várakozásoknak megfelelően lerövidül. Egyébként az eltávolított elemeket a splice() adja vissza a formában vagy egy tömbben, tehát ha akartuk volna, a ‘cheese’-t egy változóban rögzíthettük volna.
Tapasztalataim szerint az indexOf() és a splice() nagyszerű szinergiával rendelkezik – megkeressük egy elem indexét, majd eltávolítjuk az adott tömbből. Azonban vegye figyelembe, hogy nem mindig ez a leghatékonyabb módszer, és gyakran egy objektum (a hash-térkép megfelelője) kulcsok használata sokkal gyorsabb.
váltás()
A shift() egyfajta kényelmi módszer, és egy tömb első elemének eltávolítására szolgál. Figyeljük meg, hogy ugyanezt meg lehet tenni a splice()-vel is, de a shift() egy kicsit könnyebben megjegyezhető és intuitív, amikor csak az első elemet kell levágnia.
const items = ['eggs', 'milk', 'cheese', 'bread', 'butter']; items.shift() console.log(items); // [ 'milk', 'cheese', 'bread', 'butter' ]
unshift()
Ahogy a shift() eltávolítja az első elemet egy tömbből, az unshift() egy új elemet ad a tömb elejére. Használata ugyanolyan egyszerű és kompakt:
const items = ['eggs', 'milk'];
items.unshift('bread')
console.log(items); // [ 'bread', 'eggs', 'milk' ]
Ennek ellenére nem tudok segíteni magamon, és figyelmeztetni a játékban újoncokat: a népszerű push() és pop() metódusokkal ellentétben a shift() és az unshift() rendkívül nem hatékony (a mögöttes algoritmusok működése miatt). Tehát, ha nagy tömbökön dolgozik (mondjuk 2000+ elem), akkor túl sok ilyen függvényhívás leállíthatja az alkalmazást.
tölt()
Néha több elemet is egyetlen értékre kell módosítania, vagy akár az egész tömböt úgymond „vissza kell állítania”. Ilyen helyzetekben a fill() megóv a ciklusoktól és az egyenkénti hibáktól. Használható a tömb egy részének vagy egészének az adott értékkel való helyettesítésére. Lássunk pár példát:
const heights = [1, 2, 4, 5, 6, 7, 1, 1]; heights.fill(0); console.log(heights); // [0, 0, 0, 0, 0, 0, 0, 0] const heights2 = [1, 2, 4, 5, 6, 7, 1, 1]; heights2.fill(0, 4); console.log(heights2); // [1, 2, 4, 5, 0, 0, 0, 0]
További említésre méltó funkciók
Bár a fenti lista az, amivel a legtöbb JavaScript-fejlesztő találkozik és használja karrierje során, ez korántsem teljes. A JavaScriptben annyi apróbb, de hasznos funkció (módszer) található, hogy nem lesz lehetséges egyetlen cikkben lefedni őket. Ennek ellenére néhány, ami eszembe jut, a következő:
- fordított()
- fajta()
- bejegyzés()
- tölt()
- megtalálja()
- lakás()
Arra biztatlak, hogy legalább ezeket nézze meg, hogy legyen fogalma arról, hogy léteznek ilyen kényelmi lehetőségek.
Következtetés
A JavaScript nagy nyelv, annak ellenére, hogy kevés alapvető fogalmat kell megtanulni. Ennek a nagy méretnek a zömét a rendelkezésünkre álló számos funkció (módszer) teszi ki. Mivel azonban a JavaScript a legtöbb fejlesztő számára másodlagos nyelv, nem merülünk elég mélyre, és sok gyönyörű és hasznos funkciót kihagyunk. Igazából ugyanez vonatkozik a funkcionális programozási koncepciókra is, de ez egy másik nap témája! 😅
Amikor csak teheti, szánjon egy kis időt az alapnyelv felfedezésére (és ha lehetséges, a híres segédkönyvtárak, mint pl. Lodash). Még az ezzel az erőfeszítéssel töltött néhány perc is hatalmas termelékenységnövekedést és sokkal tisztább és kompaktabb kódot eredményez.