Artigo original: https://www.freecodecamp.org/news/array-destructuring-in-es6-30e398f21d10/
Escrito por: Kevwe Ochuko
A desestruturação em JavaScript é um método simplificado de extrair várias propriedades de um array, pegando a estrutura e desconstruindo-a, por meio de atribuições e usando uma sintaxe semelhante a dos array literals (arrays literais, em português).
Cria-se um padrão que descreve o tipo de valor que você espera e faz-se a atribuição. A desestruturação do array usa a posição.
Veja o trecho de código abaixo.
Você não pode usar números (variáveis do tipo Number) para desestruturar. Números gerarão um erro porque não podem ser nomes de variáveis.
A desestruturação tornou a extração de dados de um array muito simples e legível. Imagine tentar extrair dados de um array aninhado com 5 ou 6 níveis. Isso seria muito tedioso. Você usa um array literal no lado esquerdo da atribuição.
var objetos = ["Mesa", "Cadeira", "Ventilador"];
var [a, b, c] = objetos;
Ele pega cada variável no array literal no lado esquerdo e mapeia para o mesmo elemento no mesmo índice no array.
console.log(a); //Resultado: Mesa
console.log(b); //Resultado: Cadeira
console.log(c); //Resultado: Ventilador
A declaração e a atribuição podem ser feitas separadamente na desestruturação.
var generoA, generoB;
[generoA, generoB] = ["Masculino", "Feminino"];
Se o número de variáveis passadas para os array literals de desestruturação for maior do que os elementos do array, as variáveis que não forem mapeadas para nenhum elemento do array retornarão undefined
.
var objetos = ["Mesa", "Cadeira", "Ventilador", "Tapete"];
var [a, b, c, d, e] = objetos;
console.log(c); //Resultado: Ventilador
console.log(d); //Resultado: Tapete
console.log(e); //Resultado: undefined
Se o número de variáveis passadas para os array literals de desestruturação for menor que os elementos no array, os elementos sem variáveis a serem mapeadas serão deixados de lado. Não há nenhum tipo de erro.
var objetos = ["Mesa", "Cadeira", "Ventilador", "Tapete"];
var [a, b, c] = objetos;
console.log(c); //Resultado: Ventilador
Desestruturando arrays retornados
A desestruturação deixa o trabalho com uma função que retorna um array mais preciso. Funciona para todos os iteráveis.
function corredores(){
return ["Sandra", "Ola", "Chi"];
}
var [a, b, c] = corredores();
console.log(a); //Resultado: Sandra
console.log(b); //Resultado: Ola
console.log(c); //Resultado: Chi
Valor padrão
A desestruturação permite que um valor padrão (ou default) seja atribuído a uma variável se nenhum valor ou undefined
é passado. É como fornecer um substituto quando nada é encontrado.
var a, b;
[a = 40, b = 4] = [];
console.log(a); //Resultado: 40
console.log(b); //Resultado: 4
[a = 40, b = 4] = [1, 23];
console.log(a); //Resultado: 1
console.log(b); //Resultado: 23
Os valores padrão também podem se referir a outras variáveis, incluindo aquelas no mesmo array literal.
var [primeiro = "Cotlin", segundo = primeiro] = [];
console.log(primeiro); //Resultado: Cotlin
console.log(segundo); //Resultado: Cotlin
var [primeiro = "Cotlin", segundo = primeiro] = ["Koku"];
console.log(primeiro); //Resultado: Koku
console.log(segundo); //Resultado: Koku
var [primeiro = "Cotlin", segundo = primeiro] = ["Koku", "Lydia"];
console.log(primeiro); //Resultado: Koku
console.log(segundo); //Resultado: Lydia
Ignorando alguns valores
A desestruturação permite mapear uma variável para os elementos nos quais você está interessado. Você pode ignorar ou pular os outros elementos do array usando vírgulas à direita.
var a, b;
[a, , b] = ["Lordy", "Crown", "Roses"];
console.log(a); //Resultado: Lordy
console.log(b); //Resultado: Roses
O pârametro Rest e a sintaxe de spread
O novo operador (…) que foi adicionado no ES6 pode ser usado na desestruturação. Se o operador (…) aparecer no lado esquerdo na desestruturação, então ele é um PARÂMETRO REST. Um pârâmetro rest é usado para mapear todos os elementos restantes no array que não foram mapeados para a própria variável rest. É como se fosse juntando o que ficou para trás. A variável rest deve ser sempre a última. Caso contrário, um SyntaxError
aparece.
var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];
var [primeiro, , terceiro, ...outros] = planetas;
console.log(primeiro); //Resultado: Mercúrio
console.log(terceiro); //Resultado: Vênus
console.log(outros); //Resultado: ["Marte", "Plutão", "Saturno"]
Se o operador (…) aparecer à direita na desestruturação, então essa é uma SINTAXE DE SPREAD. Ela pega todos os outros elementos do array que não têm nenhuma variável mapeada para eles e, em seguida, mapeia para a variável restante.
var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];
var [primeiro, segundo, ...resto] = ["Mercúrio", "Terra", ...planetas, "Saturno"];
console.log(primeiro); //Resultado: Mercúrio
console.log(segundo); //Resultado: Terra
console.log(resto); //Resultado: ["Vênus", "Marte", "Plutão", "Saturno"]
Caso você possa ter mais variáveis no lado esquerdo, ele mapeia os elementos únicos no array igualmente para as variáveis.
var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];
var [primeiro, segundo, ...resto] = ["Mercúrio", ...planetas];
console.log(primeiro); //Resultado: Mercúrio
console.log(segundo); //Resultado: Mercúrio
console.log(resto); //Resultado: ["Terra", "Vênus", "Marte", "Plutão", "Saturno"]
var planetas = ["Mercúrio", "Terra", "Vênus", "Marte", "Plutão", "Saturno"];
var [primeiro, segundo, terceiro, quarto ...resto] = ["Mercúrio", "Terra", ...planetas];
console.log(primeiro); //Resultado: Mercúrio
console.log(segundo); //Resultado: Terra
console.log(terceiro); //Resultado: Mercúrio
console.log(quarto); //Resultado: Terra
console.log(resto); //Resultado: ["Vênus", "Marte", "Plutão", "Saturno"]
Mudando ou trocando variáveis
Uma expressão de desestruturação pode ser usada para trocar os valores de duas variáveis.
var a, b;
[a, b] = ["Masculino", "Feminino"];
[a, b] = [b, a];
console.log(a); //Resultado: Feminino
console.log(b); //Resultado: Masculino
Desestruturação de arrays aninhados
Você também pode fazer a desestruturação de arrays aninhados. O item correspondente deve ser um array, para assim usar um array literal aninhado na desestruturação para atribuir itens às variáveis locais.
var numeros = [8, [1, 2, 3], 10, 12];
var [a, [d, e, f]] = numeros;
console.log(a); // Resultado: 8
console.log(d); // Resultado: 1
console.log(e); // Resultado: 2
Desestruturação múltipla de arrays
Você pode desestruturar um array mais de uma vez no mesmo trecho de código.
var posicoes = ["primeiro", "segundo", "terceiro", "quarto"];
var [a, b, , d] = [f, ...resto] = posicoes;
console.log(a); //Resultado: primeiro
console.log(d); //Resultado: quarto
console.log(f); //Resultado: primeiro
console.log(resto); //Resultado: ["segundo", "terceiro", "quarto"]
Conclusão
Você pode copiar e colar o código no site do Babel para ver como seria o código se a desestruturação não existisse. Você teria escrito mais linhas de código! Com a desestruturação, tudo ficará mais simples.