Оператори rest і spread у

Про концепцію Оператори rest і spread

У JavaScript є вбудований оператор ..., який полегшує роботу з невизначеною кількістю елементів. Залежно від контексту його називають або оператором решти, або оператором розширення.

Оператор решти

Елементи решти

Коли ... стоїть у лівій частині присвоєння, ці три крапки називають оператором rest. Три крапки разом із назвою змінної називають елементом решти. Він збирає нуль або більше значень і зберігає їх в одному масиві.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

Зауважмо, що в JavaScript, на відміну від деяких інших мов, елемент rest не може мати коми в кінці. Він обовʼязково має бути останнім елементом у присвоєнні з деструктуризацією. Наведений нижче приклад спричиняє помилку SyntaxError:

const [...items, last] = [2, 4, 8, 16]

Властивості решти

Так само, як і з масивами, оператор решти можна використати, щоб зібрати одну або більше властивостей обʼєкта й зберегти їх в одному обʼєкті.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Параметри решти

Коли ... стоїть у визначенні функції поруч з її останнім аргументом, такий параметр називають параметром решти. Він дозволяє функції приймати невизначену кількість аргументів як масив.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Розширення

Елементи розширення

Коли ... стоїть у правій частині присвоєння, його називають оператором spread. Він розгортає масив у список елементів. На відміну від елемента решти, він може стояти будь-де у виразі літерала масиву, і таких операторів може бути більше ніж один.

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

Властивості розширення

Так само, як і з масивами, оператор розширення можна використати, щоб копіювати властивості з одного обʼєкта в інший.

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }