jak používat destrukci objektů v JavaScriptu

destrukce objektů je užitečná funkce JavaScriptu pro extrahování vlastností z objektů a jejich vázání na proměnné.

co je lepší, destrukce objektů může extrahovat více vlastností v jednom příkazu, může přistupovat k vlastnostem z vnořených objektů a může nastavit výchozí hodnotu, pokud vlastnost neexistuje.

v tomto příspěvku vysvětlím, jak používat destrukci objektů v JavaScriptu.

1. Potřeba destrukce objektu

Představte si, že byste chtěli extrahovat některé vlastnosti objektu. V pre-ES2015 prostředí, je třeba napsat následující kód:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

nemovitost hero.name hodnota je přiřazena proměnné name. Stejným způsobem je hodnota hero.realName přiřazena realName.

takový způsob přístupu k vlastnostem a jejich přiřazení proměnným vyžaduje kód boilerplate. Při psaní var name = hero.name je třeba zmínit vazbu name 2krát a totéž pro realName.

zde je užitečná syntaxe destrukce objektu: můžete číst vlastnost a přiřadit její hodnotu proměnné bez duplikování názvu vlastnosti. Více než to, můžete číst více vlastností ze stejného objektu v jediném příkazu!

Pojďme refaktorovat výše uvedených skript a použít objekt destructuring pro přístup k vlastnosti name a realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero je objekt destructuring úkol. Tento příkaz definuje proměnné name A realName a poté jim přiřadí hodnoty vlastností hero.name a hero.realName.

Porovnání 2 přístupů pro přístup k vlastnostem objektu:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

je vidět, že destrukce objektu je šikovnější, protože názvy vlastností ani proměnná objektu nejsou duplikovány.

2. Extrakce vlastnost

základní syntaxe objektu destructuring je docela jednoduché:

const { identifier } = expression;

Kde identifier je název vlastnosti pro přístup a expression měli hodnotit na objekt. Po destrukci obsahuje proměnná identifier hodnotu vlastnosti.

Tady je ekvivalentní kód pomocí accessor vlastnost:

const identifier = expression.identifier;

zkusme objektu destructuring v praxi:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

prohlášení const { name } = hero definuje proměnnou name a inicializuje ji s hodnotou hero.name majetku.

3. Extrahování více vlastností

destructure objekt do více vlastností, vyjmenovat tolik vlastností, jak se vám líbí přidáním čárky , v-mezi:

const { identifier1, identifier2, ..., identifierN } = expression;

Kde identifier1, …, identifierN jsou názvy vlastností pro přístup, a expression měli hodnotit na objekt. Po destrukci obsahují proměnné identifier1,…, identifierN odpovídající hodnoty vlastností.

Tady je ekvivalentní kód:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

podívejme se opět na příklad z první části, kde 2 vlastnosti jsou extrahovány:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero vytváří 2 proměnné name a realName přiřadit hodnoty odpovídající vlastnosti hero.name a hero.realName.

4. Výchozí hodnoty

pokud destrukční objekt nemá vlastnost zadanou v přiřazení destrukce, pak je proměnná přiřazena undefined. Pojďme se podívat, jak se to stane:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

Po destructuring proměnné enemies undefined protože vlastnost enemies neexistuje v objektu hero.

naštěstí můžete nastavit výchozí hodnotu, pokud vlastnost v zničeném objektu neexistuje. Zde je základní syntaxe:

const { identifier = defaultValue } = expression;

Kde identifier je název vlastnosti pro přístup a expression měli hodnotit na objekt. Po destrukci obsahuje proměnná identifier hodnotu vlastnosti nebo je přiřazena defaultValue, pokud vlastnost identifier neexistuje.

Tady je ekvivalentní kód:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

Pojďme změnit předchozí ukázka kódu a použití výchozí hodnoty funkce:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

Nyní, místo toho, aby undefined proměnná enemies výchozí .

5. Aliasy

Chcete-li vytvořit proměnné s různými názvy než vlastnosti, můžete použít funkci aliasing destructuring objektů.

const { identifier: aliasIdentifier } = expression;

identifier je název vlastnosti pro přístup, aliasIdentifier je název proměnné, a expression měli hodnotit na objekt. Po destrukci obsahuje proměnná aliasIdentifier hodnotu vlastnosti.

ekvivalentní kód:

const aliasIdentifier = expression.identifier;

Zde je příklad objektu destructuring alias funkce:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

při Pohledu na const { realName: secretName } = hero, destucturing definuje novou proměnnou secretName (alias proměnné), a přiřadí jí hodnotu hero.realName.

6. Extrakce vlastností z vnořených objektů

V předchozích příkladech byly objekty prostý: vlastnosti mají primitivní datové typy (např. struny).

objekty mohou být často vnořeny do jiných objektů. Jinými slovy, některé vlastnosti mohou obsahovat objekty.

v takovém případě můžete stále používat vlastnosti destrukce objektu a přístupu z hloubky. Zde je základní syntaxe:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp je název vlastnost, která má vnořený objekt. identifier je název vlastnosti pro přístup z vnořeného objektu. expression by měl vyhodnotit zničený objekt.

po destrukci obsahuje proměnná identifier hodnotu vlastností vnořeného objektu.

výše uvedená syntaxe odpovídá:

const identifier = expression.nestedObjectProp.identifier;

úroveň hnízdění, ze které můžete extrahovat vlastnosti, je neomezená. Pokud chcete extrahovat vlastnosti z deep, stačí přidat další vnořené kudrnaté závorky:

const { propA: { propB: { propC: { .... } } } } = object;

například objekt hero obsahuje vnořený objekt { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

objekt destrukce const { address: { city } } = hero umožňuje přístup k vlastnosti city z vnořeného objektu.

7. Extrahování vlastnosti dynamického názvu

můžete extrahovat vlastnosti proměnných s dynamickým názvem (název vlastnosti je znám za běhu):

const { : identifier } = expression;

propName výraz by měl hodnotit na název vlastnosti (obvykle řetězec), a identifier by měly uvést název proměnné vytvořené po destructuring. Druhý expression by měl vyhodnotit objekt, který chcete zničit.

ekvivalentní kód bez objektu destructuring:

const identifier = expression;

Pojďme se podívat na příklad, kde prop obsahuje název vlastnosti:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero je objekt destructuring, že přiřadí do proměnné name hodnota hero, kde prop je variabilní držení majetku jméno.

8. Zbytek objektu po destructuring

zbytek syntaxe je užitečné shromáždit zbývající vlastnosti po destructuring:

const { identifier, ...rest } = expression;

Kde identifier je název vlastnosti pro přístup a expression měli hodnotit na objekt.

po destrukci obsahuje proměnná identifier hodnotu vlastnosti. rest proměnná je prostý objekt se zbývajícími vlastnostmi.

řekněme například, extrakt majetku name, ale zbytek vlastností:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

Na destructuring const { name, ...realHero } = hero extrakty majetku name.

současně se zbývající vlastnosti (v tomto případěrealName) shromáždí do proměnné realHero: { realName: 'Bruce Wayne' }.

9. Běžné případy použití

9.1 Vázat vlastnosti proměnné

Jak je vidět v mnoha příklady předtím, objekt destructuring váže majetkové hodnoty do proměnné.

destrukce objektu může přiřadit hodnoty proměnným deklarovaným pomocí const, let a var. Nebo dokonce přiřadit k již existující proměnné.

například zde je návod, jak zničit pomocí příkazu let :

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

Jak destructure pomocí var prohlášení:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

A jak destructure do již deklarované proměnné:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

zjistil jsem, že je uspokojující kombinovat for..of cyklus s objektem destructuring extrahovat majetku hned:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Parametr funkce destructuring

Obecně platí, že objekt destructuring mohou být umístěny kdekoli, kde se úkol stane.

můžete například zničit objekt přímo v seznamu parametrů funkce:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) zničí parametr funkce a vytvoří proměnnou name, která drží hodnotu vlastnosti name.

10. Shrnutí

destrukce objektu je výkonná funkce, která umožňuje extrahovat vlastnosti z objektu a vázat tyto hodnoty na proměnné.

obzvláště se mi líbí objekt destrukce je stručná syntaxe a schopnost extrahovat více proměnných v jednom příkazu.

doufejme, že můj příspěvek vám pomohl zjistit, jak užitečný je destrukce objektů!