Spread (разворачивает)

Используется в выражениях (в вызове функции, в литералах массива/объекта).

• Массивы

const a = [1,2,3];
const b = [0, ...a, 4];          // [0,1,2,3,4]
const copy = [...a];              // поверхностная копия

• Объекты

const base = {a:1, b:2};
const obj  = {...base, b:9, c:3}; // {a:1,b:9,c:3} (правые перезаписывают левые)

• Вызов функции

const nums = [5, 7, 2];
Math.max(...nums);                // 7

rest (собирает)

Используется в объявлениях (параметры функций и левая часть деструктуризации).

• Параметры функции

function sum(...nums){ return nums.reduce((a,n)=>a+n,0); }
sum(1,2,3); // 6

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

const [head, ...tail] = [1,2,3,4]; // head=1, tail=[2,3,4]

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

const {password, ...publicUser} = user; // исключили поле

Типовые приёмы

• Иммутабельное обновление объекта

const next = {...state, loading: true};

• Удалить поле из объекта

const {removeMe, ...clean} = obj;

Поле removeMe извлекается в отдельную переменную, а оператор ...clean собирает все остальные собственные перечислимые свойства объекта obj в новый объект clean. Исходный obj не мутируется.

Пример

const obj = { a: 1, removeMe: 2, b: 3 };

const { removeMe, ...clean } = obj;
// removeMe === 2
// clean === { a: 1, b: 3 }
// obj осталось { a: 1, removeMe: 2, b: 3 }

Если значение removeMe не нужно, часто пишут «заглушку»:

const { removeMe: _, ...clean } = obj;

• Склеить массивы

const merged = [...xs, ...ys];