A JavaScript struktúrájának átalakítása egyszerűsített módszer több tulajdonság kinyerésére egy tömbből azáltal, hogy a struktúrát levonja és a hozzárendelések révén dekonstruálja saját alkotórészeire egy tömb literálokhoz hasonló szintaxis használatával.
Létrehoz egy mintát, amely leírja az elvárt értéket, és elvégzi a hozzárendelést. A tömb destruktúrája a pozíciót használja.
Lásd az alábbi kódrészletet.
var [first, second, third] = ["Laide", "Gabriel", "Jets"];A szintaxis szerkezetátalakítással.
var first = "laide", second = "Gabriel", third = "Jets";A szintaxis szerkezetátalakítás nélkül.
Nem használhatja a Numbers-et szerkezetátalakításra. A számok hibát fognak okozni, mert a számok nem lehetnek változó nevek.var [1, 2, 3] = ["Laide", "Ola", "Jets"];Ez a szintaxis hibát dob.
A szerkezetátalakítás nagyon egyszerűvé és olvashatóvá tette az adatok kinyerését egy tömbből. Képzelje el, hogy megpróbál adatokat kinyerni egy beágyazott tömbből 5 vagy 6 szinttel. Ez nagyon unalmas lenne. A feladat bal oldalán talál egy tömb literált.
var thing = ["Table", "Chair", "Fan"];var [a, b, c] = thing;A tömb minden változóját veszi a bal oldalon, és a tömb ugyanazon indexén feltünteti ugyanarra az elemre.
console.log(a); // Output: Tableconsole.log(b); //Output: Chairconsole.log(c); //Output: FanA deklarálás és a hozzárendelés külön is elvégezhető a szerkezetátalakítás során.
var first, second;[first, second] = ["Male", "Female"];Ha a destruktív tömb literálokhoz továbbított változók száma meghaladja a tömb elemeit, akkor azok a változók visszatérnek, amelyek nincsenek hozzárendelve a tömb egyetlen eleméhezundefined.
var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c, d, e] = things;console.log(c); //Output: Fanconsole.log(d); //Output: Rugconsole.log(e); //Output: undefinedHa a destruktív tömb literálokhoz továbbított változók száma kisebb, mint a tömb elemei, a leképezendő változók nélküli elemek csak maradnak. Nincsenek hibák.
var things = ["Table", "Chair", "Fan", "Rug"];var [a, b, c] = things;console.log(c); // Output: FanA visszaküldött tömbök átalakítása
A szerkezetátalakítás pontosabbá teszi a tömböt mint értéket eredményező függvényekkel való munkát. Minden iterable esetén működik.
function runners(){ return ["Sandra", "Ola", "Chi"];}var [a, b, c] = runners();console.log(a); //Output: Sandraconsole.log(b); //Output: Olaconsole.log(c); //Output: ChiAlapértelmezett érték
A szerkezetátalakítás lehetővé teszi az alapértelmezett érték hozzárendelését egy változóhoz, ha nincs érték vagy undefinedelmúlt. Olyan, mintha tartalékot nyújtanánk, ha nem találunk semmit.
var a, b;[a = 40, b = 4] = [];console.log(a); //Output: 40console.log(b); //Output: 4[a = 40, b = 4] = [1, 23];console.log(a); //Output: 1console.log(b); //Output: 23Az alapértelmezett értékek más változókra is hivatkozhatnak, beleértve az azonos tömb literálban szereplőt is.
var [first = "Cotlin", second = first] = [];console.log(first); //Output: Cotlinconsole.log(second); //Output: Cotlinvar [first = "Cotlin", second = first] = ["Koku"];console.log(first); //Output: Kokuconsole.log(second); //Output: Kokuvar [first = "Cotlin", second = first] = ["Koku", "Lydia"];console.log(first); //Output: Kokuconsole.log(second); //Output: LydiaNéhány érték figyelmen kívül hagyása
A szerkezetátalakítás segítségével egy változó hozzárendelhető az érdeklődésre számot tartó elemekhez. A vesszők használatával figyelmen kívül hagyhatja vagy kihagyhatja a tömb többi elemét.
var a, b;[a, , b] = ["Lordy", "Crown", "Roses"];console.log(a); //Output: Lordyconsole.log(b); //Output: RosesA többi paraméter és a terjesztés szintaxisa
Az ES6-hoz hozzáadott új (…) operátor használható a szerkezetátalakításban. Ha a (…) operátor rombolás közben jelenik meg a bal oldalon, akkor az REST PARAMETER . A Rest paraméter a tömb összes többi elemének feltérképezésére szolgál, amelyeket nem társítottak magához a többi változóhoz. Olyan, mint összeszedni azt, ami hátrahagyott . A Rest változónak mindig az utolsónak kell lennie, különben a SyntaxErrordobódik.
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, , third, ...others] = planets;console.log(first); //Output: Mercuryconsole.log(third); //Output: Venusconsole.log(others); //Output: ["Mars", "Pluto", "Saturn"]Ha a (…) operátor a jobb oldalon jelenik meg a szerkezetátalakítás során, akkor az SPREAD SYNTAX . Azta tömb összes többi elemét, amelyhez nincs változó hozzárendelve, felveszi a többi változóba.
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]Ha több változó lehet a bal oldalon, akkor a tömb egyes elemeit a változókkal egyformán térképezi fel.
var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, second, ...rest] = ["Mercury", ...planets];console.log(first); //Output: Mercuryconsole.log(second); //Output: Mercuryconsole.log(rest); //Output: ["Earth", "Venus", "Mars", "Pluto", "Saturn"]var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];var [first, second, third, fourth ...rest] = ["Mercury", "Earth", ...planets];console.log(first); //Output: Mercuryconsole.log(second); //Output: Earthconsole.log(third); //Output: Mercuryconsole.log(fourth); //Output: Earthconsole.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]Változók cseréje vagy cseréje
Egy romboló kifejezés használható két változó értékeinek felcserélésére.
var a, b;[a, b] = ["Male", "Female"];[a, b] = [b, a];console.log(a); //Output: Femaleconsole.log(b); //Output: MaleBeágyazott tömbstrukturálás
Tömbökkel beágyazott destruktúrákat is végezhet. A megfelelő elemnek tömbnek kell lennie ahhoz, hogy beágyazott destruktív tömb literált használhasson a benne lévő elemek helyi változókhoz való hozzárendelésére.
var numbers = [8, [1, 2, 3], 10, 12];var [a, [d, e, f]] = numbers;console.log(a); // Output: 8console.log(d); // Output: 1console.log(e); // Output: 2Több tömb átstrukturálása
Egy tömböt többször is felépítheti ugyanabban a kódrészletben.
var places = ["first", "second", "third", "fourth"];var [a, b, , d] = [f, ...rest] = places;console.log(a); //Output: firstconsole.log(d); //Output: fourthconsole.log(f); //Output: firstconsole.log(rest); //Output: ["second", "third", "fourth"]Következtetés
Másolhatja és beillesztheti a kódot a Bábel webhelyére, hogy megnézze, hogyan néz ki a kód, ha nem létezik roncsolás. Több kódsort is írtál volna, de az átalakítás egyszerűsíti az egészet.