A JavaScript fejlesztésének egyik aspektusa, amellyel sok fejlesztő küzd, az opcionális értékekkel foglalkozik. Melyek a legjobb stratégiák az olyan hibák okozta hibák minimalizálására, amelyek null, undefined vagy futás közben más módon nem inicializálhatók?

Néhány nyelv beépített előnyökkel jár ilyen körülmények között. Egyes statikusan beírt nyelvekben elmondhatja, hogy a null és a undefined illegális értékek, és hagyja, hogy a programozási nyelv TypeError-t dobjon fordításkor , de még ezeken a nyelveken sem lehet “megakadályozni, hogy a null inputok futás közben áramlanak a programba.

A probléma jobb kezeléséhez meg kell értenünk, honnan származhatnak ezek az értékek. Itt a leggyakoribb források:

• Felhasználói bevitel
• Adatbázis / hálózati rekordok
• Inicializálatlan állapot
• Funkciók, amelyek ne adj vissza semmit

Ha felhasználói bevitelekkel foglalkozol, akkor az érvényesítés az első és a legjobb védelmi vonal. Gyakran a séma ellenőrzőire támaszkodom, hogy segítsenek ebben a munkában. Például nézd meg a reakciót -jsonschema-form.

Rekordok hidratálása a bemenetről

A hálózatról, adatbázisból vagy a felhasználó által kapott bemeneteket mindig hidratáló függvényen keresztül továbbítom. Például redux akciókészítők, amelyek képesek kezelni a

értékek a felhasználói rekordok hidratálásához:

const setUser = ({ name = "Anonymous", avatar = "anon.png" } = {}) => ({
type: setUser.type,
payload: {
name,
avatar
}
});
setUser.type = "userReducer/setUser";

Néha az aktuális állapottól függően különböző dolgokat kell megjelenítenie az adatok. Ha lehetséges az oldal megjelenítése az összes adat inicializálása előtt, akkor abban a helyzetben találhatja magát. Például, amikor pénzegyenleget jelenít meg egy felhasználó számára, véletlenül 0 dolláros egyenleget jeleníthet meg az adatok betöltése előtt. Ezt a felhasználókat már többször láttam. Létrehozhat egyedi adattípusokat, amelyek az aktuális állapot alapján különböző kimeneteket generálnak.

A fenti kód egy olyan állapotgép, amely lehetetlenné teszi az érvénytelen állapotok megjelenítését. Az első mérleg létrehozásakor uninitialized állapot lesz. Ha megpróbálja megjeleníteni az egyensúlyt, amikor az állapot uninitialized, akkor mindig helyőrző értéket kap (“--“).

Ennek megváltoztatásához kifejezetten meg kell adnia egy értéket a .set metódus vagy a setBalance parancsikon meghívásával. a createBalance gyár alatt definiáltuk.

Maga az állapot be van zárva, hogy megvédje a külső beavatkozásoktól, hogy más funkciók ne tudják megragadni és beállítani érvénytelen állapotba.

Megjegyzés: Ha kíváncsi vagy, miért használunk ehhez karakterláncokat számok helyett, az azért van, mert pénztípusokat képviselek nagyszámú karakterláncok, sok decimális pontossággal, a kerekítési hibák elkerülése és a kriptovaluta-tranzakciók értékeinek pontos ábrázolása érdekében, amelyek tetszőlegesen jelentős decimális pontossággal bírhatnak.

Ha ‘ a Redux vagy a Redux architektúra használatával deklarálhatja az állami gépeket a Redu segítségével x-DSM.

Kerülje a null és definiálatlan értékek létrehozását

Saját funkcióiban elkerülheti a null vagy a undefined értékek kezdeteként. A Java-ba beépített módon erre pár módon lehet gondolni. Lásd alább.

Kerülje a null

Soha nem hozok létre kifejezetten null értékeket a JavaScript-ben, mert soha nem láttam értelmét annak, hogy két különböző primitív értékek, amelyek lényegében azt jelentik, hogy “ez az érték nem létezik”.

2015 óta a JavaScript támogatja az alapértelmezett értékeket, amelyek akkor kerülnek kitöltésre, ha nem ad meg értéket a kérdéses argumentumhoz vagy tulajdonsághoz. Ezek az alapértelmezett értékek nem működnek a null értékeknél. Ez tapasztalatom szerint általában hiba. A csapda elkerülése érdekében ne használja a null parancsot a JavaScript-ben.

Ha különleges eseteket szeretne inicializálatlan vagy üres értékek esetén, akkor jobb az állami gépek. Lásd fent.

Új JavaScript funkciók

Van néhány olyan funkció, amely segíthet a null vagy a értékek. Mindkettő a 3. szakasz javaslata az írás idején, de ha a jövőből olvasol, akkor használhatod őket.

Jelen írásban az opcionális láncolás a 3. szakasz javaslata. Így működik:

const foo = {};
// console.log(foo.bar.baz); // throws error
console.log(foo.bar?.baz) // undefined

Nullish Coalescing Operator

A specifikációhoz hozzáadandó 3-as stádiumú javaslat is, “nullable coalescing operator ”Alapvetően divatos módja a„ tartalékérték operátor ”kifejezésének. Ha a bal oldali érték undefined vagy null, akkor a jobb oldali érték.A következőképpen működik:

Aszinkron akár ígéretekkel

Ha egy függvény nem biztos, hogy visszatér egy értékkel, akkor célszerű az egyikbe csomagolni. A funkcionális programozásban az Ether monad egy speciális absztrakt adattípus, amely lehetővé teszi két különböző kódút csatolását: egy sikerút vagy egy sikertelenséget. A JavaScript beépített aszinkron mindkét Promóció nevű monad-ish típusú adattal rendelkezik. Használhatja deklaratív hibaelágazásra meghatározatlan értékek esetén:

Írhatna ennek szinkron verzióját, ha akarja, de nekem nem volt rá nagy szükségem. Ezt gyakorlatként hagyom neked. Ha jó alapja van a functoroknak és a monádoknak, a folyamat könnyebb lesz. Ha ez félelmetesen hangzik, ne aggódjon miatta. Csak használja az ígéreteket. Be vannak építve, és legtöbbször jól működnek.

Maybes tömbök

A tömbök egy map metódust valósítanak meg a tömb minden elemére alkalmazott függvény. Ha a tömb üres, akkor a függvény soha nem lesz meghívva. Más szavakkal, a JavaScript tömbje kitöltheti a Maybes szerepét olyan nyelvekből, mint a Haskell.

Mi a Talán?

A Lehet egy különleges elvont adattípus, amely opcionális értéket foglal magában . Az adattípus kétféle formát ölthet:

• Just – A Talán értéket tartalmazó
• Semmi – a Lehet, hogy nincs érték

Az ötlet lényege:

Ez csak egy példa a koncepció bemutatására. Felépíthet egy hasznos függvénykönyvtárat a maybes köré, más műveletek végrehajtásával, például flatMap és flat (pl. A Just(Just(value)) amikor több, esetleg visszatérő funkciót készít). De a JavaScript-nek már van olyan adattípusa, amely sok ilyen tulajdonságot már a dobozon kívül megvalósít, ezért általában erre nyúlok: A tömb.

Ha olyan funkciót szeretne létrehozni, amely vagy lehet, hogy nem eredményez eredményt (főleg, ha több is lehet), nagyszerű esete lehet egy tömb visszaadására.

Úgy találom, hogy map nem fogják meghívni egy üres listán, amely nagyon hasznos a null és undefined értékek elkerülése érdekében, de ne feledje, ha a tömb null és undefined értékeket tartalmaz, ezekkel az értékekkel hívja meg a függvényt, tehát ha az újra futtatott függvény null vagy undefined, ezeket ki kell szűrnie a visszaküldött tömbből, amint azt fentebb bemutattuk. Ez megváltoztathatja a a gyűjtemény.

A Haskellben van egy maybe függvény, amely (például ) függvényt alkalmaz egy értékre. De az érték nem kötelező, és egy Maybe be van foglalva. A JavaScript “s Array adattípussal lényegében ugyanazt tehetjük:

maybe tartalékértéket vesz fel , majd egy funkció, amellyel leképezheti a talán tömböt, majd egy talán tömböt (egy értéket tartalmazó tömb, vagy semmi), és vagy a függvénynek a tömb tartalmára való alkalmazásának eredményét adja vissza, vagy a tartalék értéket, ha a tömb üres.

A kényelem kedvéért meghatároztam egy toMaybeArray függvényt is, és elkészítettem a maybe függvényt. ez a legnyilvánvalóbb ebben a bemutatóban.

Ha ilyesmit szeretnél csinálni a gyártási kódban, létrehoztam egy egység tesztelt nyílt forráskódú könyvtárat, hogy megkönnyítsem. Maybearray-nek hívják. A Maybearray előnye más JavaScript Talán a könyvtárakkal szemben az, hogy natív JavaScript tömböket használ az értékek ábrázolásához, így nem kell különösebb kezelést nyújtania nekik, vagy bármi különöset kell tennie az oda-vissza konvertáláshoz. Ha a hibakeresés során Talán tömbökkel találkozik, akkor nem kell megkérdeznie: “mi ez a furcsa típus ?!” Ez csak egy értéktömb vagy egy üres tömb, és már milliószor látta őket.

Következő lépések

Sokkal több tartalom található az EricElliottJS.com-on, beleértve a sokat is videók, gyakorlatok, rögzített képernyőfelvételek és gyors tippek. Ha még nem vagy tag, itt az alkalom, hogy megnézhesd, mi hiányzott!