Hack Frontend Community

Операторы Spread и Rest в JavaScript: отличия и примеры

В JavaScript операторы spread и rest используют синтаксис ..., но их назначение зависит от контекста, в котором они применяются.

  • Spread — оператор развёртывания, который распаковывает массивы или объекты, позволяя копировать, объединять и передавать их элементы.
  • Rest — оператор сбора, который собирает оставшиеся элементы в массив или объект, когда необходимо объединить несколько значений в одну переменную.

Оператор Spread

Spread применяется для:

Копирования или объединения массивов

  const numbers = [1, 2, 3];
  const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

Копирования или объединения объектов

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

Передачи элементов массива в функцию как отдельные аргументы

function sum(a, b, c) {
  return a + b + c;
}

const values = [1, 2, 3];
console.log(sum(...values)); // 6

Оператор Rest

Rest используется для:

Сбора аргументов функции в массив

function multiply(multiplier, ...numbers) {
  return numbers.map(num => num * multiplier);
}

console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

Деструктуризации массивов

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

Деструктуризации объектов

const { a, b, ...restProps } = { a: 10, b: 20, c: 30, d: 40 };
console.log(a);         // 10
console.log(b);         // 20
console.log(restProps); // { c: 30, d: 40 }

Отличия Spread и Rest

Синтаксис

Оба оператора используют ..., но:

  • Spread распаковывает значения массива или свойства объекта.
  • Rest собирает оставшиеся элементы или свойства в массив или объект.

Применение

  • Spread используется при вызове функций, копировании или объединении массивов и объектов.
  • Rest используется в параметрах функции для сбора аргументов, а также в деструктуризации для отделения оставшихся элементов.

Итог

  • Spread позволяет «разворачивать» массивы или объекты, облегчая их копирование и объединение.
  • Rest позволяет «собирать» множество значений в один массив или объект, что удобно при передаче переменного числа аргументов или при деструктуризации.

Эти операторы делают код более гибким, лаконичным и понятным, помогая эффективно управлять коллекциями данных в JavaScript.