JS: Массивы

Rest-оператор и деструктуризация

Мощь деструктуризации больше всего проявляется там, где она используется вместе с 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 = []

В ситуациях когда нас интересует только часть массива, но не важны первые элементы, лучше воспользоваться методом массива 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 в итоге мы получаем массив, а не строку.


<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 «Политикой конфиденциальности» и «Условиями оказания услуг».