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.

var [primeiro, segundo, terceiro] = ["Laide", "Gabriel", "Jets"];
A sintaxe com desestruturação.
var primeiro = "laide",
    segundo = "Gabriel",
    terceiro = "Jets
A sintaxe sem desestruturação.
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.
var [1, 2, 3] = ["Laide", "Ola", "Jets"];
Esta sintaxe gera um erro.

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.