JavaScript Object Destructuring

Shrnutí: v tomto tutoriálu, se dozvíte o JavaScript object destructuring, která přiřazuje vlastnosti objektu na jednotlivé proměnné.

pokud se chcete dozvědět, jak zničit pole, můžete se podívat na tutoriál destrukce pole.

Úvod do přiřazení destrukce objektů JavaScriptu

Předpokládejme, že máte objekt person se dvěma vlastnostmi: firstName a lastName.

Code language: JavaScript (javascript)

Před ES6, pokud chcete přiřadit vlastnosti person objekt k proměnné, obvykle to dělat takhle:

Code language: JavaScript (javascript)

ES6 zavádí objekt destructuring syntaxi, která poskytuje alternativní způsob, jak přiřadit vlastnosti objektu do proměnné:

Code language: JavaScript (javascript)

V tomto příkladu, firstName a lastName vlastnosti jsou přiřazeny k fName a lName proměnných, resp.

V této syntaxi:

Code language: JavaScript (javascript)

identifikátor před dvojtečkou (:) je vlastnost objektu a identifikátor za dvojtečkou je variabilní.

Všimněte si, že název vlastnosti je vždy na levé straně, zda je objekt literál nebo objekt destructuring syntaxe.

Pokud proměnné mají stejné názvy jako vlastnosti objektu, můžete vytvořit kód výstižnější takto:

Code language: JavaScript (javascript)

V tomto příkladu jsme deklarovali dvě proměnné firstName a lastName a přiřazeny vlastnosti osoby, objekt k proměnné ve stejném prohlášení.

je možné oddělit deklaraci a přiřazení. Musíte však obklopit proměnné v závorkách:

pokud nepoužíváte závorky, modul JavaScript interpretuje levou stranu jako blok a vyvolá chybu syntaxe.

při přiřazení vlastnosti, která neexistuje proměnné pomocí destrukce objektu, je proměnná nastavena na undefined. Například:

Code language: JavaScript (javascript)

v tomto příkladu vlastnost middleName v objektu person neexistuje, proto proměnná middleName je undefined.

nastavení výchozích hodnot

proměnné můžete přiřadit výchozí hodnotu, pokud vlastnost objektu neexistuje. Příklad:

Code language: JavaScript (javascript)

v tomto příkladu jsme přiřadili prázdný řetězec proměnné middleName, pokud objekt osoba nemá vlastnost middleName.

také přiřadíme vlastnost currentAge proměnné age s výchozí hodnotou 18.

Nicméně, když osoba, objekt má middleName majetku, postoupení funguje jako obvykle:

Code language: JavaScript (javascript)

Destructuring objekt null

funkce může vracet objekt nebo null v některých situacích. Například:

Code language: JavaScript (javascript)

a použijete přiřazení destrukce objektu:

Code language: JavaScript (javascript)

kód bude hodit TypeError:

Code language: JavaScript (javascript)

Aby se tomu zabránilo, můžete použít OR operátor (||) fallback null objekt do prázdného objektu:

Code language: JavaScript (javascript)

Teď, žádná chyba dojde. A firstName a lastName bude undefined.

Vnořený objekt destructuring

za Předpokladu, že máte employee objekt, který má name objekt jako vlastnost:

Code language: JavaScript (javascript)

následující prohlášení destructures vlastnosti vnořené name objektu do jednotlivých proměnných:

Code language: JavaScript (javascript)

je možné dělat vícenásobné přiřazení majetku na více proměnných:

Code language: JavaScript (javascript)

Destructuring argumenty funkce

Předpokládejme, že máte funkci, která zobrazuje osobu, objekt:

Code language: JavaScript (javascript)

je možné destructure objektu argument předaný do funkce, jako je tento:

Code language: JavaScript (javascript)

To vypadá méně upovídaný a to zejména při použití mnoha vlastnosti argumenty objekt. Tato technika se často používá v React.

souhrn

• objekt destrukce přiřazuje vlastnosti objektu proměnným se stejnými názvy ve výchozím nastavení.