JS: Массивы

Spread-оператор и создание новых массивов

У оператора rest есть оператор-компаньон – spread-оператор. Этот оператор имеет такой же синтаксис, но выполняет противоположную задачу. Он не сворачивает элементы, а наоборот, растягивает их. С его помощью обычно копируют или сливают массивы.

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

const russianCities = ['moscow', 'kazan'];
const cities = ['milan', 'rome', ...russianCities];
// ['milan', 'rome', 'moscow', 'kazan']

// Массив russianCities при этом никак не меняется

// То же самое без spread-оператора
const cities = ['milan', 'rome'].concat(russianCities);

... в данном случае spread-оператор. Он растянул массив, добавив все его элементы в новый массив. Как отличить его от rest-оператора? Все дело в контексте использования. Rest-оператор появляется слева от знака равно, там, где происходит деструктуризация. Spread-оператор – справа от знака равно, там где массив формируется.

Spread-оператор, в отличии от rest-оператора может появляться в любой части массива. Например, мы можем дополнить исходный массив не справа, а слева:

const cities = [...russianCities, 'milan', 'rome'];
// ['moscow', 'kazan', 'milan', 'rome']

// То же самое без spread-оператора
const cities = russianCities.concat(['milan', 'rome']);

И даже посередине:

const cities = ['milan', ...russianCities, 'rome'];
// ['milan', 'moscow', 'kazan', 'rome']

// Без spread-оператора подобный код нельзя выразить одной операцией

Spread-оператор работает с любым количеством массивов:

const russianCities = ['moscow', 'kazan'];
const ukrainianCities = ['kiev', 'odessa']
// слияние двух массивов
const cities = [...russianCities, ...ukrainianCities];
// ['moscow', 'kazan', 'kiev', 'odessa']

// То же самое без spread-оператора
const cities = russianCities.concat(ukrainianCities);

Копирование массива

Spread-оператор нередко используется для копирования массива. Копирование предотвращает изменение исходного массива, в том случае, когда необходимо менять его копию:

const russianCities = ['moscow', 'kazan'];
const copy = [...russianCities];
copy.push('samara');
console.log(copy); // => ['moscow', 'kazan', 'samara']
console.log(russianCities); // => ['moscow', 'kazan']

// То же самое без spread-оператора
const russianCities = ['moscow', 'kazan'];
const copy = russianCities.slice();

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