Этот вопрос проверяет понимание двух различных использований оператора ... в JavaScript.
Spread оператор "разворачивает" элементы массивов или свойства объектов, а rest параметры "собирают" оставшиеся аргументы в массив или оставшиеся свойства в объект. Spread используется в правой части выражения, rest - в левой, в контексте деструктуризации или параметров функции.
Один и тот же оператор ... используется для двух противоположных операций в зависимости от контекста.
Spread оператор (разворот):
Для массивов:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// Копирование массива
const copy = [...arr1]; // [1, 2, 3]Для объектов:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
// Переопределение свойств
const updated = { ...obj1, b: 20 }; // { a: 1, b: 20 }Rest параметры (сбор):
В параметрах функции:
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4); // 10В деструктуризации массивов:
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]В деструктуризации объектов:
const { a, b, ...other } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, other = { c: 3, d: 4 }Практические примеры:
Комбинирование:
function process(first, second, ...others) {
console.log(first, second); // 1, 2
console.log(others); // [3, 4, 5]
}
const numbers = [1, 2, 3, 4, 5];
process(...numbers); // Spread для передачи, rest для сбораКлонирование с исключением:
const original = { a: 1, b: 2, c: 3, d: 4 };
const { b, ...withoutB } = original;
// withoutB = { a: 1, c: 3, d: 4 }