A hozzád hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A modern JavaScript számos új funkcióval rendelkezik, amelyek megkönnyítik a kód egyszerű és strukturált írását. Az ES6+ egyik praktikus modern funkciója a tömb- és objektum-megsemmisítés.

A JavaScript-keretrendszerek, például a React.js és az Angular ösztönzik ennek a technikának a használatát. Ezért alapvető fontosságú, hogy megértsük, miről is szól a strukturálás, és hogyan használjuk azt kódírás közben.

Mi az objektum- és tömbdestrukció a JavaScriptben?

A JavaScriptben a destrukció az értékek kicsomagolása egy tömbből vagy objektumból. Tömörebb módszert biztosít az értékek tömbökből vagy objektumokból való lekérésére, nehéz emelés nélkül, ha egy objektumban lévő egyedi tömbelemek vagy értékek iránt érdeklődik.

Akkor is hasznos, ha összetett függvényből vagy kifejezésből visszaadott értékeket dolgoz fel. Ez a koncepció az egyik bevált gyakorlatok, amelyeket követnie kell a React kód írásakor.

instagram viewer

A tömbök megsemmisítése

Íme egy mintakód a tömb bontásának érzékeltetéséhez:

const arr = [1, 2];
const [a, b] = arr;
konzol.log (a) // 1-et nyomtat a konzolra
konzol.log (b) // 2-t nyomtat a konzolra

Ez a kód destrukturálást használ az értékek hozzárendeléséhez arr—1 és 2—változókra a és b, ill. Ez a destrukció mögötti alapvető koncepció. A jobb oldalon van egy tömb vagy objektum, a bal oldalon pedig kicsomagolja az elemeket, és hozzárendeli azokat az egyes változókhoz.

A motorháztető alatt a JavaScript másolja az értékeket arr és hozzárendeli őket a bal oldali változókhoz, így:

const arr = [1,2];
const a = arr[0];
const b = arr[1];

Amint látja, a strukturálás tömörebb módja ennek, ellentétben az objektum vagy zárójel jelöléssel. Ez a szintaxis azonban valószínűleg hasznos lesz, ha összetett tömbökkel vagy függvényekkel dolgozik, amelyek tömböket vagy karakterláncokat adnak vissza.

Ellenőrizze az alábbi mintakódot:

const [nap, hónap, dátum, év, idő, időzóna] = Dátum().hasított(' ')
// A Calling Date() az aktuális dátumot adja vissza a következő formátumban:
// 2023. február 20. hétfő, 13:07:29 GMT+0000
konzol.log (nap) // nyomtat H
konzol.log (hónap) // nyomtat febr
konzol.log (dátum) // 20-at nyomtat

Ebben a kódmintában egy új karakterláncot hozunk létre az aktuális dátummal a hívással Dátum(). Ezután használjuk hasított(), a JavaScript karakterlánc metódus, a karakterlánc elemeinek elválasztásához a szóköz használatával. hasított(' ') tömböt ad vissza, és destrukturálást használunk az értékek hozzárendeléséhez az egyes változókhoz.

Ne feledje, hogy ha a tömb több elemet tartalmaz, mint amennyit kicsomagol, a JavaScript figyelmen kívül hagyja az extra elemeket.

const arr = [1, 2, 3, 4];
const [a, b] = arr;
konzol.log (a) // nyomtat 1
konzol.log (b) // nyomtat 2
// a 3. és 4. érték nincs hozzárendelve egyetlen változóhoz sem; figyelmen kívül hagyják őket

Ebben az esetben, ha a fennmaradó elemeket egy változóban szeretné tárolni, használjon egy rest paramétert, például:

const arr = [1, 2, 3, 4];
const [a, b, ...pihenés] = arr;
konzol.log (rest) // nyomtat [3,4]

Előfordulhat, hogy nem törődik egy adott elemmel. A JavaScript destrukciós mintája lehetővé teszi bizonyos elemek kihagyását is üres vessző használatával.

const arr = [1, 2, 3, 4];
const [a,, c] = arr;
konzol.log (c) // nyomtat 3

A fenti kód az üres helyet használja az érték figyelmen kívül hagyására 2 a tömbben arr. Érték hozzárendelése helyett 2 változóhoz c, a tömb következő elemére ugrik. A negyedik értéket is figyelmen kívül hagyja, mert nem ad meg változót a tárolására.

Ezzel szemben, ha kevesebb elemre van szüksége, mint amennyit kicsomagol, a folyamat hozzárendeli a határozatlan értékét azoknak az extra változóknak.

const arr = [1];
const [a, b] = arr;
konzol.log (a) // nyomtat 1
konzol.log (b) // undefined nyomtat

Annak elkerülése érdekében, hogy a változók ne legyenek meghatározva, az alábbiak szerint állíthat be alapértelmezett értékeket, ha nem biztos a tömb hosszában (az alapértelmezett értékek hozzárendelése nem követelmény):

const arr = [1];
const [a = '10', b = 'nem biztosított'] = arr;
konzol.log (a) // nyomtat 1
konzol.log (b) // kiírja, hogy "nincs biztosítva"

Ez a strukturálás hozzárendeli az értéket 1 változóhoz a, felülírja az alapértelmezett értékét. Változó b megtartja az alapértelmezett értéket, mert nincs megadva érték.

Hogyan lehet az objektumokat megsemmisíteni

Az objektumok destrukturálása nem különbözik annyira a tömböktől. Az egyetlen különbség az, hogy a tömbök iterálhatók, az objektumok pedig nem, ami kissé eltérő módon hajtja végre a dolgokat.

Objektumokkal végzett munka során a hozzárendelési operátor bal oldalán lévő változók is inicializálódnak, mint az objektumok:

const személy = {név: "Alvin", kor: 10, magasság: 1};
const {név, életkor, magasság} = személy;
konzol.log (név) // kiírja az 'Alvin' szót
konzol.log (magasság) // nyomtat 1

A kódból a tulajdonságneveket használjuk személy tárgy. Azonban nem kell pontosan a tulajdonságneveket használnia az objektumban. Az értékeket a következőképpen szerkesztheti és tárolhatja különböző változónevekben:

const személy = {név: "Alvin", kor: 10, magasság: 1};
const {név: keresztnév, kor: évek, magasság: currentHeight} = személy;
konzol.log (keresztnév) // kiírja az 'Alvin' szót
konzol.log (currentHeight) // nyomtat 1

Először adja meg a strukturálni kívánt tulajdonság értékét, majd adja meg a változó nevét, amelyet az érték kettőspont utáni tárolására fog használni. És a tömbökhöz hasonlóan a nem létező tulajdonságnév megsemmisítése is az lesz határozatlan.

Ennek kezelésére hasonlóképpen megadhat alapértelmezett értékeket arra az esetre, ha a változóhoz rendelni kívánt tulajdonságnév nem elérhető:

const személy = {név: "Alvin", kor: 10, magasság: 1};
const {név, életkor, magasság, hely='Világszerte'} = személy;
konzol.log (név) // kiírja az 'Alvin' szót
konzol.log (hely) // kiírja a "Worldwide" szöveget

A bal oldalon lévő változók sorrendje nem számít egy objektumnál, mivel az objektumok kulcs-érték párokban tárolják az értékeket. Mint ilyen, a következő kód ugyanazt az eredményt adja:

const személy = {név: "Alvin", kor: 10, magasság: 1};
const {életkor, magasság, név} = személy;
konzol.log (név) // kiírja az 'Alvin' szót
konzol.log (magasság) // nyomtat 1

Végül, a tömbökhöz hasonlóan, a rest paramétert is használhatja több érték megsemmisítésére egy változóban, például:

const személy = {név: "Alvin", kor: 10, magasság: 1};
const {név,... többi} = személy;
konzol.log (név) // kiírja az 'Alvin' szót
konzol.log (rest) // nyomatok { kor: 10, magasság: 1 }

Csak vegye figyelembe, hogy a többi paraméternek mindig az utolsónak kell lennie. Ellenkező esetben a JavaScript kivételt dob.

Javítsa kódja minőségét a JavaScript destrukciójával

A Javascript modern funkciói, mint például a strukturálás, lehetővé teszik, hogy jól olvasható kódokat írjon. A destrukturálás segítségével gyorsan kicsomagolhatja az értékeket a tömbökből és objektumokból. A destrukturálás más helyzetekben is hasznosnak bizonyulhat, például két változó értékének felcserélésekor. Remélhetőleg most már megérti, mit jelent a destrukció a JavaScriptben, és használhatja azt kódírás közben.