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();
Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Javascript, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →