Como destruir objetos e matrizes em JavaScript | Explicado com exemplos

A versão ES6 veio com uma onda de novos recursos, um desses recursos foi a capacidade de destruir objetos e matrizes. Destructar matrizes ou objetos é o processo de retirar valores de objetos ou matrizes e atribuí -los a variáveis ​​locais usando a sintaxe de destruição.

Destructuring Works atribuindo os valores dos elementos da matriz/objeto a várias variáveis ​​usando uma única linha de código, então você pode acessar esses valores usando essas novas variáveis. Lembre -se de que não há "símbolo" ou "operador" de destruição particular.

Sintaxe
A sintaxe do uso da atribuição de destruição é bastante simples; destruir o objeto em várias variáveis:

• Use os colchetes encaracolados após a definição da variável
• Coloque as variáveis ​​dentro dos colchetes encaracolados
• Em seguida, defina -o (declaração de variável inteira) igual ao objeto

Objetos:

const var1, var2 = objectName;

Da mesma forma, para destruir matrizes para várias variáveis, use os colchetes [] em vez de colchetes encaracolados.

Matrizes:

const [variável1, variável2] = ArrayName;

Observação: No caso de destrutivos, o nome das variáveis ​​deve ser o mesmo que o nome das propriedades do objeto.

Matrizes de destruição em JavaScript

Crie uma matriz contendo elementos aleatórios dentro dele para demonstrar a destruição de matrizes em JavaScript usando o seguinte comando:

Usuário = ["Alberto", "Rodrigo", 25, "Masculino"];

Você pode ver, temos uma matriz com os detalhes de uma pessoa. A solução tradicional de armazenar os valores dos elementos dessa matriz nas variáveis ​​locais seria:

const FirstName = usuário [1];
const lastName = usuário [2];
const AGE = usuário [3];
const gênero = usuário [4];

Este é um processo longo e requer mais linhas de código.

Usando os recursos de destruição, o código acima muda para:

const [FirstName, SounName, Age, Gênero] = Usuário;

Apenas com essa linha, criamos 4 variáveis ​​e atribuímos a eles os respectivos valores da matriz.

Para verificar isso, você pode imprimir o valor de qualquer uma dessas variáveis ​​com o seguinte código:

console.log (primeiro nome);
console.log (gênero);

O trecho completo do código seria:

Array = ["Alberto", "Rodrigo", 25, "Masculino"];
const [primeironame, lastName, idade, sexo] = matriz;
console.log (primeiro nome);
console.log (gênero);

Você obterá a seguinte saída:

Você pode ver, as variáveis ​​tinham seus valores dos elementos da matriz.

Destrutura de matrizes aninhadas

Destruição até trabalha com matrizes aninhadas. Por exemplo, pegue uma matriz aninhada que possa ser criada com as seguintes linhas de código:

Usuário = ["Alberto", "Rodrigo", 25, "Masculino", ["Sr.John "," Samantha "]];

Você pode ver que o último elemento da matriz é outra matriz contendo os nomes do pai e a mãe da pessoa.

Podemos destruir essa matriz aninhada usando o seguinte código:

const [FirstName, SounName, Age, Gênero, [Nome do Folher, Mothername]] = Array;

Você pode verificar essa destruição usando os seguintes comandos:

console.log (primeiro nome);
console.log (gênero);
console.log (name fathern);
console.log (nome -mãe);

O trecho de código completo é:

Array = ["Alberto", "Rodrigo", 25, "masculino", ["Sr.John "," Samantha "]];
const [FirstName, SounName, Age, Gênero, [Nome do Folher, Mothername]] = Array;
console.log (primeiro nome);
console.log (gênero);
console.log (name fathern);
console.log (nome -mãe);

Você verá a seguinte saída na tela quando executar o programa.

Você pode ver que foi capaz de destruir com sucesso a matriz e verificar o resultado no final também.

Destructar objetos em JavaScript

Suponha que tenhamos um objeto "pessoa":

var pessoa =
primeiro nome: "John",
Idade: 25,
LastName: "Doe",
trabalho: "auditor",
;

E os pares de valor-chave são as propriedades dessa pessoa: primeiro nome, sobrenome, idade e trabalho.

Você pode destruir esse objeto usando a seguinte linha:

var FirstName, Age, LastName, Job = Person;

Observação: Quando você está destruindo um objeto, o nome das variáveis ​​deve corresponder ao nome das propriedades do objeto, de outra forma, a destruição não funcionará e o valor da variável seria indefinido.

Você pode verificar a destruição imprimindo os valores dessas variáveis ​​no console usando as seguintes linhas de código.

console.log (primeiro nome);
console.log (lastName);
console.log (idade);
console.log (trabalho);

O trecho de código completo é:

var pessoa =
primeiro nome: "John",
Idade: 25,
LastName: "Doe",
trabalho: "auditor",
;
var FirstName, Age, LastName, Job = Person;
console.log (primeiro nome);
console.log (lastName);
console.log (idade);
console.log (trabalho);

Ao executar este programa, você verá a seguinte saída:

Você criou com sucesso um objeto em JavaScript, e é isso para destruir objetos e matrizes em JavaScript.

Conclusão

Matrizes e objetos podem ser destruídos usando a sintaxe de destruição em JavaScript, Arrays e objetos de destruição é um novo recurso que foi introduzido no JavaScript ES6 Release. Destrutura é o processo de atribuir os valores dos elementos/propriedades de matrizes/objetos para variáveis ​​locais usando uma única linha de código. Neste guia, aprendemos como podemos destruir matrizes, matrizes aninhadas e objetos com a ajuda de exemplos.