Desestruturação de arrays em

Sobre Desestruturação de arrays

A atribuição por desestruturação de arrays é uma forma concisa de extrair valores de um array. A sua sintaxe é semelhante à de uma expressão de literal de array, mas do lado esquerdo da atribuição, e não do direito.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

Reatribuição

Como as variáveis são associadas a valores do array pela sua posição, a sintaxe de desestruturação pode ser usada para atribuir ou reatribuir várias variáveis numa única expressão.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

Isto também funciona com arrays aninhados.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

Saltar valores na atribuição

A sintaxe permite saltar valores ao fazer a associação, por exemplo para ignorar posições específicas do array. No exemplo abaixo, imagina que temos uma função getUserInfo que devolve um array com o nome próprio, o apelido e a morada de um utilizador.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Descartar valores

Também não é obrigatório usar todos os valores na atribuição.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Extrair mais valores do que os disponíveis

É até possível extrair mais valores do que os que o array contém; as variáveis que sobrarem ficam com o valor undefined. Isto pode ser útil quando não se sabe de antemão quantos valores haverá.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Valores predefinidos

A atribuição por desestruturação de arrays pode fornecer valores predefinidos caso não exista nenhum no array de origem.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

Conceitos relacionados

object-destructuring rest-and-spread