Desestruturação de Arrays

A desestruturação em ES6 (ECMAScript 2015) é uma forma poderosa de extrair valores de arrays ou propriedades de objetos em variáveis distintas. No caso de arrays, a desestruturação permite que você extraia elementos com uma sintaxe simples e clara. Vamos dar uma olhada mais detalhada em como isso funciona com arrays.

Aqui está um exemplo básico de desestruturação de arrays:

const numeros = [1, 2, 3, 4, 5];

// Extraindo elementos do array
const [primeiro, segundo, terceiro] = numeros;

console.log(primeiro); // 1
console.log(segundo); // 2
console.log(terceiro); // 3

Neste exemplo, primeiro recebe o valor 1, segundo recebe o valor 2, e terceiro recebe o valor 3 diretamente do array numeros.

Pulando Elementos

Você pode pular elementos do array usando vírgulas:

const numeros = [1, 2, 3, 4, 5];

// Pulando o segundo elemento
const [primeiro, , terceiro] = numeros;

console.log(primeiro); // 1
console.log(terceiro); // 3

Desestruturação com Rest Operator

O operador rest (...) pode ser usado para capturar o resto dos elementos do array:

const numeros = [1, 2, 3, 4, 5];

// Capturando o resto dos elementos
const [primeiro, segundo, ...resto] = numeros;

console.log(primeiro); // 1
console.log(segundo); // 2
console.log(resto); // [3, 4, 5]

Valores Padrão

Você também pode definir valores padrão para as variáveis que são desestruturadas. Esses valores serão usados se o elemento correspondente do array for undefined.

const numeros = [1, 2];

// Definindo valores padrão
const [primeiro = 10, segundo = 20, terceiro = 30] = numeros;

console.log(primeiro); // 1
console.log(segundo); // 2
console.log(terceiro); // 30 (valor padrão)

Troca de Variáveis

A desestruturação de arrays também pode ser usada para trocar o valor de duas variáveis de forma simples:

let a = 1;
let b = 2;

// Trocando os valores
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

A desestruturação em ES6 simplifica a extração de dados de arrays e objetos, tornando o código mais legível e conciso. Experimente usar essa técnica no seu próximo projeto para ver como ela pode melhorar a clareza e a eficiência do seu código! ✔️