Операторы rest и spread ( ... ) в JavaScript

Оператор … (rest или spread) используется по-разному, в зависимости от контекста применения:

spread (распространение) - для разделения коллекций значений на отдельные элементы;
rest (остаток) - для соединения отдельных значений (элементов) в массив (объект) ( rest оператор всегда возвращает массив, а не псевдомассив).

Использование оператора spread ( ... )

Получение клона массива:

const members = ["Alex", ["login", "age"]]; // исходный массив

// Получение клона массива
const [...newMembers] = members; // здесь деструктуризация (spread)
// или
const newMembers = [...members]; // здесь разложение массива members на элементы (spread)

console.log(newMembers); // Array(3) [ "Alex", ["login", "age"]] (клон массива)

// Проверка клонирования
console.log(members === newMembers); // false
members[1] = "Olga";
console.log("members: ", members); // members: Array [ "Alex", "Olga" ]
console.log("newMembers: ", newMembers); // newMembers: Array [ "Alex", (2) […] ]

const members = ["Alex", ["login", "age"]]; // исходный массив

// Получение клона массива

const [...newMembers] = members; // здесь деструктуризация (spread)

// или

const newMembers = [...members]; // здесь разложение массива members на элементы (spread)

console.log(newMembers); // Array(3) [ "Alex", ["login", "age"]] (клон массива)

// Проверка клонирования

console.log(members === newMembers); // false

members[1] = "Olga";

console.log("members: ", members); // members: Array [ "Alex", "Olga" ]

console.log("newMembers: ", newMembers); // newMembers: Array [ "Alex", (2) […] ]

Клонирование массива с добавлением (изменением) элементов:

// Добавление элемента
const members = ["Alex", ["login", "age"]]; // исходный массив

const newMembers = [...members, 'newAge']; // (spread)
console.log(newMembers); // Array(3) [ "Alex", (2) […], "newAge" ]

// Добавление элемента

const members = ["Alex", ["login", "age"]]; // исходный массив

const newMembers = [...members, 'newAge']; // (spread)

console.log(newMembers); // Array(3) [ "Alex", (2) […], "newAge" ]

// Изменение значения элемента
const user = {
  firstName: "Alex",
  lastName: "NAV",
  age: 35,
  info: { adress: "Russia", skills: ["JavaScript", "teacher"] }
};
let newUser = { ...user, firstName: "Olga" }; // spread
console.log(newUser); // Object { firstName: "Olga", lastName: "NAV", age: 35, info: {…} }

// Изменение значения элемента

const user = {

firstName: "Alex",

lastName: "NAV",

age: 35,

info: { adress: "Russia", skills: ["JavaScript", "teacher"] }

};

let newUser = { ...user, firstName: "Olga" }; // spread

console.log(newUser); // Object { firstName: "Olga", lastName: "NAV", age: 35, info: {…} }

Передача аргументов в функцию (метод):

function sum(a = 1, b = 1) {
  console.log(a + b);
}

let numbers = [2, 8];
sum(...numbers); // 10

function sum(a = 1, b = 1) {

console.log(a + b);

}

let numbers = [2, 8];

sum(...numbers); // 10

let numbers = [5, 9, 3, 5, 7];

Math.min(...numbers); // 3
Math.max(...numbers); // 9

let numbers = [5, 9, 3, 5, 7];

Math.min(...numbers); // 3

Math.max(...numbers); // 9

Преобразование строки в последовательность символов:

console.log(...'restObject'); // r e s t O b j e c t

1	console.log(...'restObject'); // r e s t O b j e c t

Удаление повторяющихся элементов из массива:

let numbers = [1, 35, 1, 3, 3, 1];
let uniqueNum = [... new Set (numbers)];
console.log(uniqueNum); // (3) [1, 35, 3]

let numbers = [1, 35, 1, 3, 3, 1];

let uniqueNum = [... new Set (numbers)];

console.log(uniqueNum); // (3) [1, 35, 3]

Значение элемента в Set может присутствовать только в одном экземпляре, что обеспечивает его уникальность в коллекции Set.

Преобразование коллекции DOM элементов в массив:

let links = [...document.querySelectorAll("a")];

// или 
let links = [...document.links];

Array.isArray(links); // true

let links = [...document.querySelectorAll("a")];

// или

let links = [...document.links];

Array.isArray(links); // true

Использование оператора rest ( ... )

Присвоение части значений элементов массива переменным с одновременной передачей оставшихся элементов в массив:

const members = ["Alex", "login", "age"]; // исходный массив

// Деструктурируем массив, получаем первый элемент и отправляем остальные в массив others
const [firstNam, ...others] = members; // (rest собирает массив others)

console.log(firstNam); // Alex
console.log(others); // Array [ "NAV", "age 35" ]

const members = ["Alex", "login", "age"]; // исходный массив

// Деструктурируем массив, получаем первый элемент и отправляем остальные в массив others

const [firstNam, ...others] = members; // (rest собирает массив others)

console.log(firstNam); // Alex

console.log(others); // Array [ "NAV", "age 35" ]

let numbers = [5, 9, 3, 5, 7];

let [firstNumbers, ...restNumbers] = numbers;

console.log(firstNumbers); // 5
console.log(restNumbers); // (4) [9, 3, 5, 7]

let numbers = [5, 9, 3, 5, 7];

let [firstNumbers, ...restNumbers] = numbers;

console.log(firstNumbers); // 5

console.log(restNumbers); // (4) [9, 3, 5, 7]

rest оператор в деструктурирующем приравнивании может располагаться только в конце выражения (перед закрывающей квадратной скобкой).

При деструктуризации объектов:

const firstObject = {
  userName: "Serg",
  userAge: 35,
};

let {userName, ...restObject} = firstObject; // помещаем оставшиеся свойства в объект restObject

console.log(userName); // Serg
console.log(restObject); // {userAge: 35}

const firstObject = {

userName: "Serg",

userAge: 35,

};

let {userName, ...restObject} = firstObject; // помещаем оставшиеся свойства в объект restObject

console.log(userName); // Serg

console.log(restObject); // {userAge: 35}

Ещё об использовании rest (остаток) и spread (расширение)