После внедрения в спецификации ES6, оператор ... (три точки) стал неотъемлем
Этот универсальный оператор может выполнять две функции, в зависимости от контекста: быть либо spread-оператором, либо rest-оператором. Разберем, как и где его применять, и наглядно рассмотрим на примерах.
Spread-оператор: Распаковка элементов
Представьте, что массив — это контейнер, наполненный различными элементами. Spread-оператор позволяет вам аккуратно «распаковать» содержимое этого контейнера, не изменяя его самого. Это особенно полезно, когда вы хотите скопировать массив или объединить несколько массивов.
Рассмотрим пример:
const animals = ['🦁', '🐘', '🐍', '🦍', '🐯'];
const someOtherAnimals = [...animals];
содержит те же элементыsomeOtherAnimalsТеперь animals, но при этом оригинальный массив animals остается неизменным.
Кроме того, spread-оператор позволяет объединять несколько массивов в один:
const wild = ['🦁', '🐘', '🐍', '🦍', '🐯'];
const domestic = ['🐐', '🐔', '🐱', '🐶'];
const animals = [...wild, ...domestic];
Теперь animals содержит все элементы из wild и domestic, а исходные массивы остаются нетронутыми.
Rest-оператор: Сбор аргументов в массив
Rest-оператор, напротив, выполняет противоположную функцию: он позволяет собрать неопределенное количество элементов (например, аргументов функции) в массив. Это удобно, когда нужно передать переменное количество аргументов в функцию и работать с ними как с массивом.
Рассмотрим пример функции, которая суммирует все переданные ей числа:
const addAll = (...numbers) => {
return numbers.reduce((acc, num) => acc + num);
};
const sum = addAll(1, 2, 3, 4); // возвращает 10
const sum1 = addAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // возвращает 55
Здесь rest-оператор собирает все переданные в addAll числа в массив numbers, после чего функция возвращает их сумму.
Еще один пример — функция, которая умножает все переданные числа на заданное число:
const multiplyByNum = (multiplier, ...numbers) => {
return numbers.map(num => num * multiplier);
};
const multiplyBy2 = multiplyByNum(2, 1, 2, 3, 4);
// возвращает [2, 4, 6, 8]
В данном случае первый аргумент multiplier используется как множитель для каждого числа в массиве numbers, который собирается с помощью rest-оператора.
Итоги
- Spread-оператор (
...) — это инструмент для распаковки элементов массива или итерируемого объекта, позволяя легко копировать или объединять их.
- Rest-оператор (
...) — позволяет собрать несколько элементов в массив, что особенно полезно для работы с аргументами функции.
Оба оператора, хоть и используют одинаковый синтаксис, играют разные роли в зависимости от контекста. Они значительно упрощают работу с данными в JavaScript, делая код более понятным и эффективным.
