Деструктуризація масивів у

Про концепцію Деструктуризація масивів

Деструктуризація масиву - це стислий спосіб витягувати значення з масиву. Її синтаксис схожий на літерал масиву, але стоїть у лівій частині присвоєння, а не в правій.

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

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

Повторне присвоєння

Оскільки змінні зіставляються зі значеннями в масиві за позицією, синтаксис деструктуризації можна використати, щоб присвоїти або повторно присвоїти кілька змінних в одному виразі.

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

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

Це працює і для вкладених масивів.

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

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

Пропускання під час присвоєння

Синтаксис дозволяє пропускати значення під час зіставлення, наприклад, щоб ігнорувати конкретні позиції в масиві. У прикладі нижче уявімо, що в нас є функція getUserInfo, яка повертає масив з імʼям, прізвищем і адресою користувача.

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

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Відкидання значень

Для присвоєння також не обовʼязково використовувати всі значення.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Витягування більшої кількості значень, ніж є

Можна навіть витягти більше значень, ніж містить масив; зайвим змінним буде присвоєно undefined. Це може стати в пригоді, коли кількість значень наперед невідома.

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

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Типові значення

Деструктуризація масиву може задавати типові значення, якщо у вихідному масиві їх немає.

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

third;
// => 'none selected'

fourth;
// => undefined

Повʼязані концепції

object-destructuring rest-and-spread