How to Use Object destructing in JavaScript

the object destruction is a useful JavaScript feature to extract properties from objects and bind them to variables.

What’s better, object destructing can extract multiple properties in one statement, can access properties from nested objects, and can set a default value if the property doesn’t exist. Neste post, vou explicar como usar a destruição de objetos em JavaScript.

1. A necessidade de destruição de objetos

Imagine que você gostaria de extrair algumas propriedades de um objeto. Em um ambiente pré-ES2015, você precisa escrever o seguinte código:

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

a propriedade hero.name o valor é atribuído à variável name. Da mesma forma, o valor hero.realName é atribuído a realName.

tal maneira de acessar propriedades e atribuí-las a variáveis requer código de boilerplate. Ao escrever var name = hero.name, você tem que mencionar a ligação name 2 vezes, e o mesmo para realName.

é aí que a sintaxe de destruição do objeto é útil: você pode ler uma propriedade e atribuir o seu valor a uma variável sem duplicar o nome da propriedade. Mais do que isso, você pode ler várias propriedades do mesmo objeto em apenas uma declaração!

Vamos refatorar o script acima e aplicar o objeto de desestruturação para acessar as propriedades name e realName:

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

const { name, realName } = hero é um objeto desestruturação de atribuição. Esta afirmação define as variáveis name e realName, então atribui-lhes os valores de propriedades hero.name e hero.realName correspondentemente.

comparando as 2 abordagens para aceder às propriedades do objecto:

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

é visível que a destruição do objeto é mais hábil porque nem os nomes da propriedade nem a variável objeto são duplicados.

2. A extração de uma propriedade

A sintaxe básica do objeto de desestruturação é muito simples:

const { identifier } = expression;

Onde identifier é o nome da propriedade para o acesso e expression deve avaliar um objeto. Após a destruição, a variável identifier contém o valor da propriedade.

Aqui está o código equivalente usando um assessor de propriedade:

const identifier = expression.identifier;

Vamos tentar o objeto desestruturação na prática:

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

A instrução const { name } = hero define a variável name e o inicializa com o valor de hero.name propriedade.

3. A extração de várias propriedades de

Para destructure o objeto em várias propriedades, enumerar propriedades como muitos como você gostaria de adicionar vírgulas , entre:

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

Onde identifier1, …, identifierN são os nomes das propriedades de acesso, e expression deve avaliar um objeto. Após a destruição, as variáveis identifier1,…, identifierN contêm valores de propriedades correspondentes.

Aqui está o código equivalente:

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

Vamos dar uma olhada novamente no exemplo da primeira seção, onde 2 propriedades são extraídas:

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

const { name, realName } = hero cria 2 variáveis name e realName atribuída com valores de propriedades correspondente hero.name e hero.realName.

4. Valores padrão

se o objeto destrutivo não tem a propriedade especificada na atribuição de destruição, então a variável é atribuída com undefined. Vamos ver como acontece.:

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

depois de destruir a variável enemies é undefined porque a propriedade enemies não existe no objeto hero.

felizmente, você pode definir um valor padrão se a propriedade não existir no objeto destruído. Aqui está a sintaxe básica:

const { identifier = defaultValue } = expression;

onde identifier é o nome da propriedade de acesso e expression deve avaliar a um objeto. Após a destruição, a variável identifier contém o valor da propriedade ou é atribuída com defaultValue se a propriedade identifier não existir.

Aqui está o código equivalente:

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

Vamos alterar o código de exemplo anterior, e usar o valor padrão de recurso:

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

Agora, em vez de ser undefined, a variável enemies padrão .

5. Nomes alternativos

se quiser criar variáveis de nomes diferentes das propriedades, então poderá usar a característica de aliasing da destruição de objectos.

const { identifier: aliasIdentifier } = expression;

identifier é o nome da propriedade de acesso, aliasIdentifier é o nome da variável, e expression deve avaliar a um objeto. Após a destruição, a variável aliasIdentifier contém o valor da propriedade.

O código equivalente:

const aliasIdentifier = expression.identifier;

Aqui está um exemplo de objeto de desestruturação recurso de alias:

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

Olhando para const { realName: secretName } = hero, o destucturing define uma nova variável secretName (alias variável), e atribui a ela o valor de hero.realName.

6. Extraindo propriedades de objetos aninhados

nos exemplos anteriores, os objetos eram simples: as propriedades têm tipos de dados primitivos (por exemplo, strings).

muitas vezes objetos podem ser aninhados em outros objetos. Em outras palavras, algumas propriedades podem conter objetos. Nesse caso, você ainda pode usar as propriedades de destruição e acesso do objeto de profundidade. Aqui está a sintaxe básica:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp é o nome da propriedade que possui um objeto aninhado. identifier é o nome da propriedade para acessar a partir do objeto aninhado. expression deve avaliar para o objeto destruído.

após a destruição, a variável identifier contém o valor da propriedade do objecto aninhado.

a sintaxe acima é equivalente a:

const identifier = expression.nestedObjectProp.identifier;

o nível de nidificação de que você pode extrair propriedades é ilimitado. Se quiser extrair propriedades das profundezas, basta adicionar mais Chavetas aninhadas:

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

por exemplo, o objeto hero contém um objeto aninhado { city: 'Gotham'}.

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

a destruição do objecto const { address: { city } } = hero vamos aceder à propriedade city do objecto aninhado.

7. Extrair uma propriedade de nome dinâmico

pode extrair para variáveis propriedades com um nome dinâmico (o nome da propriedade é conhecido no tempo de execução):

const { : identifier } = expression;

propName a expressão deve avaliar para um nome de propriedade (geralmente uma cadeia), e o identifier deve indicar o nome variável criado após a destruição. O segundo expression deve avaliar para o objeto que você gostaria de destruir.

Um código equivalente sem objeto desestruturação:

const identifier = expression;

vejamos um exemplo onde prop contém o nome da propriedade:

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

const { : name } = hero é um objeto desestruturação que atribui à variável name valor hero, onde prop é uma variável que armazena o nome da propriedade.

8. Resto objeto após a desestruturação

O resto sintaxe é útil para coletar as propriedades restantes após a desestruturação:

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

Onde identifier é o nome da propriedade para o acesso e expression deve avaliar um objeto.

após a destruição, a variável identifier contém o valor da propriedade. rest variável é um objeto simples com as propriedades restantes.

Por exemplo, vamos extrair a propriedade name, mas mantenha o resto das propriedades:

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

A desestruturação const { name, ...realHero } = hero extrai a propriedade name.

Ao mesmo tempo, as propriedades restantes (realName neste caso) são coletados na variável realHero: { realName: 'Bruce Wayne' }.

9. Casos de uso comum

9.1 ligam propriedades a variáveis

como visto em muitos exemplos antes, a destruição de objetos liga valores de propriedade a variáveis.

a destruição do objeto pode atribuir valores a variáveis declaradas usando const, let e var. Ou mesmo atribuir a uma variável já existente.

por exemplo, aqui está como destruir usando let declaração:

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

Como destructure usando var instrução:

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

E como destructure para uma variável já declarada:

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

acho que é satisfatório para combinar for..of ciclo com o objeto de desestruturação para extrair o direito de propriedade de distância:

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

9.2 Parâmetro de função desestruturação

Geralmente, o objeto de desestruturação pode ser colocado em qualquer lugar onde uma atribuição acontece. Por exemplo, você pode destruir um objeto dentro da lista de Parâmetros de uma função:

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

function({ name }) destrói o parâmetro da função, criando uma variável name com o valor name propriedade.

10. Resumo

a destruição do objecto é uma característica poderosa que lhe permite extrair propriedades de um objecto e ligar estes valores a variáveis.

I especially like about object destructing is the concise syntax and ability to extract multiple variables in one statement. Esperemos que o meu post o tenha ajudado a ver como a destruição de objectos é útil!