Вступ
У JavaScript є вбудований оператор ..., який спрощує роботу з невизначеною кількістю елементів. Залежно від контексту його називають оператором решти або оператором розширення.
Оператор решти
Елементи решти
Коли ... стоїть у лівій частині присвоєння, ці три крапки називають оператором rest. Три крапки разом із назвою змінної утворюють елемент решти. Він збирає нуль або більше значень і зберігає їх в одному масиві.
const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];
a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]
Зауважмо, що в JavaScript, на відміну від деяких інших мов, елемент решти не може мати коми в кінці. Він мусить бути останнім елементом у деструктуризаційному присвоєнні. Наведений нижче приклад викликає помилку 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',
// }
Вказівки
Ваш друг Лінус - машиніст, який водить вантажні потяги між містами.
Хоча він чудово дає раду потягам, він зовсім не такий сильний у логістиці чи компʼютерах.
Він хотів би скористатися вашою допомогою з програмування, щоб упорядкувати дані про потяги та виправити помилки в даних про маршрути.
Для практики використайте оператор решти або розгортання, щоб розвʼязати кожне із завдань нижче.
1. Створіть список усіх вагонів
Ваш друг досі записував ідентифікатори (ID) кожного вагона, але він ніколи не знає наперед, скільки вагонів системі доведеться обробити в той чи інший момент.
Було б набагато простіше для решти логістичної програми, якби ці дані були зібрані в один array.
Реалізуйте функцію getListOfWagons, яка приймає довільну кількість ID вагонів, тобто ідентифікаторів кожного вагона.
Кожен ID буде додатним цілим числом.
Функція має повернути ці ID як один array.
getListOfWagons(1, 7, 12, 3, 14, 8, 5);
// => [1, 7, 12, 3, 14, 8, 5]
2. Перемістіть перші два елементи в кінець масиву
На цьому етапі ми вже починаємо відчувати, як влаштовані ці дані та як вони використовуються в логістичній програмі.
Система ID завжди присвоює локомотиву ID 1, а решті вагонів у потязі - випадково вибраний ID, більший за 1.
Ваш друг причепив до потяга два нові вагони й забув оновити систему!
Тепер перші два вагони в масиві array потрібно перемістити в кінець, інакше весь порядок зібʼється.
Лінус був би дуже вдячний, якби ми виправили його помилки.
Реалізуйте функцію fixListOfWagons, яка приймає масив з ID кожного вагона.
Вона return-ить array, у якому перші 2 елементи переставлено в кінець array, щоб локомотив опинився попереду.
eachWagonsID = [2, 5, 1, 7, 4, 12, 6, 3, 13];
fixListOfWagons(eachWagonsID);
// => [1, 7, 4, 12, 6, 3, 13, 2, 5]
3. Додайте відсутні значення
Ой лихо, схоже, кілька вагонів зникло.
На щастя, ваш друг щойно знайшов інший array, у якому, схоже, є ID зниклих вагонів, і хотів би, щоб ми додали їх до основного array з ID вагонів.
Він памʼятає лише те, що відсутні значення слід розмістити одразу після позначеного локомотива.
З огляду на цю нову інформацію напишіть функцію correctListOfWagons, яка приймає як аргументи два масиви з ID кожного вагона.
ID вагонів з другого array потрібно додати до першого array одразу після локомотива (ID 1).
eachWagonsID = [1, 5, 20, 7, 4, 8];
missingWagons = [3, 17, 6, 15];
correctListOfWagons(eachWagonsID, missingWagons);
// => [1, 3, 17, 6, 15, 5, 20, 7, 4, 8]
Тепер, коли всі дані про вагони правильні, ваш друг хотів би, щоб ми оновили інформацію про маршрути в системі.
Початкову інформацію про маршрут було створено як object, і ваш друг хотів би, щоб ми оновили її наданими доповненнями.
Кожен маршрут потребує трохи іншої інформації, тож ваш друг дуже хотів би мати універсальне рішення.
Реалізуйте функцію extendRouteInformation, яка приймає два objects.
Перший object містить міста, між якими проходить маршрут потяга.
Другий object містить інші подробиці маршруту, як-от швидкість або довжину потяга.
Функція має повернути обʼєднаний object з усією інформацією про маршрут.
Змінна moreRouteInformation може містити різні властивості.
route = { from: 'Berlin', to: 'Hamburg' };
moreRouteInformation = { length: '100', speed: '50' };
extendRouteInformation(route, moreRouteInformation);
// => {from: "Berlin", to: "Hamburg", length: "100", speed: "50"}
Ваш друг помітив, що час прибуття в інформації про маршрут йому не потрібен.
Тож він хотів би, щоб ми відокремили час прибуття від інформації про маршрут.
Реалізуйте функцію separateTimeOfArrival, яка приймає обʼєкт з інформацією про маршрут.
Функція має повернути масив, першим елементом якого є час прибуття, а другим - обʼєкт з інформацією про маршрут без часу прибуття.
routeInformation = {
from: 'Berlin',
to: 'Hamburg',
length: '100',
timeOfArrival: '10:10',
};
separateTimeOfArrival(routeInformation);
// => ["10:10", {from: "Berlin", to: "Hamburg", length: "100"}]
Навчальна вправа
