Масиви в JavaScript

Масив – це змінна, яка містить список даних, де кожний його елемент має свій індекс та може буди доступним через цей іддекс. Індексація елементів масиву починається з нуля. Масив може містити в собі різні типи даних: інші масиви (багатовимірні масиви), об’єкти, числа, строки.

Масиви дозволяють зберігати та обробляти великі списки даних, наприклад, список товарів в інтернет-магазині або зберігати профіль користувача

const mixedArray = [
  42,                          // Number
  "Hello",                     // String
  true,                        // Boolean
  null,                        // null
  undefined,                   // undefined
  { name: "John", age: 30 },   // Object
  [1, 2, 3],                   // Array
  function() { return "Hi"; }, // Function
  new Date(),                  // Date
  /pattern/,                   // RegExp
  Symbol('id'),                // Symbol
  123n,                        // BigInt
  NaN,                         // NaN
  Infinity                     // Infinity
];

console.log(mixedArray);

// 1. Масив рядків (імена):
const names = ["Оля", "Андрій", "Марія", "Тарас", "Ірина"];

// 2. Масив чисел:
const ages = [18, 25, 30, 42, 57];

// 3. Змішаний масив (різні типи даних):
const mixed = [ true, "JS", 2023, null, { skill: "coding" } ];

// 4. Масив об’єктів:
const products = [
  { id: 1, name: "Ноутбук", price: 20000 },
  { id: 2, name: "Смартфон", price: 10000 },
  { id: 3, name: "Навушники", price: 800 }
];

// 5. Двовимірний (вкладений) масив:
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Значення в масиві можна зиінювати: видаляти, заміняти, додавати. Зміни можна вносити в сам ориганільний масив спеціальними методами, які і снують в JS для роботи з масивами. Ці методи діляться на 2 групи: ті, які змінюють масив до якого застосовуються і ті, які обробляють масив і повертають новий , залишаючи оригінальний масив у вихідному стані.

Детальніше про основні методи масивів

Основні методи і приклади коду для додавання та видалення елементів

push(): Додає один або більше елементів у кінець масиву і повертає нову довжину масиву. Мутує масив.

pop(): Видаляє останній елемент з масиву і повертає видалений елемент. Мутує масив.

shift(): Видаляє перший елемент з масиву і повертає видалений елемент. Мутує масив.

unshift(): Додає один або більше елементів на початок масиву і повертає нову довжину масиву. Мутує масив.

const numbers = [1, 2, 3];

// Додаємо в кінець
numbers.push(4, 5); // numbers = [1, 2, 3, 4, 5]

// Видаляємо останній
const removed = numbers.pop(); // removed = 5, numbers = [1, 2, 3, 4]

// Видаляємо перший
numbers.shift(); // numbers = [2, 3, 4]

// Додаємо на початок
numbers.unshift(0); // numbers = [0, 2, 3, 4]

Як створити копію масиву

Масиви є reference types у JavaScript. Наприклад, якщо ти робиш const arr2 = arr1;, то це не створює новий масив, а лише посилання на вже існуючий.

У JavaScript існують два основні способи копіювання масивів: глибоке та поверхневе копіювання. Вони відрізняються тим, як копіюються елементи масиву, особливо якщо це об’єкти або вкладені масиви.

Поверхневе копіювання

Поверхневе копіювання створює новий масив, але елементи цього масиву залишаються посиланнями на ті самі об’єкти або масиви, що й у вихідному масиві. Якщо елементи масиву — примітиви (наприклад, числа, рядки, булеві значення), то поверхневого копіювання достатньо. Але якщо елементи — об’єкти або масиви, зміни в новому масиві впливатимуть на вихідний масив.

Способи поверхневого копіювання:

const original = [1, 2, 3, { a: 4 }];
const copy = original.slice();

copy[0] = 100; // Зміна примітиву — оригінал не зміниться
copy[3].a = 99; // Зміна об'єкта — оригінал зміниться
console.log(original); // [1, 2, 3, { a: 99 }]

const original = [1, 2, 3, { a: 4 }];
const copy = [...original];

copy[0] = 100; // Зміна примітиву — оригінал не зміниться
copy[3].a = 99; // Зміна об'єкта — оригінал зміниться
console.log(original); // [1, 2, 3, { a: 99 }]

const original = [1, 2, 3, { a: 4 }];
const copy = Array.from(original);

copy[0] = 100; // Зміна примітиву — оригінал не зміниться
copy[3].a = 99; // Зміна об'єкта — оригінал зміниться
console.log(original); // [1, 2, 3, { a: 99 }]

Детальніше про синтаксис методу slice():

Метод slice() дозволяє створити новий масив, який є копією частини або всього вихідного масиву. Він повертає новий масив, копіюючи до нього всі елементи від індексу start до end (не включаючи end). І start, і end можуть бути відʼємними. В такому випадку відлік буде здійснюватися з кінця масиву. Він приймає два аргументи:

start (опціонально) — індекс, з якого починається копіювання (включно).

end (опціонально) — індекс, на якому копіювання завершується (не включно).

Якщо аргументи не передані, slice() повертає повну копію масиву.

Приклади slice():

const arr = [1, 2, 3, 4, 5];
const copy = arr.slice(); // [1, 2, 3, 4, 5]
console.log(copy); // [1, 2, 3, 4, 5]
console.log(arr === copy); // false (це різні масиви)

const arr = [1, 2, 3, 4, 5];
const slicedCopy = arr.slice(2, 4);
console.log(slicedCopy) //[ 3, 4 ];

const arr = [1, 2, 3, 4, 5];
const part = arr.slice(-3); // [3, 4, 5]
console.log(part); // [3, 4, 5]

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, -1));
//  Array ["camel", "duck"]

Глибоке копіювання масиву

Глибоке копіювання створює повністю новий масив, де всі елементи, включаючи вкладені об’єкти та масиви, також копіюються. Таким чином, зміни в новому масиві не впливають на вихідний масив.

Способи глибокого копіювання:

const original = [1, 2, 3, { a: 4 }];
const copy = JSON.parse(JSON.stringify(original));

copy[0] = 100; // Зміна примітиву — оригінал не зміниться
copy[3].a = 99; // Зміна об'єкта — оригінал не зміниться
console.log(original); // [1, 2, 3, { a: 4 }]

const _ = require('lodash');
const original = [1, 2, 3, { a: 4 }];
const copy = _.cloneDeep(original);

copy[0] = 100; // Зміна примітиву — оригінал не зміниться
copy[3].a = 99; // Зміна об'єкта — оригінал не зміниться
console.log(original); // [1, 2, 3, { a: 4 }]

function deepCopy(arr) {
  return arr.map(item => Array.isArray(item) ? deepCopy(item) : item && typeof item === 'object' ? { ...item } : item);
}

const original = [1, 2, 3, { a: 4 }];
const copy = deepCopy(original);

copy[0] = 100; // Зміна примітиву — оригінал не зміниться
copy[3].a = 99; // Зміна об'єкта — оригінал не зміниться
console.log(original); // [1, 2, 3, { a: 4 }]

Коли використовувати поверхневе і глибоке копіювання масивів?

Поверхневе копіювання: коли елементи масиву — примітиви або коли не потрібно копіювати вкладені об’єкти/масиви.

Глибоке копіювання: коли елементи масиву — об’єкти або масиви, і потрібно повністю ізолювати новий масив від вихідного.

Якщо потрібно працювати з масивом, не змінюючи його, використовуються немутаційні методи або можна створити копію масиву за допомогою slice() або оператора розширення (...):

const copy = [...arr]; // копія масиву

Три способи створення масиву

// 'fruits' масив, створений за допомогою нотації літералів масиву
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

// 'fruits' масив, створений за допомогою нотації літералів масиву
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

3. Створення використовуючи методи

Методи, типу Array.from(), Array.of(), Оператор розширення (...), split() для перетворення рядків в масиви, map(), fill() та інші немутуючі методи, що перечислені вище, можна використовувати для створення нових масивів.

Приклад з використанням методу from():

//З рядка: const arr = Array.from("Hello"); 
console.log(arr); // ['H', 'e', 'l', 'l', 'o'] 

//З множини:
 const set = new Set([1, 2, 3]);
 const arr = Array.from(set); console.log(arr); // [1, 2, 3] 

//З масивоподібного об'єкта:
 const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
 const arr = Array.from(arrayLike);
 console.log(arr); // ['a', 'b', 'c'] 

//З функцією-маппером:
 const arr = Array.from([1, 2, 3], x => x * 2);
 console.log(arr); // [2, 4, 6]

Об’єкт Set в прикладі вище — це вбудована в JavaScript колекція, яка представляє собою набір унікальних значень. Він схожий на масив, але має кілька ключових відмінностей. Давайте розглянемо детальніше, що таке Set, як він працює і як він пов’язаний з об’єктами та масивами.

Set — це колекція, яка зберігає лише унікальні значення. Це означає, що в ньому не може бути двох однакових елементів. Наприклад, якщо ви додасте число 5 двічі, воно збережеться лише один раз.

Основні характеристики:

1. Унікальність: Усі значення в Set є унікальними.
2. Ітерабельність: Set можна перебирати за допомогою циклів або методів, таких як forEach.
3. Немає індексів: На відміну від масивів, Set не має індексів, тому елементи не можна отримати за індексом.
4. Методи для роботи з елементами: Set має методи для додавання, видалення та перевірки наявності елементів.

Як створити Set?

Set створюється за допомогою конструктора new Set(). У конструктор можна передати ітерабельний об’єкт (наприклад, масив), і тоді Set автоматично додасть унікальні елементи з цього об’єкта.

Наприклад, тут число 4 додається лише один раз, оскільки Set зберігає лише унікальні значення:

const mySet = new Set([1, 2, 3, 4, 4, 5]);
console.log(mySet); // Set { 1, 2, 3, 4, 5 }

Основні методи та властивості Set

const mySet = new Set();
mySet.add(1);
mySet.add(2);
console.log(mySet); // Set { 1, 2 }

mySet.delete(1);
console.log(mySet); // Set { 2 }

console.log(mySet.has(2)); // true
console.log(mySet.has(3)); // false

mySet.clear();
console.log(mySet); // Set {}

const mySet = new Set([1, 2, 3]);
console.log(mySet.size); // 3

Як Set пов’язаний з масивами та об’єктами?

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueSet = new Set(arr);
console.log(uniqueSet); // Set { 1, 2, 3, 4, 5 }

const uniqueArr = Array.from(uniqueSet);
// або
const uniqueArr = [...uniqueSet];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

const obj1 = { name: "John" };
const obj2 = { name: "John" };

const mySet = new Set();
mySet.add(obj1);
mySet.add(obj2);

console.log(mySet.size); // 2 (об'єкти вважаються різними)

Приклади використання Set

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

const mySet = new Set([1, 2, 3]);
console.log(mySet.has(2)); // true

3. Зберігання унікальних об’єктів:

const obj1 = { name: "John" };
const obj2 = { name: "Jane" };

const mySet = new Set();
mySet.add(obj1);
mySet.add(obj2);

console.log(mySet.size); // 2

88

Метод Array.of()

 створює масив з переданих аргументів. Він корисний, коли потрібно створити масив з одного числа (на відміну від new Array(), який у такому випадку створить порожній масив з указаною довжиною).

const arr = Array.of(5);
console.log(arr); // [5]

Оператор розширення (...)

дозволяє створити новий масив на основі існуючого масиву або іншого ітерабельного об’єкта.

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

Об’єднання масивів:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

З ітерабельного об’єкта:

const str = "Hello";
const arr = [...str];
console.log(arr); // ['H', 'e', 'l', 'l', 'o']

Метод split()

Якщо у вас є рядок, який потрібно перетворити на масив, можна використовувати метод split().

const str = "apple,banana,orange";
const arr = str.split(',');
console.log(arr); // ['apple', 'banana', 'orange']

Генерація масиву за допомогою Array() та map()

const arr = [1, 2, 3, 4, 5];
const part = arr.slice(-3); // [3, 4, 5]
console.log(part); // [3, 4, 5]

Якщо потрібно створити масив із певною кількістю елементів, які генеруються динамічно, можна використовувати комбінацію Array(), fill() та map().

Масив чисел від 0 до 9:

const arr = Array(10).fill().map((_, index) => index);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Масив квадратів чисел:

const arr = Array(5).fill().map((_, index) => (index + 1) ** 2);
console.log(arr); // [1, 4, 9, 16, 25]

Генерація масиву за допомогою Array.from() та функції-мапера

Метод Array.from() також дозволяє створити масив із функцією-мапером, яка генерує елементи.

Масив чисел від 0 до 9:

const arr = Array.from({ length: 10 }, (_, index) => index);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
//створює масив із 10 елементів, де кожен елемент дорівнює своєму індексу.
//_ — це позначення для невикористовуваного аргументу (поточного елемента).
//index — це індекс поточного елемента, який повертається як значення елемента масиву.
//Функція повертає значення, яке буде записане в масив на місці поточного елемента.

Масив парних чисел:

const arr = Array.from({ length: 5 }, (_, index) => index * 2);
console.log(arr); // [0, 2, 4, 6, 8]

Що означає _?

У JavaScript _ — це просто ім’я змінної. У цьому контексті воно використовується для позначення аргументу, який не використовується. Це поширена практика, щоб показати, що значення ігнорується. Наприклад: const func = (_, index) => index; Ця функція приймає два аргументи, але використовує лише index. Перший аргумент (_) ігнорується. Якщо ви не хочете використовувати _, можна просто опустити перший аргумент: const arr = Array.from({ length: 10 }, (index) => index);

Коли використовувати метод літерал масиву і коли – конструктор?

Ітерація масивів

Ітерації масивів використовуються для для того, щоб послідовно обробляти кожен елемент масиву. Зокрема, це дозволяє:

1. Переглядати або виводити значення масиву (наприклад, console.log()).
2. Змінювати кожен елемент за потреби (наприклад, множити всі числа на 2).
3. Збирати потрібні дані в нову структуру (наприклад, створювати інший масив або підраховувати загальне значення).
4. Фільтрувати масив, відбираючи лише ті елементи, що відповідають певній умові.
5. Трансформувати дані за допомогою різних методів (наприклад, map, reduce, filter) і отримувати новий результат.

Ітерації допомагають виконувати практично будь-які операції над кожним елементом масиву — від простої перевірки до складної обробки даних.

Приклади ітерації масивів

const arr = [2, -1, 5, 0, 7];
const positiveDoubled = [];

for (let i = 0; i < arr.length; i++)
 { if (arr[i] > 0)
 {positiveDoubled.push(arr[i] * 2);}}

console.log(positiveDoubled);
// Результат: [4, 10, 14]

const arr = [2, -1, 5, 0, 7];
const squares = [];

for (const item of arr) {
  squares.push(item * item);}

console.log(squares); 
// Результат: [4, 1, 25, 0, 49]

const arr = [1, 2, 3, 4]; // Масив, по якому будемо ітерувати.
let i = 0; // Ініціалізація лічильника індексів масиву. Спочатку він дорівнює 0.

while (i < arr.length) {  // Умова циклу: поки i менше довжини масиву, будемо ітерувати.
    console.log(arr[i]);  // Виводимо елемент масиву з індексом i.
    i++;  // Інкрементуємо lічильник i на 1.
}

const arr = [1, 2, 3, 4]; // Масив, по якому будемо ітерувати.
let i = 0; // Ініціалізація лічильника індексів масиву.

do {
    console.log(arr[i]);  // Виводимо елемент масиву з індексом i.
    i++;  // Інкрементуємо лічильник i на 1.
} while (i < arr.length);  // Умова: поки i менше довжини масиву, ітерація продовжується.

const arr = [1, 2, 3, 4];
arr.forEach(function(num) {
    console.log(num);  // Виведе 1, 2, 3, 4
});

const arr = [1, 2, 3, 4];
const doubled = arr.map(num => num * 2);
console.log(doubled);  // Виведе [2, 4, 6, 8]

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const evenArr = arr.filter(function(num) {
    return num % 2 === 0;  // Повертає true, якщо число парне
});

console.log(evenArr);  // Виведе: [2, 4, 6, 8]

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce(function(acc, num) {
    return acc + num;  // Додаємо поточне значення до акумулятора
}, 0);

console.log(sum);  // Виведе: 15

Деструктуризація масивів та спред-оператор

Деструктуризація масиву — це синтаксис у JavaScript, який дозволяє “розпаковувати” значення з масиву в окремі змінні. Це дуже зручний спосіб отримати доступ до елементів масиву без необхідності звертатися до них за індексами вручну. ЇЇ використовують коли необхідно витягнути декілька елементів масиву. Якщо потрібно для роботи багато елементва масиву, то тоді деструктуризацію не використовують, а роблять це за допомогою інших методів масивів та ітерації, пояснених вище.

Синтаксис для деструктуризації

Припустимо, у нас є масив:

const arr = [1, 2, 3];

Зазвичай, щоб отримати елементи масиву, ми робимо так:

const first = arr[0];
const second = arr[1];
const third = arr[2];

З деструктуризацією це можна зробити набагато простіше:

const [first, second, third] = arr;

Тепер:

• first дорівнює 1,
• second дорівнює 2,
• third дорівнює 3.

Спред-оператор (...) дозволяє розпакувати елементи з масивів або об’єктів в нові структури даних. Він використовується для копіювання, об’єднання масивів, додавання нових елементів до масивів, а також для передачі елементів як аргументів у функції. Спред-оператор може бути дуже корисним для роботи з масивами, оскільки він дозволяє здійснювати маніпуляції з даними в компактний та зрозумілий спосіб.

Загальний вигляд:

const newArray = [...existingArray];

Спред-оператор дозволяє створити копію масиву. Це корисно, коли вам потрібно змінити новий масив, не змінюючи оригінал. Наприклад:

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Копіюємо всі елементи з arr1 в arr2

arr2.push(4); // Додаємо новий елемент у arr2

console.log(arr1); // Виведе: [1, 2, 3]
console.log(arr2); // Виведе: [1, 2, 3, 4]

Пояснення:

1. Ми використовуємо спред-оператор для копіювання всіх елементів масиву arr1 у новий масив arr2.
2. Оскільки це поверхневе копіювання, зміни в arr2 не впливають на arr1.

Спред-оператор дозволяє об’єднувати два або більше масивів в один. Наприклад:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = [...arr1, ...arr2]; // Об'єднуємо два масиви

console.log(combinedArr); // Виведе: [1, 2, 3, 4, 5, 6]

Ви можете використовувати спред-оператор для додавання елементів в середині масиву або на початку чи в кінці:

const arr = [2, 3, 4];

// Додаємо елемент на початок масиву
const newArrStart = [1, ...arr]; 
console.log(newArrStart); // Виведе: [1, 2, 3, 4]

// Додаємо елемент в кінець масиву
const newArrEnd = [...arr, 5];
console.log(newArrEnd); // Виведе: [2, 3, 4, 5]

Пояснення:

1. Спочатку ми додаємо елемент 1 на початок масиву arr за допомогою спред-оператора.
2. Потім додаємо елемент 5 в кінець масиву arr за допомогою спред-оператора.

Спред-оператор можна використовувати для “розпакування” елементів масиву в функціях або конструкторах.

const arr = [1, 2, 3, 4];

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

console.log(sum(...arr));  // Виведе: 10

Пояснення:

1. Ми передаємо масив arr у функцію sum() за допомогою спред-оператора, який розпаковує елементи масиву як окремі аргументи.
2. Функція отримує ці елементи як окремі аргументи a, b, c, d і виконує операцію над ними.

Спред-оператор у функціях з невизначеною кількістю аргументів (Rest/Spread)
Якщо у вас є функція, яка приймає декілька параметрів, спред-оператор може допомогти вам зібрати аргументи в масив. Це також відомо як Rest-оператор. Приклад:

function printAll(...args) {
    console.log(args);
}

printAll(1, 2, 3, 4); // Виведе: [1, 2, 3, 4]

Пояснення:

1. Оператор ...args збирає всі передані аргументи в масив args.
2. У цьому випадку, всі числа передаються у вигляді масиву.

Спред-оператор у поєднанні з іншими методами

Ви можете не тільки копіювати масив, а й модифікувати елементи під час його копіювання за допомогою спред-оператора. Наприклад:

const arr = [1, 2, 3, 4];

// Створюємо новий масив, де замінюємо третій елемент
const modifiedArr = [...arr.slice(0, 2), 100, ...arr.slice(3)];

console.log(modifiedArr);  // Виведе: [1, 2, 100, 4]

Пояснення:

1. Спочатку за допомогою методу slice(0, 2) ми копіюємо перші два елементи.
2. Потім ми вставляємо значення 100 на третє місце.
3. В кінці використовуємо slice(3) для копіювання елементів з індексу 3 і далі.

Приклади деструктуризації

const arr = [1, 2, 3, 4, 5];
const [first, , third] = arr;

console.log(first); // 1
console.log(third); // 3

const arr = [1, 2, 3, 4, 5];
const [first, second, ...rest] = arr;

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

const arr = [1, 2];
const [first, second, third = 3] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3 (значення за замовчуванням)

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

const arr = [1, [2, 3], 4];
const [first, [second, third], fourth] = arr;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
];

for (const { name, age } of users) {
  console.log(`${name} is ${age} years old.`);
}

7. Деструктуризація з функцій

Деструктуризація також може бути використана для отримання значень, які повертаються з функцій:

function getNumbers() {
  return [1, 2, 3];
}

const [first, second, third] = getNumbers();

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

Переваги деструктуризації

1. Скорочення коду: Не потрібно вручну звертатися до елементів масиву за індексами.
2. Зручність: Легко отримувати значення з вкладених структур.
3. Читабельність: Код стає більш зрозумілим і лаконічним.

Обмеження деструктуризації

1. Якщо масив коротший, ніж кількість змінних, “зайві” змінні отримають значення undefined.
2. Якщо ви намагаєтеся деструктуризувати щось, що не є ітерабельним (наприклад, null або undefined), виникне помилка.

Питання по масивах, які потрібно знати

Як об’єднати два масиви?

Для цього використовується метод concat() або оператор розпакування:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
// або
const combined2 = [...arr1, ...arr2];

Яка різниця між спред оператором та оператором розпакування?

Спред-оператор та оператор розпакування можуть здатися схожими, оскільки обидва використовують один і той самий синтаксис (...). Однак ці терміни використовуються в різних контекстах і мають різне застосування.

1. Спред-оператор (Spread Operator)

Спред-оператор використовується для розпакування елементів з масивів або об’єктів, щоб передати їх або вставити в інші структури даних.

Використання в масивах:

Спред-оператор застосовується, коли ви хочете об’єднати масиви, скопіювати масив або додати елементи до масиву.

Приклад:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Об'єднуємо два масиви в один
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr);  // Виведе: [1, 2, 3, 4, 5, 6]

Використання в об’єктах:

Спред-оператор також може бути використаний для клонування об’єктів або об’єднання об’єктів.

Приклад:

const obj1 = { name: 'John', age: 30 };
const obj2 = { city: 'New York' };

// Об'єднуємо два об'єкти
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj);  // Виведе: { name: 'John', age: 30, city: 'New York' }

2. Оператор розпакування (Rest Operator)

Оператор розпакування — це також синтаксис ..., але він використовується для збирання елементів, а не для їх “розпакування”. Це дозволяє зібрати невизначену кількість аргументів у масив або об’єкт.

Використання в масивах:

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

Приклад:

function sum(a, b, ...rest) {
    console.log(a, b);  // Виведе: 1 2
    console.log(rest);  // Виведе: [3, 4, 5]
}

sum(1, 2, 3, 4, 5);

У цьому прикладі:

• Перші два аргументи (a і b) отримують значення 1 і 2.
• Оператор ...rest збирає решту аргументів у масив.

Використання в об’єктах:

Оператор розпакування можна також застосовувати до об’єктів для збирання залишкових властивостей.

Приклад:

const obj1 = { name: 'John', age: 30, city: 'New York' };
const { name, ...rest } = obj1;

console.log(name);  // Виведе: 'John'
console.log(rest);  // Виведе: { age: 30, city: 'New York' }

У цьому випадку:

• З об’єкта obj1 ми витягнули властивість name, а решту властивостей зібрали у об’єкт rest.

Висновок

Масиви в JavaScript — це потужний інструмент для зберігання та обробки наборів даних. Вони дозволяють ефективно працювати з різними типами даних і забезпечують зручний доступ до елементів через індексацію. Завдяки численним методам для маніпуляції даними, таким як push(), pop(), map(), filter() та іншим, масиви стали незамінним інструментом у розробці сучасних веб-додатків. Зрозумівши основи роботи з масивами та їхні можливості, ви зможете значно підвищити ефективність вашого коду та значно полегшити обробку великих обсягів інформації.