7 tipp a undefined JavaScript használatához

A modern nyelvek többségének, mint a Ruby, a Python vagy a Java, egyetlen null értéke van (nil vagy null), ami ésszerű megközelítésnek tűnik.

De a JavaScript más.

null, de undefined is, a JavaScript üres értékeit képviseli. Tehát mi a pontos különbség közöttük?

A rövid válasz az, hogy a JavaScript-tolmács undefined -et ad vissza, ha olyan változóhoz vagy objektumtulajdonsághoz fér hozzá, amely még nincs inicializálva. Például:

A másik oldalon a null hiányzó objektumot képvisel referencia. A JavaScript nem inicializálja a null változókat vagy objektumtulajdonságokat.

Egyes natív módszerek, például az String.prototype.match() visszaadhatják az null elemeket egy hiányzó objektum jelölésére. Vessen egy pillantást a mintára:

Mivel a JavaScript megengedő, a fejlesztők megkísérlik elérni az inicializálatlan értékeket. Én is bűnös vagyok ilyen rossz gyakorlatok miatt.

Az ilyen kockázatos műveletek gyakran undefined kapcsolódó hibákat generálnak:

• TypeError: "undefined" is not a function
• TypeError: Cannot read property "<prop-name>" of undefined
• és hasonló típusú hibák.

A JavaScript-fejlesztő megérti ennek a poénnak az iróniáját :

Az ilyen hibák csökkentése érdekében meg kell értenie azokat az eseteket, amikor undefined generálódik. Fedezzük fel undefined és annak hatását a kódbiztonságra.

1. Mi nincs meghatározva

A JavaScript-nek 6 primitív típusa van:

És külön objektumtípus: {name: "Dmitri"} , .

6 primitív típus közül a undefined egy speciális érték, amelynek saját típusa Undefined. Az ECMAScript specifikáció szerint:

Meghatározatlan értékű primitív értéket használunk, ha egy változóhoz nincs hozzárendelve érték.

A szabvány egyértelműen meghatározza, hogy undefined fog kapni, ha nem inicializált változókat, nem létező objektumtulajdonságokat ér el, nem létező tömb elemek és hasonlóak.

Néhány példa:

A fenti példa bemutatja, hogy:

• egy inicializálatlan változó number
• nem létező objektumtulajdonság movie.year
• vagy nem létező tömb elem movies

értéke undefined lesz.

Az ECMAScript specifikáció meghatározza a undefined érték típusát:

A meghatározatlan típus olyan típus, amelynek egyedüli értéke a undefined érték.

Ebben az értelemben a typeof operátor "undefined" karakterláncot ad vissza egy undefined értékhez:

Természetesen a typeof jól működik annak ellenőrzésére, hogy egy változó tartalmaz-e undefined értéket:

2. Definíciókat létrehozó forgatókönyvek

2.1 Inicializálatlan változó

A deklarált változó, de még nincs hozzárendelve értékkel (inicializálatlan), alapértelmezés szerint undefined.

Egyszerű és egyszerű:

myVariable van deklarálva, és még nincs hozzárendelve értékkel. A változó elérése a következőt értékeli: undefined.

Az inicializálatlan változók problémáinak megoldására hatékony megközelítés lehetõség szerint kezdõ értéket rendelni. Minél kevesebb a változó létezik inicializálatlan állapotban, annál jobb.

Ideális esetben azonnal hozzárendel egy értéket a const myVariable = "Initial value" deklaráció után. De ez nem mindig lehetséges.

1. tipp: Kedvence const, különben használja a let elemet, de búcsúzzon el var

Véleményem szerint az ECMAScript 2015 egyik legjobb tulajdonsága a változók deklarálásának új módja const és . Nagy előrelépés.

const és let blokk hatókörbe kerül (ellentétben a régebbi hatókörű var) és egy ideiglenes holt zónában léteznek a deklarációs sorig.

Javaslom a const változót, ha az értéke nem fog változni. Megállapíthatatlan kötést hoz létre.

A const egyik szép tulajdonsága, hogy kezdeti értéket kell rendelnie a const myVariable = "initial" változóhoz. A változó nincs kitéve az inicializálatlan állapotnak, és a undefined elérése lehetetlen.

Ellenőrizzük a függvényt, amely igazolja, hogy egy szó palindróma:

length és half változókhoz egy értéket rendelünk egyszer. Ésszerűnek tűnik const nek nyilvánítani őket, mivel ezek a változók nem változnak.

Használja a let deklarációt azoknak a változóknak, amelyek értéke megváltozhat. Amikor csak lehetséges, azonnal rendeljen hozzá egy kezdőértéket, pl. let index = 0.

Mi van a régi iskolával var? Javaslatom, hogy hagyja abba a használatát.

var deklarációs probléma a függvény hatókörén belüli változó emelése. Deklarálhat egy var változót valahol a függvény hatókörének végén, de mégis elérheti a deklaráció előtt: és kap egy undefined.

myVariable elérhető, és még a deklarációs sor előtt is tartalmaz undefined -t: var myVariable = "Initial value".

Ezzel szemben egy const vagy let változó nem érhető el a deklarációs sor előtt – a változó a nyilatkozat előtt időbeli holt zónában van. Ez jó, mert kevesebb esélye van egy undefined elérésére.

A fenti példa a következővel frissült: let (ehelyett var) értéke ReferenceError -et dob, mert az időbeli holt zónában lévő változó nem érhető el.

A const változatlan kötésekhez való használatának ösztönzése vagy a let használatának ellenkezője biztosítja az inicializálatlan megjelenést csökkentő gyakorlatot változó.

2. tipp: Növelje a kohéziót

A kohézió jellemzi, hogy a modul elemei (névtér, osztály, módszer, kódblokk) milyen mértékben tartoznak egymáshoz. A kohézió lehet magas vagy alacsony.

Előnyös a magas kohéziójú modul, mert egy ilyen modul elemei kizárólag egyetlen feladatra összpontosítanak. Ez a modult:

• Koncentrált és érthető: könnyebben érthető, mit csinál a modul
• Karbantartható és könnyebben átalakítható: a modul változása kevesebb modult érint
• Újrafelhasználható: egyetlen feladatra összpontosítva megkönnyíti a modul újrafelhasználását.
• Tesztelhető: könnyebben tesztelné az egyetlen feladatra összpontosító modult. p>

  A jól megtervezett rendszer jellemzője a laza csatolással járó magas kohézió.

  A kódblokk kis modulnak tekinthető. Ahhoz, hogy profitálhasson a magas kohézió előnyeiből, tartsa a változókat a lehető legközelebb az őket használó kódblokkhoz.

  Például, ha egy változó kizárólag a blokk hatókörének logikájának kialakításához létezik, akkor deklarálja és csak a blokkon belül éltesse a változót (const vagy let nyilatkozatok). Ne tegye ki ezt a változót a blokk külső hatókörének, mivel a külső blokknak nem kell törődnie ezzel a változóval.

  A változók szükségtelenül meghosszabbított élettartamának egyik klasszikus példája a ciklus egy függvény belsejében:

  index, item és length változókat a függvénytest elején deklaráljuk. Ezeket azonban csak a vége felé használják. Mi a probléma ezzel a megközelítéssel?

  A tetején lévő deklaráció és a for utasításban szereplő index, item inicializálatlanok és undefined vannak kitéve. Indokolatlanul hosszú életciklusuk van a teljes funkciókörben.

  Jobb megközelítés, ha ezeket a változókat a lehető legközelebb helyezzük a felhasználási helyükhöz:

  index és item változók csak a for utasítás blokk hatókörében léteznek. Nincs jelentésük a for kívül.
  A length változót a használat forrásához is közel deklarálják.

  Miért jobb a módosított verzió, mint az eredeti? Lássuk:

  • A változók nincsenek kitéve inicializálatlan állapotnak, így nincs kockázata a undefined
  • a felhasználási helyükhöz lehető legközelebb eső változók növelik a kód olvashatóságát
  • A nagy összetartó kóddarabokat könnyebb átalakítani és szükség esetén külön funkciókba vonni egy nem létező tulajdonság
    

    Nem létező objektumtulajdon elérésekor a JavaScript visszaadja az undefined értéket.

    Bemutassuk ezt egy példában:

    favoriteMovie egyetlen tulajdonsággal rendelkező objektum title. Egy nem létező tulajdonság elérése actors egy tulajdonság-hozzáférés használatával favoriteMovie.actors undefined. / p>

    Nem létező tulajdonság elérése nem okoz hibát. A probléma akkor jelentkezik, amikor a nem létező tulajdonságból próbál adatokat szerezni, amely a leggyakoribb undefined csapda, amelyet a jól ismert TypeError: Cannot read property <prop> of undefined.

    Módosítsuk kissé az előző kódrészletet egy TypeError dobás szemléltetése érdekében:

    favoriteMovie nem rendelkezik a actors tulajdonsággal, tehát favoriteMovie.actors undefined értéket kap.

    Ennek eredményeként a undefined érték első elemének elérése a favoriteMovie.actors kifejezés használatával TypeError.

    A JavaScript megengedő jellege, amely lehetővé teszi a nem létező tulajdonságok elérését, a nemdeterminizmus forrása: lehet, hogy a tulajdonság be van állítva vagy sem. A probléma kikerülésének jó módja annak korlátozása, hogy az objektum mindig meghatározza a birtokában lévő tulajdonságokat.

    Sajnos gyakran nem tudja irányítani az objektumokat. Az ilyen objektumok eltérő tulajdonságokkal rendelkezhetnek különböző forgatókönyvekben. Tehát ezeket a forgatókönyveket manuálisan kell kezelnie.

    Vezessünk be egy append(array, toAppend) függvényt, amely új elemek tömbjének elején és / vagy végén ad hozzá. A toAppend paraméter elfogad egy tulajdonságú objektumot:

    • first: a array
    • last: az elem beillesztve a array.

    A függvény új tömbpéldányt ad vissza, az eredeti tömb megváltoztatása nélkül.

    A append() első, kissé naiv verziója így nézhet ki:

    Mivel toAppend objektum elhagyhatja a first vagy a last tulajdonságokat, kötelező ellenőrizni, hogy léteznek-e ezek a tulajdonságok a .

    A tulajdonság-hozzáférő undefined -nek értékeli, ha a tulajdonság nem létezik. Az első kísértés annak ellenőrzésére, hogy vannak-e first vagy last tulajdonságok, az az, hogy ellenőrizze őket a undefined. Ezt feltételes if(toAppend.first){} és if(toAppend.last){}…

    feltételekkel hajtják végre. Ennek a megközelítésnek van hátránya. undefined, valamint false, null, 0, NaN és "" hamis értékek.

    A append() jelenlegi megvalósításában a függvény nem engedélyezi hamis elemek beillesztését:

    A következő tippek elmagyarázzák, hogyan lehet helyesen ellenőrizni az ingatlan létezését.

    3. tipp: Ellenőrizze az ingatlan létét

    Szerencsére a JavaScript kínál egy csomó módszer annak megállapítására, hogy az objektum rendelkezik-e meghatározott tulajdonsággal:

    • obj.prop !== undefined: összehasonlítás a undefined közvetlenül
    • typeof obj.prop !== "undefined": ellenőrizze a tulajdonság érték típusát
    • obj.hasOwnProperty("prop"): ellenőrizze, hogy a az objektumnak van saját tulajdonsága
    • "prop" in obj: ellenőrizze, hogy az objektum rendelkezik-e saját vagy örökölt tulajdonsággal

    Javaslom: használja a in operátort. Rövid és édes szintaxisa van. Az in operátor jelenléte egyértelmű szándékot javasol annak ellenőrzésére, hogy az objektum rendelkezik-e konkrét tulajdonsággal, a tényleges tulajdonságérték elérése nélkül.

    

    obj.hasOwnProperty("prop") is jó megoldás. Ez valamivel hosszabb, mint a in operátor, és csak az objektum saját tulajdonságaiban ellenőrzi.

    Javítsuk a append(array, toAppend) függvényt a in operátor használatával:

    "first" in toAppend (és "last" in toAppend) true hogy létezik-e a megfelelő tulajdonság, false különben.

    in operátor kijavítja a hibát hamis elemek beillesztésével 0 és false. Ha ezeket az elemeket hozzáadja a elejéhez és végéhez, akkor a várt eredmény lesz.

    4. tipp: Szerkezetátalakítás az objektumtulajdonságok eléréséhez

    Az objektumtulajdonság elérésekor néha alapértelmezett értéket kell megadni, ha a tulajdonság nem létezik.

    Használhatja a in terner operátorral együtt ennek megvalósításához:

    A háromszintű operátor szintaxisa ijesztővé válik, amikor az ellenőrzendő tulajdonságok száma növekszik. Minden tulajdonsághoz létre kell hozni egy új kódsort az alapértelmezések kezeléséhez, növelve a hasonló kinézetű háromszintű operátorok csúnya falát.

    Az elegánsabb megközelítés érdekében ismerkedjünk meg egy nagyszerű ES2015 funkcióval, amelyet objektum-roncsolásnak hívunk.

    Az objektum roncsolása lehetővé teszi az objektumtulajdonság-értékek inline kibontását közvetlenül változókba, és alapértelmezett érték beállítását, ha a tulajdonság nem létezik. Kényelmes szintaxis a undefined közvetlen kezelésének elkerülése érdekében.

    Valójában a tulajdonság kibontása most már pontos:

    A dolgok működésének megtekintéséhez definiáljunk egy hasznos függvényt, amely idézőjelekbe tekeri a karakterláncot.

    quote(subject, config) elfogadja az első argumentumot beillesztendő karakterláncként. A config második argumentum egy tulajdonságú objektum:

    Az objektum rombolásának előnyeit alkalmazva valósítsuk meg a quote():

    const { char = """, skipIfQuoted = true } = config egy soron belüli strukturálás hozzárendeli a char és skipIfQuoted a config objektumból.
    Ha néhány tulajdonság hiányzik a config objektumból, a destrukturálási hozzárendelés megadja az alapértelmezett értékeket : """ char és false esetén skipIfQuoted.

    Szerencsére a funkción még van mit javítani.

    Helyezzük át a romboló hozzárendelést a paraméterek szakaszba. És állítson be egy alapértelmezett értéket (egy üres objektumot { }) a config paraméterhez, hogy a második argumentumot kihagyja, ha az alapértelmezett beállítások elegendőek.

    A romboló hozzárendelés a config paramétert helyettesíti a függvény aláírásában. Tetszik: quote() eggyel rövidebb lesz.

    = {} a romboló hozzárendelés jobb oldalán biztosítja, hogy egy üres objektumot használjanak, ha a második argumentum egyáltalán nincs megadva quote("Sunny day").

    Az objektum roncsolása hatékony funkció, amely hatékonyan kezeli az objektumok tulajdonságainak kinyerését. Tetszik a lehetőség, hogy megadjon egy alapértelmezett értéket, amelyet vissza kell adni, ha a hozzáférett tulajdonság nem létezik. Ennek eredményeként elkerüli a undefined t és a körülötte lévő problémákat.

    5. tipp: Töltse ki az objektumot alapértelmezett tulajdonságokkal.

    Ha nem szükséges minden tulajdonsághoz változót létrehozni, ahogy a romboló hozzárendelés teszi, akkor az egyes tulajdonságokat elmulasztó objektum kitölthető alapértelmezett értékekkel.

    Az ES2015 Object.assign(target, source1, source2, ...) átmásolja az összes megszámlálható saját tulajdonság értékét egy vagy több forrásobjektumból a célobjektumba. A függvény visszaadja a célobjektumot.

    Például hozzáférnie kell az unsafeOptions objektum tulajdonságaihoz, amelyek nem mindig tartalmazzák a teljes tulajdonságkészletet.

    A undefined elkerülése érdekében, amikor egy nem létező tulajdonsághoz hozzáfér a unsafeOptions címről, végezzünk néhány beállítást:

    • Adjon meg egy objektumot defaults, amely az alapértelmezett tulajdonságértékeket tartalmazza
    • Hívja az Object.assign({ }, defaults, unsafeOptions) elemet az építkezéshez egy új objektum options. Az új objektum az összes tulajdonságot megkapja a következőtől: unsafeOptions, de a hiányzóakat a defaults fájlok veszik át.

    unsafeOptions csak fontSize tulajdonságot tartalmaz. A defaults objektum meghatározza az fontSize és color tulajdonságok alapértelmezett értékeit.

    Object.assign() az első argumentumot célobjektumként veszi fel {}. A célobjektum megkapja az fontSize tulajdonság értékét az unsafeOptions forrásobjektumtól. És a color tulajdonság értéke a defaults forrásobjektumból, mert a unsafeOptions nem tartalmaz color.

    A forrásobjektumok felsorolásának sorrendje számít: a későbbi forrásobjektum-tulajdonságok felülírják a korábbiakat.

    Mostantól biztonságosan hozzáférhet a options objektum bármely tulajdonságához, beleértve a options.color fájlt, amely nem volt elérhető a unsafeOptions kezdetben.

    Szerencsére létezik egy egyszerűbb alternatíva az objektum alapértelmezett tulajdonságokkal történő kitöltésére.Azt javaslom, hogy az objektum inicializátorokban használja a spread tulajdonságokat.

    A Object.assign() meghívás helyett az objektumterjesztés szintaxisával másolja a célobjektumba a forrásobjektumok összes saját és megszámlálható tulajdonságát:

    az objektum inicializálója terjeszti a tulajdonságokat defaults és unsafeOptions forrásobjektumokból. Fontos a forrásobjektumok megadásának sorrendje: a későbbi forrásobjektum-tulajdonságok felülírják a korábbiakat.

    A hiányos objektum alapértelmezett tulajdonságértékekkel történő kitöltése hatékony stratégia a kód biztonságos és tartósvá tételéhez. A helyzettől függetlenül az objektum mindig a tulajdonságok teljes készletét tartalmazza: és undefined nem hozható létre.

    Bónusztipp: nullás koaleszszió

    Az operátor nullaszerű koalízálás alapértelmezett értéket vesz fel, ha az operandus undefined vagy null:

    A nulla koaleszkáló operátor kényelmesen hozzáférhet egy objektum tulajdonságához, miközben alapértelmezett értéke van, amikor ez a tulajdonság undefined vagy null:

    styles objektum nem rendelkezik a color tulajdonsággal, tehát styles.color a tulajdonság-hozzáférés undefined. styles.color ?? "black" az alapértelmezett értéket "black" értékeli.

    styles.fontSize 18, tehát a nullás koalézáló operátor a .

    2.3 Funkcióparaméterek

    A függvényparaméterek hallgatólagosan alapértelmezés szerint undefined.

    Általában egy meghatározott számú paraméterrel definiált függvényt kell azonos számú argumentummal meghívni. Ekkor kapják meg a paraméterek a várt értékeket:

    Amikor multiply(5, 3), a a és b paraméterek 5 és 3 értékeket. A szorzást a várt módon számolják: 5 * 3 = 15.

    Mi történik, ha kihagy egy argumentumot a meghíváskor? A függvényen belüli megfelelő paraméter undefined lesz.

    Módosítsuk kissé az előző példát a függvény egyetlen argumentummal történő meghívásával:

    Az invokáció A multiply(5) egyetlen argumentummal hajtódik végre: ennek eredményeként a a paraméter 5, de a A b paraméter undefined.

    6. tipp: Használja az alapértelmezett paraméterértéket.

    Néha egy függvényhez nincs szükség teljes argumentumkészletre a meghíváskor. Alapértékeket állíthat be azokhoz a paraméterekhez, amelyeknek nincs értéke.

    Felidézve az előző példát, tegyünk javulást. Ha a b paraméter undefined, hagyja alapértelmezés szerint 2:

    A függvény egyetlen argumentummal hívható meg multiply(5). Kezdetben a a paraméter 2 és b undefined.
    A feltételes utasítás ellenőrzi, hogy a b undefined. Ha ez megtörténik, a b = 2 hozzárendelés alapértelmezett értéket állít be.

    Bár az alapértelmezett értékek hozzárendelésének módja működik, nem ajánlom a közvetlen összehasonlítást a undefined -vel. Bőbeszédű és úgy néz ki, mint egy hack.

    Jobb megközelítés az ES2015 alapértelmezett paramétereinek használata. Rövid, kifejező és nincs közvetlen összehasonlítás a undefined vel.

    Alapértelmezett érték hozzáadása a b = 2 paraméterhez jobban néz ki:

    b = 2 a függvény aláírásában megbizonyosodik arról, hogy ha b undefined, a paraméter alapértelmezés szerint 2.

    Az ES2015 alapértelmezett paraméterei intuitívak és kifejezőek. Mindig használja az opcionális paraméterek alapértelmezett értékeinek beállításához.

    2.4 Funkció visszatérési értéke

    implicit módon, return utasítás nélkül, JavaScript-függvény undefined.

    Olyan függvény, amely nem rendelkezik return utasítás implicit módon visszaadja a következőt: undefined:

    függvény nem ad vissza számítási eredményt. A függvényhívás eredménye undefined.

    Ugyanez a helyzet akkor fordul elő, amikor a return utasítás jelen van, de a közelben nincs kifejezés:

    return; utasítás végrehajtásra kerül, de nem ad vissza kifejezést. A meghívás eredménye szintén undefined.

    Természetesen a (z) return közelében a visszatérendő kifejezés a várt módon működik:

    Most a függvényhívást 4 -re értékelik, ami 2 négyzet.

    7. tipp: Ne bízzon az pontos pontosvessző beillesztésében.

    A JavaScript utasításainak következő listájának pontosvesszővel kell végződnie (;) :

    • üres utasítás
    • let, const, var, import, export deklarációk
    • kifejezés utasítás
    • debugger utasítás
    • continue utasítás, break utasítás
    • throw utasítás
    • return utasítás

    Ha használja a fenti állítások egyikét, feltétlenül jelöljön pontosvesszőt a végén:

    Mindkettő végén let deklaráció és return utasítás kötelező kötelező pontosvesszőt ír.

    Mi történik, ha nem akarja ezeket megjelölni pontosvesszők? Ilyen helyzetben az ECMAScript egy automatikus pontosvessző-beillesztési (ASI) mechanizmust biztosít, amely beilleszti a hiányzó pontosvesszőket.

    Az ASI segítségével eltávolíthatja a pontosvesszőket az előző példából:

    A fenti szöveg egy érvényes JavaScript-kód. A hiányzó pontosvesszőket automatikusan beszúrja az Ön számára.

    Első látásra elég ígéretesnek tűnik. Az ASI mechanizmus lehetővé teszi a felesleges pontosvesszők kihagyását. Kisebbé és könnyebben olvashatóvá teheti a JavaScript kódot.

    Van egy kicsi, de bosszantó csapda, amelyet az ASI hozott létre. Amikor egy új sor return és a visszaadott return \n expression kifejezés között áll, az ASI automatikusan pontosvesszőt szúr az új sor elé return; \n expression.

    Mit jelent a függvény belsejében return; utasítás? A függvény visszaadja az undefined értéket. Ha nem ismeri részletesen az ASI mechanizmusát, akkor a váratlanul visszaadott undefined félrevezető.

    Vizsgáljuk meg például a getPrimeNumbers() meghívás visszaadott értékét:

    A return utasítás és a tömb szó szerinti kifejezés között új sor létezik. A JavaScript automatikusan pontosvesszőt szúr be a return után, a kódot a következőképpen értelmezi:

    A return; utasítás arra készteti a getPrimeNumbers() függvényt, hogy a várt tömb helyett undefined visszatérjen.

    A problémát úgy oldják meg, hogy eltávolítják az új sort a return és a tömb literál között:

    Javaslom, hogy tanulmányozzam, hogyan működik pontosan az automatikus pontosvessző-beillesztés az ilyen helyzetek elkerülése érdekében.

    Természetesen soha ne tegyen új sort a return és a visszaadott kifejezés közé.

    2.5 void operátor

    void <expression> kiértékeli a kifejezést, és eredményt ad eredményül: undefined értékelése.

    A void operátor egyik használati esete a kifejezés kiértékelésének elnyomása undefined, az értékelés valamilyen mellékhatására támaszkodva.

    3. undefined a tömbökben

    undefined jelet kap, ha tömbön kívüli indexű tömb elemhez fér hozzá.

    colors tömb 3 elemből áll, így az érvényes indexek , 1 és 2.

    Mivel a 5 és a -1 indexekben nincs tömb elem, a hozzáférők colors és colors undefined.

    A JavaScript-ben úgynevezett ritka tömbökkel találkozhat. A tézisek tömbök, amelyekben hiányosságok vannak, vagyis egyes indexeknél nincsenek meghatározva elemek.

    Ha egy gyér tömb belsejében egy rés (más néven üres rés) érhető el, akkor kap egy undefined.

    A következő példa ritka tömböket generál, és megpróbálja elérni az üres helyeiket:

    sparse1 egy konstruktor első numerikus argumentummal.3 üres helye van.

    sparse2 egy tömb literállal jön létre, a hiányzó második elemmel.

    Ezen ritka tömbök bármelyikében az üres nyílás elérése undefined értéket jelent.

    Ha tömbökkel dolgozik, a undefined elkerülése érdekében mindenképpen érvényes tömbindexeket használjon, és akadályozza meg a ritka tömbök létrehozását.

    4. Különbség a undefined és a null között

    Mi a fő különbség undefined és null? Mindkét speciális érték üres állapotot jelent.

    undefined egy még nem inicializált változó értékét képviseli, míg a null egy objektum szándékos hiányát jelenti.

    Fedezzük fel a különbséget néhány példában.

    A number változó definiálva van azonban nincs hozzárendelve kezdeti értékhez:

    number változó a undefined, ami egy inicializálatlan változót jelöl.

    Ugyanez az inicializálatlan koncepció akkor is előfordul, amikor egy nem létező objektumtulajdont érnek el:

    Mert lastName tulajdonság nem létezik a obj fájlban, a JavaScript obj.lastName értéket .

    A másik oldalon tudod, hogy egy változó objektumra számít. De valamilyen oknál fogva nem tudja példányosítani az objektumot. Ebben az esetben a null a hiányzó objektum értelmes mutatója.

    Például a clone() olyan függvény, amely klónoz egy sima JavaScript objektumot. A függvény várhatóan visszaad egy objektumot:

    Azonban clone() meghívható egy nem objektum argumentummal: 15 vagy null. Ilyen esetben a függvény nem hozhat létre klónt, így visszaadja a null -t – egy hiányzó objektum jelzőjét.

    typeof operátor különbséget tesz undefined és null között:

    A szigorú minőségi operátor === is helyesen különbözteti meg a undefined from null:

    5. Következtetés

    undefined a JavaScript megengedő következménye, amely lehetővé teszi a következők használatát:

    • inicializálatlan változók
    • nem létező objektumtulajdonságok vagy metódusok
    • a tömbön kívüli indexek a tömb elemek eléréséhez
    • a semmit nem eredményező függvény invokációs eredménye

    A (z) undefined közvetlen összehasonlítása nem biztonságos, mert a fent említett engedélyezett, de nem ajánlott gyakorlatra támaszkodik.

    Hatékony stratégia a undefined kulcsszó megjelenésének minimális csökkentése a kódban az alábbi jó szokások alkalmazásával:

    • csökkentse az inicializálatlan változók használatát
    • a változók életciklusát rövidre és a használatuk forrásához közel állítsa
    • amikor csak lehetséges, kezdőértékeket rendeljen a változókhoz
    • favor const, különben használja a let
    • alapértelmezett értékeket használja a jelentéktelen funkcióparaméterekhez
    • ellenőrizze a tulajdonságokat létezik, vagy töltse ki a nem biztonságos objektumokat alapértelmezett tulajdonságokkal
    • kerülje a ritka tömbök használatát

    Jó, hogy a JavaScript mindkét undefined és null hogy üres értékeket jelenítsen meg?