Introdução
Desestruturação de arrays
A sintaxe de desestruturação de arrays do JavaScript é uma forma concisa de extrair valores de um array e atribuí-los a variáveis distintas.
Neste exemplo, cada valor do array numberOfMoons é atribuído ao planeta correspondente:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
Resumindo:
- A sintaxe permite dar nome a elementos posicionados num array, bem como trocar variáveis através de reatribuição.
- A sintaxe de desestruturação está disponível dentro dos parâmetros de função e em qualquer iterável.
- Deixar uma posição sem nome (não escrevendo qualquer nome de variável) ignora essa posição silenciosamente.
Desestruturação de objetos
Em JavaScript, existe também sintaxe de desestruturação para extrair propriedades de um objeto e atribuí-las a variáveis distintas.
Neste exemplo, são extraídos símbolos meteorológicos do objeto weather:
const weather = {
sun: '☀️',
sun_behind_small_cloud: '🌤️',
sun_behind_cloud: '⛅',
sun_behind_large_cloud: '🌥️',
sun_behind_rain_cloud: '🌦️',
cloud: '☁️',
cloud_with_rain: '🌧️',
cloud_with_snow: '🌨️',
cloud_with_lightning: '🌩️',
cloud_with_lightning_and_rain: '⛈️',
};
const { sun, cloud, cloud_with_lightning: thunder } = weather;
sun;
// => '☀️'
cloud;
// => '☁️'
thunder;
// => '🌩️'
Resumindo:
- A sintaxe permite tanto extrair propriedades como extraí-las e renomeá-las.
- A sintaxe de desestruturação está disponível dentro dos parâmetros de função.
Instruções
A Elyse, futura maga, continua o seu treino.
Tem um baralho de cartas que quer manipular.
Para facilitar, normalmente começa apenas com cartas numeradas de 2 a 10, embora alguns dos truques possam envolver cartas adicionais (figuras).
Há muitas formas de baralhar as cartas, mas para manter a ilusão de magia é vital que não se use um único método, por exemplo, a Elyse não usa splice, slice, shift, unshift, push, at.
O acesso a um array com array[index] e o acesso a um objeto (object[key] e object.key) também nunca devem ser usados.
Queres ajudar a Elyse a elevar a sua magia?
Qualquer função pode ser implementada usando os parâmetros e um corpo de função com um único return expression.
1. Obter a primeira carta
A Elyse vai invocar a primeira carta do baralho sem usar array[index], .at(index) ou .shift().
É mesmo como magia.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Obter a segunda carta
A Elyse faz um truque de prestidigitação e invoca a segunda carta do baralho sem usar array[index] nem .shift().
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Trocar duas cartas
A Elyse vai fazer com que as duas cartas do baralho troquem de posição.
Não precisa de chamar uma única função.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Deslocar três cartas
Para fazer mais um pouco de prestidigitação, a Elyse pega em três cartas e move rapidamente a carta de cima para o fundo, fazendo da carta do meio a primeira carta e da antiga carta de baixo a carta do meio.
Não precisa de chamar uma única função.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Escolher o monte nomeado
A Elyse vai separar o baralho em dois montes.
Depois pede ao observador que escolha um dos dois montes, ao qual damos o nome de chosen.
O monte disregarded já não é relevante, e ela fá-lo desaparecer.
Não precisa de chamar uma única função.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Trocar o monte escolhido
Infelizmente, o observador continua a escolher o monte "errado", mas com um truque rápido e engenhoso, a Elyse muda o nome do monte chosen para disregarded e do monte disregarded para o monte chosen.
Não precisa de chamar uma única função.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Exercício de aprendizagem
