Moderní JavaScript má mnoho nových funkcí, které usnadňují psaní kódu jednoduchým a strukturovaným způsobem. Jednou z užitečných moderních funkcí dostupných v ES6+ je destrukce polí a objektů.
JavaScriptové frameworky jako React.js a Angular podporují použití této techniky. Je tedy nezbytné porozumět tomu, o čem destrukturalizace je a jak ji používat při psaní kódu.
Co je destrukce objektů a polí v JavaScriptu?
Destrukcí v JavaScriptu se rozumí proces rozbalení hodnot z pole nebo objektu. Poskytuje stručnější způsob získávání hodnot z polí nebo objektů bez těžkého zvedání, když vás zajímají jednotlivé položky pole nebo hodnoty v objektu.
Je také užitečné při zpracování vracených hodnot z komplexní funkce nebo výrazu. Tento koncept je jedním z doporučené postupy, které byste měli dodržovat při psaní kódu React.
Jak destruovat pole
Zde je ukázkový kód, abyste získali představu o destrukci pole:
konst arr = [1, 2];
konst [a, b] = arr;
řídicí panel.log (a) // vypíše 1 na konzoli
řídicí panel.log (b) // vypíše 2 na konzoli
Tento kód používá destrukturování k přiřazení hodnot arr—1 a 2 — k proměnným A a b, resp. Toto je základní koncept ničení. Na pravé straně máte pole nebo objekt a na levé straně rozbalujete položky a přiřazujete je k jednotlivým proměnným.
Pod kapotou JavaScript kopíruje hodnoty z arr a přiřadí je k proměnným na levé straně takto:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Jak vidíte, destrukce je stručnější způsob, jak toho dosáhnout, na rozdíl od použití zápisu objektu nebo závorky. Tato syntaxe však bude pravděpodobně užitečná při práci se složitými poli nebo funkcemi, které vracejí pole nebo řetězce.
Zkontrolujte ukázkový kód níže:
konst [den, měsíc, datum, rok, čas, časové pásmo] = datum().rozdělit(' ')
// Calling Date() vrátí aktuální datum ve formátu:
// Pon 20. února 2023 13:07:29 GMT+0000
řídicí panel.log (den) // tiskne po
řídicí panel.log (měsíc) // tiskne únor
řídicí panel.log (datum) // vytiskne 20
V této ukázce kódu vytváříme voláním nový řetězec s aktuálním datem Datum(). Dále použijeme rozdělit(), a Metoda řetězce JavaScript, k oddělení položek v řetězci pomocí mezery jako oddělovače. rozdělit (' ') vrací pole a k přiřazení hodnot jednotlivým proměnným používáme destrukturování.
Pamatujte, že pokud vaše pole obsahuje více položek, než rozbalujete, JavaScript bude nadbytečné položky ignorovat.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
řídicí panel.log (a) // vytiskne 1
řídicí panel.log (b) // vytiskne 2
// hodnoty 3 a 4 nejsou přiřazeny žádné proměnné; jsou ignorovány
V tomto případě, pokud chcete uložit zbývající položky do proměnné, použijte parametr rest, jako je tento:
konst arr = [1, 2, 3, 4];
konst [a, b, ...zbytek] = arr;
řídicí panel.log (zbytek) // tiskne [3,4]
Někdy vás může zajímat konkrétní položka. Destrukční vzor JavaScriptu také umožňuje přeskočit určité prvky pomocí prázdné čárky.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
řídicí panel.log (c) // vytiskne 3
Výše uvedený kód používá prázdné místo k ignorování hodnoty 2 v poli arr. Místo přiřazování hodnoty 2 na variabilní C, přeskočí na další položku v poli. Ignoruje také čtvrtou hodnotu, protože neurčuje proměnnou, do které by se měla uložit.
Naproti tomu, pokud potřebujete méně položek, než vybalujete, proces přiřadí nedefinováno hodnotu k těmto proměnným navíc.
konst arr = [1];
konst [a, b] = arr;
řídicí panel.log (a) // vytiskne 1
řídicí panel.log (b) // vypíše nedefinované
Chcete-li zabránit tomu, aby proměnné nebyly definovány, můžete nastavit výchozí hodnoty, pokud si nejste jisti délkou pole, a to následovně (přiřazení výchozích hodnot není podmínkou):
konst arr = [1];
konst [a = '10', b = 'neposkytováno'] = arr;
řídicí panel.log (a) // vytiskne 1
řídicí panel.log (b) // vypíše "není poskytnuto"
Toto zničení přiřadí hodnotu 1 na variabilní A, přepíše jeho výchozí hodnotu. Variabilní b zachová výchozí hodnotu, protože není zadána hodnota.
Jak destruovat objekty
Destrukce objektů se příliš neliší od polí. Jediný rozdíl je v tom, že pole jsou iterovatelná a objekty nikoli, což vede k trochu jinému způsobu provádění věcí.
Při práci s objekty jsou proměnné na levé straně operátoru přiřazení také inicializovány jako objekty:
konst osoba = {název: 'alvin', stáří: 10, výška: 1};
konst {jméno, věk, výška} = osoba;
řídicí panel.log (jméno) // vytiskne 'Alvin'
řídicí panel.log (výška) // vytiskne 1
Z kódu používáme názvy vlastností z osoba objekt. V objektu však nemusíte používat přesné názvy vlastností. Hodnoty můžete destruovat a uložit do různých názvů proměnných následovně:
konst osoba = {název: 'alvin', stáří: 10, výška: 1};
konst {název: jméno, stáří: roky, výška: aktuálníVýška} = osoba;
řídicí panel.log (křestní jméno) // vytiskne 'Alvin'
řídicí panel.log (currentHeight) // vytiskne 1
Začnete zadáním hodnoty vlastnosti, kterou chcete destruovat, a poté zadejte název proměnné, kterou použijete k uložení hodnoty za dvojtečkou. A stejně jako pole bude zničení názvu vlastnosti, který neexistuje nedefinováno.
Chcete-li to zvládnout, můžete podobně zadat výchozí hodnoty v případě, že název vlastnosti, kterou chcete přiřadit proměnné, není k dispozici:
konst osoba = {název: 'alvin', stáří: 10, výška: 1};
konst {jméno, věk, výška, umístění='Celosvětově'} = osoba;
řídicí panel.log (jméno) // vytiskne 'Alvin'
řídicí panel.log (umístění) // vytiskne 'Worldwide'
Na pořadí proměnných na levé straně u objektu nezáleží, protože objekty ukládají hodnoty v párech klíč-hodnota. Následující kód jako takový přinese stejné výsledky:
konst osoba = {název: 'alvin', stáří: 10, výška: 1};
konst {věk, výška, jméno} = osoba;
řídicí panel.log (jméno) // vytiskne 'Alvin'
řídicí panel.log (výška) // vytiskne 1
A konečně, podobně jako u polí, můžete také použít parametr rest k destrukci několika hodnot v jedné proměnné, jako je:
konst osoba = {název: 'alvin', stáří: 10, výška: 1};
konst {jméno, ...zbytek} = osoba;
řídicí panel.log (jméno) // vytiskne 'Alvin'
řídicí panel.log (zbytek) // tiskne { věk: 10, výška: 1 }
Pamatujte, že parametr rest musí být vždy poslední. Jinak JavaScript vyvolá výjimku.
Zlepšete kvalitu svého kódu pomocí destrukce JavaScriptu
Moderní funkce Javascriptu, jako je destrukce, vám umožňují psát vysoce čitelný kód. Pomocí ničení můžete rychle rozbalit hodnoty z polí a objektů. Destrukce se může ukázat jako užitečná i v jiných situacích, jako je záměna hodnot dvou proměnných. Doufejme, že nyní chápete, co znamená destrukce v JavaScriptu, a můžete ji používat při psaní kódu.
