ES6 Оператор "остаточные параметры"

Оператор "остаточные параметры" (...) или остаточный оператор в JavaScript позволяет быстро скопировать все или часть элементов существующего массива или объекта в другой массив или объект.

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Остаточный оператор часто используется в сочетании с деструктуризацией.

const numbers = [1, 2, 3, 4, 5, 6];

// Захват первых двух элементов отдельно, остальные в массив rest
const [first, second, ...rest] = numbers;

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(rest);   // Output: [3, 4, 5, 6]

Важные моменты:

• Остаточный оператор должен находиться последним в списке переменных.
• Если элементов недостаточно для заполнения обязательных переменных, остаток останется пустым.

Пример: получение частей строки

Представьте, что вы работаете со строкой, разделённой символами. Нужно захватить первый символ отдельно, а остальные объединить в одну строку:

const str = "JavaScript";

// Первый символ отдельно, остальные символы объединяются в строку
const [firstChar, ...chars] = str.split('');

console.log(firstChar); // Output: J
console.log(chars.join('')); // Output: avaScript

Использование оператора "остаточные параметры" с объектами

Остаточный оператор можно также использовать и с объектами.

const car = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
};

const carMore = {
  type: 'car',
  year: 2021,
  color: 'yellow'
};

const myCar = {...car, ...carMore};

Обратите внимание, что несуществующие свойства добавились, а совпадающее свойство (цвет) было переписано значением последнего объекта.

Когда использовать остаточный оператор?

• Работа с коллекциями неизвестной длины: если заранее неизвестно число элементов в массиве или количестве свойств в объекте.
• Разделение массива на группы: выделение первой части элементов отдельно, а остальных группируя в отдельную коллекцию.
• Объединение большого количества полей: например, сохранение нужных полей отдельно, а остальное можно записать в общий объект.

Примеры использования в реальных ситуациях

1. Передача остающихся аргументов функции: полезный приём, когда нужно принять неограниченное количество аргументов.

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

sum(1, 2, 3, 4); // Output: 10

2. Создание объектов с ограниченными полями: фильтрация полей объекта, собирая лишние поля в отдельный объект.

const product = {
  title: "Laptop",
  price: 1000,
  category: "Electronics",
  stock: true
};

// Оставляем только title и price, остальные свойства идут в extra
const { title, price, ...extra } = product;

console.log(title);   // Output: Laptop
console.log(price);   // Output: 1000
console.log(extra);   // Output: {category: "Electronics", stock: true}