Вступ
Деструктуризація масивів
Синтаксис деструктуризації масивів у JavaScript дає змогу стисло витягти значення з масиву та присвоїти їх окремим змінним.
У цьому прикладі кожне значення з масиву numberOfMoons присвоюється відповідній планеті:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
Стисло:
- Синтаксис дозволяє давати назви позиційним елементам масиву, а також міняти змінні місцями за допомогою повторного присвоєння.
- Синтаксис деструктуризації можна використовувати всередині параметрів функції, і він працює з будь-яким обʼєктом, який можна перебрати.
- Якщо залишити позицію без назви (не написавши жодної назви змінної), ця позиція просто ігнорується.
Деструктуризація обʼєктів
У JavaScript також є синтаксис деструктуризації, який дозволяє витягти властивості з обʼєкта та присвоїти їх окремим змінним.
У цьому прикладі з обʼєкта 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;
// => '🌩️'
Стисло:
- Синтаксис дозволяє і просто витягувати властивості, і витягувати їх із перейменуванням.
- Синтаксис деструктуризації можна використовувати всередині параметрів функції.
Вказівки
Еліс, майбутня чарівниця, продовжує своє навчання.
У неї є колода карт, з якою вона хоче працювати.
Щоб було простіше, вона зазвичай починає лише з картами з номерами від 2 до 10, хоча деякі з трюків можуть залучати додаткові (фігурні) карти.
Існує багато способів перетасувати карти, але щоб підтримувати ілюзію магії, важливо, щоб жоден окремий метод не використовувався, наприклад, Еліс не використовує splice, slice, shift, unshift, push, at.
Так само ніколи не можна використовувати доступ до масиву array[index] і доступ до обʼєкта (object[key] та object.key).
Допоможімо Еліс удосконалити її магію?
Кожну функцію можна реалізувати, використовуючи параметри та тіло функції з єдиним return expression.
1. Візьміть першу карту
Еліс покличе першу карту з колоди, не використовуючи array[index], .at(index) чи .shift().
Неначе справжня магія.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Візьміть другу карту
Еліс демонструє спритність рук і кличе другу карту з колоди, не використовуючи array[index] чи .shift().
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Поміняйте дві карти місцями
Еліс змусить дві карти в колоді помінятися місцями.
Їй не потрібно викликати жодної функції.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Пересуньте три карти
Щоб знову продемонструвати спритність рук, Еліс бере три карти й швидко переставляє верхню карту в кінець, роблячи середню карту першою, а колишню нижню карту - середньою.
Їй не потрібно викликати жодної функції.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Виберіть названу купку
Еліс розділить колоду на дві купки.
Потім вона просить глядача вибрати одну з двох купок, яку ми назвемо chosen.
Купка disregarded більше не має значення, і Еліс змушує її зникнути.
Їй не потрібно викликати жодної функції.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Поміняйте вибрану купку місцями
На жаль, глядач постійно вибирає «не ту» купку, але завдяки спритній швидкій магії Еліс перейменовує купку chosen на disregarded, а купку disregarded - на купку chosen.
Їй не потрібно викликати жодної функції.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Навчальна вправа
