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

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

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

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

const frenchCities = ['paris', 'marseille'];
const cities = ['milan', 'rome', ...frenchCities];
// ['milan', 'rome', 'paris', 'marseille']

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

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

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

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

const cities = [...frenchCities, 'milan', 'rome'];
// ['paris', 'marseille', 'milan', 'rome']

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

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

const cities = ['milan', ...frenchCities, 'rome'];
// ['milan', 'paris', 'marseille', 'rome']

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

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

const frenchCities = ['paris', 'marseille'];
const italianCities = ['rome', 'milan'];
// слияние двух массивов
const cities = [...frenchCities, ...italianCities];
// ['paris', 'marseille', 'rome', 'milan']

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

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

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

const frenchCities = ['paris', 'marseille'];
const copy = [...frenchCities];
copy.push('lyon');
console.log(copy); // => ['paris', 'marseille', 'lyon']
console.log(frenchCities); // => ['paris', 'marseille']

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

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

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

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

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
7 июля 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
7 июля 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
7 июля 16 месяцев

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

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

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

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