Оператори розповсюдження та залишку в JavaScript: відмінності та приклади

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

Spread — оператор розпакування, який розпаковує масиви або об'єкти, дозволяючи копіювати, об'єднувати та передавати їх елементи.
Rest — оператор збору, який збирає залишкові елементи в масив або об'єкт, коли потрібно об'єднати кілька значень в одну змінну.

Spread Operator

Spread використовується для:

Копіювання або об'єднання масивів

javascript

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

Копіювання або об'єднання об'єктів

javascript

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

Передача елементів масиву до функції як окремих аргументів

javascript

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

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

Rest Operator

Rest використовується для:

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

javascript

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

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

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

javascript

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

Деструктуризації об'єкта

javascript

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 vs Rest Відмінності

Синтаксис

Обидва оператори використовують ..., але:

Spread розпаковує значення масиву або пропси об'єкта.
Rest збирає залишкові елементи або пропси в масив або об'єкт.

Використання

Spread використовується при викликах функцій, копіюванні або об'єднанні масивів та об'єктів.
Rest використовується в параметрах функцій для збору аргументів, а також у деструктуризації для відокремлення залишкових елементів.

Резюме

Spread дозволяє "розпаковувати" масиви або об'єкти, спрощуючи копіювання та об'єднання.
Rest дозволяє "збирати" кілька значень в один масив або об'єкт, що зручно для передачі змінної кількості аргументів або деструктуризації.

Ці оператори роблять код більш гнучким, лаконічним і зрозумілим, допомагаючи ефективно управляти колекціями даних у JavaScript.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань