Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Деструктуризация (destructuring) - синтаксическая возможность "раскладывать" элементы массива (и не только) в отдельные константы или переменные. Деструктуризация относится к необязательным, но очень приятным возможностям языка. Рассмотрим ее на примерах.

2 Представьте, что у нас есть массив из двух элементов, которыми мы хотим оперировать в нашей программе. Самый простой вариант использования его элементов - постоянное обращение по индексу point[0] и point[1].

3 Индексы ничего не говорят о содержимом, и для понимания этого кода придется прикладывать дополнительные усилия. Гораздо лучше сначала присвоить эти значения переменным с хорошими именами. Тогда код станет читаемым:

4 Код стал значительно понятнее, хотя и длиннее. С помощью деструктуризации то же самое можно сделать короче:

5 Получилось и короче, и понятнее (особенно если привыкнуть к этому способу записи). Деструктуризация позволяет извлечь из массива практически любые части, используя очень короткий и интуитивно понятный синтаксис. Она работает даже в том случае, когда нас интересует только часть массива. Причем как начало, так и его конец:

6 Мы извлекли из массива [1, 2, 3, 4, 5, 6] значения второго, четвертого и пятого элементов, сохранив их в константах secondElement, fourthElement и fifthElement. При этом на месте первого (нулевой индекс) и третьего (второй индекс) элементов мы сделали пропуски, не указав никаких переменных, потому что значения этих элементов в данном случае нам были не нужны.

7 Если при деструктуризации указать переменную так, что ей не будет соответствовать ни один элемент массива, то в переменную запишется значение undefined:

8 Исходный массив состоит всего из двух элементов, поэтому в thirdElement сохранилось undefined. Но в таких случаях можно подстраховаться и определить значение по умолчанию:

9 В массиве [1, 2] нет соответствия для thirdElement, поэтому в константу thirdElement было записано значение по умолчанию 3.

10 Деструктуризация работает на любом уровне вложенности. Например, с ее помощью можно извлекать данные из массивов внутри массивов:

11 Есть бесконечное множество возможных комбинаций и вариантов использования деструктуризации. Чем больше вы будете экспериментировать с ней, тем больше найдете вариантов использования.

12 <h2>Деструктуризация в циклах</h2>

13 Разложение массива можно использовать не только как отдельную инструкцию в коде, но и в циклах:

14 В этом примере каждый элемент в цикле является массивом. Без деструктуризации цикл выглядит так:

15 Внутри for переменная item - это массив, поэтому вместо нее можно подставить деструктуризацию [x, y].

16 Такое разложение можно сделать почти во всех местах, где явно или неявно ожидается массив. Входные параметры, возвращаемые значения функций, циклы и некоторые другие ситуации, с которыми вы обязательно будете сталкиваться при написании кода.

17 <h2>Деструктуризация строк</h2>

18 В JavaScript строки ведут себя подобно массивам и их также можно деструктурировать.