Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Rest и деструктуризация JS: Массивы

Мощь деструктуризации больше всего проявляется там, где она используется вместе с синтаксисом rest. Rest позволяет "свернуть" часть элементов во время деструктуризации. Например, с его помощью можно разложить массив на первый элемент и все остальные:

const fruits = ['apple', 'orange', 'banana', 'pineapple'];

// ... – rest
const [first, ...rest] = fruits;
console.log(first); // 'apple'
console.log(rest); // ['orange', 'banana', 'pineapple']

Запись ...rest означает, что нужно взять все элементы, которые остались от деструктуризации и поместить их в массив с именем rest. Этому массиву можно дать любое имя. Rest срабатывает в самом конце, когда все остальные данные уже разложены по своим константам (или переменным). Именно поэтому он называется rest (оставшиеся).

Подобным образом любой массив раскладывается на любое количество элементов + остальные. У rest есть ограничения. Он не может появляться нигде, кроме конца массива.

const [head, ...tail] = fruits;
// tail = ['orange', 'banana', 'pineapple']

const [first, second, ...rest] = fruits;
// rest = ['banana', 'pineapple']

const [first, second, third, ...rest] = fruits;
// rest = ['pineapple']

// Если элементов нет, то в rest окажется пустой массив
const [first, second, third, oneMore, ...rest] = fruits;
// rest = []

// Можно пропускать элементы, ничего не указывая между запятыми. Ниже пропущен второй элемент
const [first, , third, ...rest] = fruits;
// rest = ['pineapple']

В ситуациях, когда нас интересует только часть массива, но не важны первые элементы, лучше воспользоваться методом массива slice():

// slice возвращает новый массив, а не изменяет старый
const rest = fruits.slice(1);
console.log(rest); // ['orange', 'banana', 'pineapple'];

Синтаксис rest можно применять также и при деструктуризации строк.

const [first, second, ...rest] = 'some string';
console.log(first); // => 's'
console.log(second); // => 'o'
console.log(rest); // => [ 'm', 'e', ' ', 's', 't', 'r', 'i', 'n', 'g' ]

Обратите внимание, что после упаковки оставшейся части строки в rest мы получаем массив, а не строку.


Аватары экспертов Хекслета

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

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

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

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

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 30 ноября
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 30 ноября
профессия
от 10 080 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 30 ноября
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
дата определяется

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»