spread и rest операторы: расширение и сбор элементов

Расширяем возможности: spread оператор 🌟

JavaScript предоставляет мощные инструменты для работы с массивами и объектами. Один из них — spread оператор (...), который позволяет "развернуть" элементы коллекции.

Как работает spread?

const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

Этот оператор буквально "раскладывает" элементы массива по отдельности. Особенно полезно при:

1. Объединении массивов:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

2. Копировании массивов (без мутации оригинала):

const original = [1, 2, 3];
const copy = [...original]; // новый массив

3. Передаче аргументов в функцию:

function sum(a, b, c) {
  return a + b + c;
}
const nums = [1, 2, 3];
console.log(sum(...nums)); // 6

💡 Профессиональный лайфхак: spread отлично работает с Math функциями:

const scores = [92, 85, 97];
const highest = Math.max(...scores); // 97

Собираем элементы: rest параметры 🧺

Если spread "разбирает", то rest параметр (...) наоборот — собирает оставшиеся элементы в массив.

Rest в функциях

function logArguments(first, ...rest) {
  console.log(`Первый: ${first}`);
  console.log(`Остальные: ${rest}`);
}
logArguments(1, 2, 3, 4);
// Первый: 1
// Остальные: 2,3,4

⚠️ Важно: rest параметр всегда должен быть последним в списке аргументов!

Деструктуризация с rest

const [first, second, ...others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(others); // [3, 4, 5]

Это работает и с объектами:

const user = { name: 'Alex', age: 30, city: 'Moscow' };
const { name, ...details } = user;
console.log(details); // { age: 30, city: 'Moscow' }

Когда использовать spread и rest?

Продвинутые примеры 🔥

1. Работа с DOM

const divs = [...document.querySelectorAll('div')];
// Теперь можем использовать методы массива
divs.map(div => console.log(div.textContent));

2. Объединение объектов

const defaults = { theme: 'light', fontSize: 16 };
const userSettings = { fontSize: 18 };
const finalSettings = { ...defaults, ...userSettings };
// { theme: 'light', fontSize: 18 }

3. Удаление свойства из объекта (без мутации)

const { password, ...userWithoutPassword } = user;

Частые ошибки и как их избежать 🚧

1. Попытка использовать rest не в конце:

function wrong(...rest, last) { } // SyntaxError

2. Spread в неподдерживаемых структурах:

const obj = { a: 1 };
console.log([...obj]); // TypeError

3. Глубокая копия не создается:

const nested = [{a: 1}];
const copy = [...nested];
copy[0].a = 2; // Изменится и оригинал!

Практика и эксперименты 🧪

Лучший способ освоить эти операторы — практика! Попробуйте:

1. Создать функцию, которая принимает любое количество аргументов и возвращает их сумму
2. Объединить два объекта с перезаписью совпадающих свойств
3. Скопировать массив массивов без мутации оригинала

Эти операторы — мощные инструменты в вашем JavaScript-арсенале. Используйте их там, где нужно работать с коллекциями элементов или параметрами функций! 🚀