JS: Массивы

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

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

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

const point = [3, 5];

console.log(`${point[0]}:${point[1]}`); // => 3:5

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

const x = point[0];
const y = point[1];

console.log(`${x}:${y}`); // => 3:5

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

const [x, y] = point;
// Слева массив повторяет структуру правого массива
// но вместо значений используются идентификаторы
// они заполняются значениями, стоящими на тех же позициях в правом массиве
// [x, y] = [3, 5]
// x = 3, y = 5

console.log(`${x}:${y}`); // => 3:5

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

// Извлекаем первый элемент
// Остальные игнорируются
const [x] = point;

// Извлекаем второй элемент
// Для этого просто не указываем первый
const [, y] = point;

// и даже так
const [, secondElement, , fourthElement, fifthElement] = [1, 2, 3, 4, 5, 6];

console.log(secondElement); // => 2
console.log(fourthElement); // => 4
console.log(fifthElement);  // => 5

https://repl.it/@hexlet/js-arrays-destructuring-positional

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

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

const [firstElement, secondElement, thirdElement] = [1, 2];

console.log(firstElement);  // => 1
console.log(secondElement); // => 2
console.log(thirdElement);  // => undefined

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

const [firstElement, secondElement, thirdElement = 3] = [1, 2];

console.log(firstElement);  // => 1
console.log(secondElement); // => 2
console.log(thirdElement);  // => 3

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

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

const [one, [two, three]] = [1, [2, 3]];

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

Деструктуризация в циклах

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

const points = [
  [4, 3],
  [0, -3],
];

for (const [x, y] of points) {
  console.log([x, y]);
}

// => [ 4, 3 ]
// => [ 0, -3 ]

https://repl.it/@hexlet/js-arrays-destructuring-for-of

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

const swapValues = ([a, b]) => [b, a];

swapValues([1, 2]); // [2, 1]

Деструктуризация строк

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

const [first, second, third] = 'two';
console.log(first); // => 't'
console.log(second); // => 'w'
console.log(third); // => 'o'

Дополнительные материалы

  1. Официальная документация

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».