O que é desconstrução?
A desconstrução é completamente oposta à construção de dados. Por exemplo, em vez de construir um novo objeto ou matriz, ele divide o objeto ou matriz existente um por um para extrair os dados necessários.
O ES6 usa um novo padrão para corresponder aos valores numéricos que você deseja extrair, e a tarefa de desconstrução adota esse padrão. Esse padrão mapeará a estrutura de dados que você está desconstruindo e apenas os dados que correspondem ao padrão serão extraídos.
O item de dados desconstruído está localizado no operador de atribuição À direita de =, pode ser qualquer combinação de matrizes e objetos, permitindo um ninho arbitrário. Não há limite para o número de variáveis usadas para atribuir valores a esses dados.
Destruição da matriz
A desconstrução da matriz usa uma matriz como um item de dados e você pode extrair os valores dessa matriz para atribuir valores a uma ou mais variáveis de acordo com o padrão de matriz (usado para corresponder aos valores que você precisa da matriz).
O padrão de matriz é usado para identificar quais valores são o que você deseja extrair com base na posição dos valores. Ele deve ser capaz de mapear com precisão a estrutura da matriz para que cada variável no padrão de matriz seja atribuída um valor correspondente à posição na matriz desconstruída.
Deixe -me dar -lhe alguns exemplos para nos ajudar a entender:
Exemplo de padrão de matriz
Atribua todos os valores na matriz a variáveis individuais
// Defina a matriz const Vengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // desconstruir a matriz a uma variável. O padrão de matriz está localizado à esquerda do operador de atribuição `=`, e a matriz estruturada está à direita de //. const [Ironman, Cap, Blackwidow] = Vingadores; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Saída Ironman: Ironman;
Extraia todos os valores, exceto o primeiro
const Vingers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Não precisamos usar Tony Const [, Cap, Blackwidow] = Vingadores; // Ironman = Erro: indefinido // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Cap: Cap: Cap;
Extraia todos os valores, exceto o segundo
const Vingers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Cap faltando const [Ironman ,, Blackwidow] = Vingadores; // Ironman = 'Tony Stark' // Cap = Erro: indefinido // Blackwidow = 'Natasha Romanoff' // Saída Blackwidow: Blackwidow;
Extraia todos os valores, exceto o último
const Vingers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Ironman vs Cap const [Ironman, Cap] = Vingadores; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = Erro: Undefinido // Saída Blackwidow: Ironman;
Matrizes aninhadas
Esse padrão de correspondência também suporta matrizes aninhadas, desde que o operador de atribuição = o padrão de matriz à esquerda corresponda à estrutura da matriz à direita. Deixe -me explicar novamente que as variáveis à esquerda receberão o valor correspondente à posição na matriz à direita. Não importa o quão profundamente você os anule, você ainda pode desconstruí -los.
Desconstruindo matrizes aninhadas
// Destructando matrizes aninhadas const Avengers = ['Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Vingadores e seus parceiros const [Blackwidow, [Ironman, Warmachine], [Cap, Falcon]] = Vingadores; // Blackwidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Warmachine = 'James Rhodes' // Cap = 'Steve Rogers' // Falcon = 'Sam Wilson' // Output Warmachine: Warmachine;
Extrair um valor de uma matriz profundamente aninhada
// extrair pimenta potts const Vingadores desta matriz = ['Natasha Romanoff', [['Tony Stark', 'Pepper Potts'], 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']]; // Destructure const [, // Saltar 'Natasha Romanoff' [[, // Saltar 'Tony Stark' ela // Pepper Potts atribui à variável 'hera']]] = Vingadores; // Observe: você também pode escrever dessa maneira // const [, [[, hera]]] = Vingadores; // Saída Hera: Hera; // hera = 'pimenta Potts'
Use o operador de restos para capturar todos os itens restantes
Se você deseja obter um item de matriz específico e colocar os itens restantes em uma matriz, use o operador REST para desconstruí -lo assim :
// desconstruir os Vingadores Const através do Operador REST = ['Natasha Romanoff', 'Tony Stark', 'Steve Rogers']; const [Blackwidow, ... TheOshers] = Vingadores; os outros; // Blackwidow = 'Natasha Romanoff' // theothers = ['Tony Stark', 'Steve Rogers'] // produz os outros: os outros;
Destruição de objetos
A desconstrução do objeto é ainda mais mágica, especialmente quando você precisa obter valores de um objeto complexo e profundamente aninhado, o que é mais óbvio. Para reiterar, a desconstrução do objeto e a desconstrução da matriz use as mesmas regras (ou seja, crie um padrão de objeto no lado esquerdo do operador de atribuição, para que sua posição variável corresponda à posição do valor do objeto no lado direito).
Na destruição de objetos, você precisa especificar os nomes de atributos que precisam ser extraídos e os nomes de variáveis que serão atribuídos. Como a desconstrução da matriz, precisamos criar um padrão de objeto para mapear o objeto desconstruído no lado esquerdo do operador de atribuição.
Embora neste caso, o que queremos extrair seja o valor da propriedade do objeto (como: extraímos value de { prop: value }). Consequentemente, nosso padrão de objeto deve ter uma variável, e a posição dessa variável deve ser consistente com a posição do valor da propriedade que estamos prestes a extrair.
Exemplo simples
Extrair um valor simples de atributo de objeto
Podemos fazer isso para atribuir o valor da propriedade ironMan do objeto { ironMan: 'Tony Stark' } 'Tony Stark' variável a :
// desconstruir o valor da propriedade do objeto e atribui -lo a uma única variável `a`: const {Ironman: A} = {Ironman: 'Tony Stark'}; // saída a: a; // a = 'Tony Stark'Extrair valores de atributo múltiplos
Enquanto expandirmos o mesmo padrão, podemos extrair vários valores de atributo de um objeto, como segue:
// configure nosso objeto const Vingers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure objeto para variáveis individuais const {Ironman: A, Cap: B, Blackwidow: C} = Vingadores; // a = 'tony stark' // b = 'steve rogers' // c = 'natasha romanoff' // saída a: a;Observe como esse padrão de desconstrução corresponde exatamente ao objeto desconstruído.
Destruição de objetos aninhados
Como desconstruir matrizes aninhadas, podemos desconstruir objetos aninhados, por mais profundamente que sejam.
// Configurar nosso objeto const Vingers = {Blackwidow: 'Natasha Romanoff', IronmanCincharacters: {Casal: {Ironman: 'Tony Stark', hera: 'Pepper Potts',}, parceiro: {warmachine: 'James'}}, Capcharacters: {'steve Rog' '; // Destructure objeto para variáveis individuais const {Blackwidow: a, IronmanCharacters: {casal: {Ironman: b, hera: c}, parceiro: {warmachine: d}}, capcharacters: {cap: e, parceiro: {Falcon: f}}} = avengers; // a = 'natasha romanoff' // b = 'tony stark' // c = 'pimenta potts' // d = 'james brodie' // e = 'steve rogers' // f = 'sam wilson' // saída a: a;Nomeie a variável atribuída
Obviamente, é ruim definir nomes de variáveis como nomes A, B, C e Variáveis devem fazer sentido.
Nomeação duradoura
// configure nosso objeto const Vingers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure objeto para variáveis individuais com nomes significativos const {Ironman: Ironman, Cap: Cap, Blackwidow: Blackwidow} = Vingadores; // Blackwidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Saída Blackwidow: Blackwidow; Essa abordagem é melhor que o nome acima A, B e C , mas ainda pode ser melhorado. { ironMan: ironMan } parece um pouco feio e não intuitivo.
Atalhos sintaticamente nomeados
Se você deseja atribuir o valor do atributo de um objeto a uma variável, e o nome da variável é o mesmo que o nome do atributo do objeto, então no modo de atribuição no lado esquerdo de = , você só precisa simplesmente escrever o nome do atributo, como segue:
// configure nosso objeto const avenger = {Ironman: 'Tony Stark'}; // Destructure objeto para variáveis individuais com nomes significativos const {Ironman // equivalente a 'Ironman: Ironman'} = vingador; // Ironman = 'Tony Stark' // Saída Ironman: Ironman;Como o nome do atributo de objeto desconstruído é o mesmo que o nome da variável atribuído, precisamos apenas listar o nome uma vez.
Gramática concisa
Vamos retuitar um pouco o código anterior para torná -los mais concisos e claros:
// configure nosso objeto const Vingers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Destructure objeto para variáveis individuais com nomes significativos const {Ironman, Cap, Blackwidow} = Vingadores; // Saída Ironman: Ironman;Extrair uma propriedade profundamente aninhada de um objeto
As coisas são ainda mais interessantes quando queremos extrair uma propriedade de objeto profundamente aninhada:
// Configure nossos objetos de objeto Avengers = {Blackwidow: 'Natasha Romanoff', IronmanCharacters: {Casal: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}, Parceiro: {steve rager: 'James'}}, Capcharacters: {'STEVE ROG. }}; // Destructugue um objectConst profundamente aninhado {IronmanCharacters: {casal}} = Vingadores; // casal = {// Ironman: 'Tony Stark', // hera: 'Pepper Potts', //} // Output: casal;Espere, como você leu este código? Como o casal variável é definido?
Ao dividir dessa maneira, podemos ver que o operador de atribuição = à esquerda é um mapa do objeto desconstruído:
const Vingers = {IronmanCharacters: {Casal: {Ironman: 'Tony Stark', Hera: 'Pepper Potts',}}}; const {IronmanCharacters: {casal}}} = Avengers; // Saída Casal: casal; Apenas usando const { couple } = avengers; Não há como extrair o valor do casal . Somente mapeando o local e o nome do atributo de objeto a ser extraído, o compilador JS pode obter as informações correspondentes, pesquisar em todos os atributos do objeto e extrair com precisão o valor que queremos.
Também deve ser observado aqui que o casal usa atalhos de sintaxe para nomear variáveis, o que é realmente assim:
const {IronmanCharacters: {casal: casal}} = Vingadores;É assim que o casal é definido e seu valor é o valor cujo nome de atributo casal nos vingadores do objeto.
Desconstruir os atributos do objeto
Até agora, desconstruímos o valor do objeto para atribuir valores a uma única variável e, de fato, também podemos atribuir valores às propriedades de outro objeto.
const Vingers = {BlackWidow: 'Natasha Romanoff', IronmanCharacters: {Casal: {Ironman: 'Tony Stark', hera: 'pimenta Potts'}}}; const IronmanPropers = {Family: {}}; IronmanProperties.family// IronmanProperties.family = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts' //} // Output IronmanProperties.family:ononMoProperties.Family; Aqui, atribuímos o valor de ironManCharacters.couple à propriedade do ironManProperties.family . Aqui estão dois pontos a serem explicados:
1. A tarefa de desconstrução deve ser incluída entre parênteses
Quando desconstruímos uma variável existente (como o IronmanProperties no exemplo acima), devemos fazer isso em vez de declarar uma nova variável.
2. O padrão ainda corresponde
{ ironManCharacters: { couple... } } corresponde a IronmanCharacters em Vingadores de Objeto. Dessa forma, você pode extrair o valor de ironManCharacters.couple do objeto dos Vingadores como desejar. Mas agora, um novo objeto IronmanProperties e sua família de propriedades são colocados atrás do casal . De fato, a propriedade ironManProperties.family deste objeto é realmente atribuída.
Você ainda está confuso quando tenta explicar essa situação claramente? Experimente o código acima no JSFiddle e tudo ficará claro.
Se você não tiver certeza de por que está fazendo isso, consulte o exemplo no próximo artigo. Esses exemplos dirão por que esse padrão é usado para desconstruir o objeto JSON chamado pela API, permitindo que você aprecie a magia da desconstrução!
valor padrão
Ao desconstruir, você também pode especificar um valor padrão para a variável:
// configure nosso objeto const Vingers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // destruição usando padrões const {Ironman, Cap, Blackwidow, theHulk = 'Bruce Banner'} = Vingadores; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // theHulk = 'Bruce Banner' // Saída Blackwidow: Blackwidow;Evite esses problemas durante a desconstrução
Const, deixe, o VAR não é usado ao desconstruir a tarefa
Este ponto foi mencionado ao falar sobre desconstruir e atribuir propriedades do objeto, mas ainda é necessário reiterá -lo aqui para dar a todos uma impressão profunda.
Não pode desconstruir variáveis declaradas
Ou seja, você só pode declarar variáveis enquanto desconstruindo as variáveis.
// configure nosso objeto const Vingers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', Thehulk: 'Bruce Banner'}; // Destructing const {Ironman} = Vingadores; Seja {cap} = Vingadores; var {Blackwidow} = Vingadores; // destruição inválida Let thehulk; {theHulk} = Vingadores; // error // saída thehulk: thehulk;Por que uma variável declarada não pode ser desconstruída? Isso porque se você usar aparelhos encaracolados { então JavaScript pensará que você está declarando um bloco .
A solução é incluir toda a tarefa desconstruída em um par de colchetes .
Como desconstruir e atribuir uma variável declarada
// configure nosso objeto const Vingers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', Thehulk: 'Bruce Banner'}; // Um hulk válido deixou o Hulk; ({theHulk} = Vingadores); // theHulk = 'Bruce Banner' // Saída theHulk: theHulk;Agora, não começamos com aparelhos encaracolados, então o JS não pensa que estamos declarando um bloco para que possamos alcançar o resultado esperado de desconstrução.
Retorna um valor desconstruído diretamente
Quando uma variável a ser retornada em seguida não é declarada primeiro, um valor desconstruído é retornado diretamente, o que não atingirá o efeito esperado. Por exemplo, no código a seguir, o objeto Ironman inteiro retornado não será o valor esperado de Tony Stark .
// Nota: isso não funciona! function gettonystark (Vingadores) {return {Ironman: {realname}} = Vingadores; // retorna o objeto dos Vingadores, não o valor real do nome} const Vingers = {Ironman: {realname: 'Tony Stark'}}; const Tonystark = gettonystark (Vingadores); // tonystark = {// Ironman: {// realname: 'tony stark' //} //}; // Saída Tonystark: Tonystark;Para extrair um valor de um objeto desconstruído, você deve primeiro atribuí -lo a uma variável e depois retornar essa variável, conforme mostrado no código a seguir:
// Nota: isso funciona! função gettonystark (Vingadores) {const {Ironman: {realname}} = Vingadores; devolver realname; } const Vingers = {Ironman: {realname: 'Tony Stark'}}; const Tonystark = gettonystark (Vingadores); // Tonystark = 'Tony Stark' // Saída Tonystark: Tonystark;Essa maneira de dividir a atribuição e retornar em duas linhas de código é realmente irritante, e o código é feio e desnecessário. Infelizmente, o JavaScript funciona como este - você deve atribuir o valor desconstruído a uma variável primeiro e depois retorná -lo, e as duas etapas devem ser feitas separadamente.
No entanto, não dissemos que apenas o fizemos separadamente e não dissemos que devemos colocá -lo em duas linhas de código. Portanto, escrever em uma linha como se a seguinte também pode alcançar os resultados esperados:
function gettonystark (Vingadores) {return ({Ironman: {realname}} = Vingadores) && realname; } const Vingers = {Ironman: {realname: 'Tony Stark'}}; const Tonystark = gettonystark (Vingadores); // Tonystark = 'Tony Stark' // Saída Tonystark: Tonystark; Como o operador _short-circuit_ circuito do JavaScript (&& e ||) retorna o valor do segundo operando com base no valor do primeiro operando, este método de escrita pode alcançar o efeito esperado. Aqui, o primeiro operando é desconstruir a expressão de atribuição e atribuir o valor ao nome real . Realname é o segundo operando, então seu valor é finalmente retornado.
Isso não é ideal, mas pode ser alcançado. Ao perseguir a falta do código, você deve prestar atenção à legibilidade do código.
Resumir
Este artigo explica detalhadamente os principais princípios de desconstrução de tarefas. A desconstrução não apenas reduz o valor do seu código, mas também muda fundamentalmente a codificá -lo. Quanto mais você o usa, mais maneiras de moldar dados e funções, que eram quase impossíveis no passado. Espero que este artigo seja útil para que todos aprendam ES6.