Операторы spread (…) и rest (…), появившиеся в ES6, являются мощными инструментами для работы с массивами и объектами. Они имеют одинаковый синтаксис, но выполняют противоположные функции.
Оператор Spread (…)
Оператор spread — это три точки (…), «разворачивающие» элементы массива или свойства объекта.
Работа с массивами
Рассмотрим массивы русских и европейских городов:
const citiesRussia = ['Москва', 'Санкт-Петербург', 'Казань', 'Нижний Новгород'];
const citiesEurope = ['Берлин', 'Прага', 'Париж'];Вывод citiesRussia в консоль отобразит массив. Применение оператора spread:
console.log(...citiesRussia);Результат — вывод элементов массива как отдельных строк. Spread «разворачивает» массив. Это позволяет:
- Клонировать массив:
const clonedCitiesRussia = [...citiesRussia];clonedCitiesRussia — новый массив с теми же элементами, но с другой ссылкой в памяти.
- Объединять массивы:
const allCities = [...citiesRussia, 'Вашингтон', ...citiesEurope];Результат — объединенный массив всех городов. Порядок элементов соответствует порядку в исходных массивах. Это альтернатива методу concat():
const allCitiesConcat = citiesEurope.concat(citiesRussia);Spread обеспечивает более наглядный синтаксис.
Работа с объектами
Рассмотрим объекты городов с количеством жителей:
const citiesRussiaObj = { moscow: 20, saintPetersburg: 5, kazan: 2 };
const citiesEuropeObj = { berlin: 4, prague: 1, paris: 10 };Вывод citiesRussiaObj в консоль покажет сам объект. Применение spread к объекту напрямую в console.log() некорректно. Spread «разворачивает» свойства объекта, которые нужно «собрать» в новый объект:
const clonedCitiesRussiaObj = { ...citiesRussiaObj };Это создает новый объект — клон citiesRussiaObj. Объединение объектов:
const allCitiesObj = { ...citiesRussiaObj, ...citiesEuropeObj };Создается новый объект, содержащий все свойства исходных объектов. При совпадении ключей, значение из последнего объекта перепишет значение из предыдущего.
Оператор Rest (…)
Оператор rest имеет тот же синтаксис, что и spread, но используется для сбора аргументов в массив или свойства объекта.
Применение в функциях
Создадим функцию суммирования двух чисел:
function sum(a, b) {
return a + b;
}И массив чисел:
const numbers = [1, 2, 3, 4, 5];Вызов sum(…numbers) просуммирует только первые два элемента. Для обработки всех аргументов используем rest:
function sumRest(...rest) {
return rest.reduce((acc, el) => acc + el, 0);
}rest — массив всех переданных аргументов. reduce() суммирует элементы массива.
Деструктуризация с Rest
Rest используется в деструктуризации массивов и объектов для сбора оставшихся элементов:
const [a, b, ...restNumbers] = numbers;a и b получат первые два элемента numbers, а restNumbers — массив остальных. Аналогично для объектов:
const { name, age, ...restProps } = { name: 'Max', age: 20, city: 'Moscow', country: 'Russia' };name и age получат соответствующие значения, а restProps — объект с оставшимися свойствами.
Операторы spread и rest — мощные инструменты JavaScript, упрощающие работу с массивами и объектами. Spread «разворачивает» элементы, а rest собирает их в новые структуры данных. Понимание их различий и применения повышает эффективность работы с JavaScript.