Масив – це змінна, яка містить список даних, де кожний його елемент має свій індекс та може буди доступним через цей іддекс. Індексація елементів масиву починається з нуля. Масив може містити в собі різні типи даних: інші масиви (багатовимірні масиви), об’єкти, числа, строки.
Масиви дозволяють зберігати та обробляти великі списки даних, наприклад, список товарів в інтернет-магазині або зберігати профіль користувача
Приклад масиву з різними типами даних:
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(…elements)— додає один або більше елементів на початок масиву.splice(start, deleteCount ,…items, …items,…items)— додає, видаляє або замінює елементи в масиві за вказаним індексом. Повертає масив вилучених елементів.reverse()— змінює порядок елементів у масиві на зворотний. Повертає посилання на змінений масив.sort(compareFunction)— сортує елементи масиву (за замовчуванням як рядки). Повертає посилання на відсортований масив.fill(value, start, end)— заповнює всі елементи масиву від початкового до кінцевого індексу одним значенням.copyWithin(target, start, end)– копіює послідовність елементів масиву всередині масиву з позицій[start, end)на позиціюtarget. Повертає посилання на змінений масив.
Методи, що не мутують масив
concat()— повертає новий масив, який є результатом об’єднання двох або більше масивів.slice()— повертає новий масив, який містить копію частини вихідного масиву.map()— повертає новий масив, який є результатом застосування функції до кожного елемента вихідного масиву.filter()— повертає новий масив, який містить елементи, що задовольняють умову.reduce()— повертає одне значення, яке є результатом застосування функції до кожного елемента масиву.reduceRight()— аналогreduce(), але обробляє масив справа наліво.flat()— повертає новий масив, у якому всі підмасиви “вирівняні” до вказаної глибини.flatMap()— комбінуєmap()іflat(), повертає новий масив.join()— повертає рядок, який є результатом об’єднання всіх елементів масиву.toString()— повертає рядкове представлення масиву.indexOf()— повертає індекс першого знайденого елемента або-1, якщо елемент не знайдено.lastIndexOf()— повертає індекс останнього знайденого елемента або-1, якщо елемент не знайдено.includes()— повертаєtrueабоfalse, залежно від того, чи міститься елемент у масиві.find()— повертає перший елемент, який задовольняє умову, абоundefined.findIndex()— повертає індекс першого елемента, який задовольняє умову, або-1.every()— повертаєtrue, якщо всі елементи задовольняють умову.some()— повертаєtrue, якщо хоча б один елемент задовольняє умову.
Детальніше про основні методи масивів
Основні методи і приклади коду для додавання та видалення елементів
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 існують два основні способи копіювання масивів: глибоке та поверхневе копіювання. Вони відрізняються тим, як копіюються елементи масиву, особливо якщо це об’єкти або вкладені масиви.
Поверхневе копіювання
Поверхневе копіювання створює новий масив, але елементи цього масиву залишаються посиланнями на ті самі об’єкти або масиви, що й у вихідному масиві. Якщо елементи масиву — примітиви (наприклад, числа, рядки, булеві значення), то поверхневого копіювання достатньо. Але якщо елементи — об’єкти або масиви, зміни в новому масиві впливатимуть на вихідний масив.
Способи поверхневого копіювання:
Використання slice():
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 }]Використання Array.from():
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"]Тут slice бере елементи з індексу 2 (значення camel) до індексу -1 (останній елемент включається, тому результат — ["camel", "duck"]).
Глибоке копіювання масиву
Глибоке копіювання створює повністю новий масив, де всі елементи, включаючи вкладені об’єкти та масиви, також копіюються. Таким чином, зміни в новому масиві не впливають на вихідний масив.
Способи глибокого копіювання:
Використання JSON.parse(JSON.stringify()):
Цей метод працює для масивів, які містять лише примітиви, об’єкти та інші масиви, але не підтримує функції, undefined, Symbol або об’єкти з циркулярними посиланнями.
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 }]Використання бібліотек (наприклад, Lodash):
Бібліотека Lodash має функцію _.cloneDeep, яка реалізує глибоке копіювання.
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]; // копія масиву
Три способи створення масиву
1. Літерал масиву
// 'fruits' масив, створений за допомогою нотації літералів масивуconst fruits = ["Apple", "Banana"];console.log(fruits.length);// 22. Конструктор Array()
// 'fruits' масив, створений за допомогою нотації літералів масивуconst fruits = ["Apple", "Banana"];console.log(fruits.length);// 23. Створення використовуючи методи
Методи, типу 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 двічі, воно збережеться лише один раз.
Основні характеристики:
- Унікальність: Усі значення в
Setє унікальними. - Ітерабельність:
Setможна перебирати за допомогою циклів або методів, таких якforEach. - Немає індексів: На відміну від масивів,
Setне має індексів, тому елементи не можна отримати за індексом. - Методи для роботи з елементами:
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
add(value) — додає значення до Set.
const mySet = new Set();mySet.add(1);mySet.add(2);console.log(mySet); // Set { 1, 2 }delete(value) — видаляє значення з Set.
mySet.delete(1);console.log(mySet); // Set { 2 }has(value) — перевіряє, чи міститься значення в Set.
console.log(mySet.has(2)); // trueconsole.log(mySet.has(3)); // falseclear() — очищає Set, видаляючи всі елементи.
mySet.clear();console.log(mySet); // Set {}size — повертає кількість елементів у Set.
const mySet = new Set([1, 2, 3]);console.log(mySet.size); // 3Як Set пов’язаний з масивами та об’єктами?
1. Зв’язок з масивами: Set можна створити з масиву, щоб автоматично видалити дублікати
const arr = [1, 2, 2, 3, 4, 4, 5];const uniqueSet = new Set(arr);console.log(uniqueSet); // Set { 1, 2, 3, 4, 5 }Set можна перетворити назад у масив за допомогою Array.from() або оператора розширення (...):
const uniqueArr = Array.from(uniqueSet);// абоconst uniqueArr = [uniqueSet];console.log(uniqueArr); // [1, 2, 3, 4, 5]2. Зв’язок з об’єктами: У Set можна додавати об’єкти, і вони будуть зберігатися як унікальні елементи. Однак об’єкти вважаються різними, навіть якщо вони мають однаковий вміст:
const obj1 = { name: "John" };const obj2 = { name: "John" };const mySet = new Set();mySet.add(obj1);mySet.add(obj2);console.log(mySet.size); // 2 (об'єкти вважаються різними)Приклади використання Set
1. Видалення дублікатів з масиву:
const arr = [1, 2, 2, 3, 4, 4, 5];const uniqueArr = [new Set(arr)];console.log(uniqueArr); // [1, 2, 3, 4, 5]2. Перевірка наявності елемента:
const mySet = new Set([1, 2, 3]);console.log(mySet.has(2)); // true3. Зберігання унікальних об’єктів:
const obj1 = { name: "John" };const obj2 = { name: "Jane" };const mySet = new Set();mySet.add(obj1);mySet.add(obj2);console.log(mySet.size); // 288
Метод 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);
Коли використовувати метод літерал масиву і коли – конструктор?
Коли використовувати літерал масиву ([])?
- Більшість випадків: літерал масиву є стандартним і найпоширенішим способом створення масивів. Він коротший, зрозуміліший і менш схильний до помилок.
- Коли потрібно створити масив з відомими елементами: якщо ви знаєте елементи масиву наперед, літерал масиву — найкращий вибір.
- Коли потрібно створити порожній масив: літерал масиву також підходить для створення порожнього масиву.
- Коли важлива читабельність коду: літерал масиву є більш інтуїтивним і зрозумілим для інших розробників.
Коли використовувати конструктор Array()?
Коли потрібно створити масив із заданою довжиною:
- Коли потрібно створити масив із заданою довжиною: конструктор
Array()корисний, коли потрібно створити масив із певною кількістю порожніх елементів (наприклад, для подальшого заповнення). - Коли потрібно динамічно створити масив: якщо довжина масиву або його елементи визначаються динамічно, конструктор
Array()може бути корисним. - Коли потрібно створити масив із одного числа: якщо потрібно створити масив із одного числа, краще використовувати
Array.of(), але конструкторArray()також можна використовувати. - Коли потрібно сумісність зі старим кодом: у дуже старих проектах або для сумісності зі старими версіями JavaScript може знадобитися використання конструктора.
Ітерація масивів
Ітерації масивів використовуються для для того, щоб послідовно обробляти кожен елемент масиву. Зокрема, це дозволяє:
- Переглядати або виводити значення масиву (наприклад,
console.log()). - Змінювати кожен елемент за потреби (наприклад, множити всі числа на 2).
- Збирати потрібні дані в нову структуру (наприклад, створювати інший масив або підраховувати загальне значення).
- Фільтрувати масив, відбираючи лише ті елементи, що відповідають певній умові.
- Трансформувати дані за допомогою різних методів (наприклад,
map,reduce,filter) і отримувати новий результат.
Ітерації допомагають виконувати практично будь-які операції над кожним елементом масиву — від простої перевірки до складної обробки даних.
Приклади ітерації масивів
Цикл for
Це найосновніший метод для ітерації по масиву. Він дозволяє створити змінну лічильника, задати умови продовження ітерації та інкрементувати лічильник.
Завдання знайти всі додатні числа в масиві, помножити кожне з них на 2 та зберегти результат у новому масиві.
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]Пояснення:
- Ініціалізуємо порожній масив
positiveDoubled. - За допомогою лічильника
iпроходимося по всіх індексахarr. - Перевіряємо, чи елемент (arr[i]) є додатним (
> 0). - Якщо так, множимо його на 2 і додаємо (
push) в новий масив. - У фіналі маємо масив тільки з додатних чисел, збільшених у 2 рази.
Цикл for...of
Зручний синтаксис для ітерації по елементах масиву без необхідності звертатися до індексів.
Завдання побудувати новий масив квадратів кожного елемента (негативне число також зведеться в квадрат).
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]Пояснення:
for...ofітерується безпосередньо по значеннях елементів масиву, томуitem– це вже елемент (без індексу).- Для кожного
itemзводимо його в квадратitem * item. - Додаємо результат у масив
squares. - У результаті отримуємо масив
[4, 1, 25, 0, 49].
Цикл while
whileЦикл while виконується тільки тоді, коли умова є правдивою. Перевірка умови відбувається перед виконанням тіла циклу, що означає, що якщо умова спочатку не виконується, цикл може не виконатися жодного разу.
Завдання знайти всі додатні числа в масиві, помножити кожне з них на 2 та зберегти результат у новому масиві.
const arr = [1, 2, 3, 4]; // Масив, по якому будемо ітерувати.let i = 0; // Ініціалізація лічильника індексів масиву. Спочатку він дорівнює 0.while (i < arr.length) { // Умова циклу: поки i менше довжини масиву, будемо ітерувати. console.log(arr[i]); // Виводимо елемент масиву з індексом i. i++; // Інкрементуємо lічильник i на 1.}Пояснення:
- Масив
arr = [1, 2, 3, 4]містить чотири елементи. Ми будемо ітерувати по цьому масиву. - Ми створюємо змінну
iта ініціалізуємо її значенням0, що відповідає індексу першого елемента масиву. - Цикл
whileперевіряє умову: чи є значення змінноїiменшим за довжину масиву (arr.length). - Оскільки масив має 4 елементи, умова буде правдивою, поки
iне стане рівним 4. - В середині циклу ми виводимо елемент масиву, на який вказує індекс
i, за допомогоюconsole.log(arr[i]). - Кожного разу, коли цикл виконується, індекс
iзбільшується на 1 (i++), щоб перейти до наступного елемента масиву. - Як тільки значення
iдосягне 4 (довжина масиву), умова циклу стане хибною, і цикл завершиться.
Цикл do…while
Цикл do...while, на відміну від while, виконується хоча б один раз, навіть якщо умова не виконувалась. Перевірка умови відбувається після виконання тіла циклу, тому тіло циклу виконується завжди хоча б один раз, незалежно від умови.
Завдання побудувати новий масив квадратів кожного елемента (негативне число також зведеться в квадрат).
const arr = [1, 2, 3, 4]; // Масив, по якому будемо ітерувати.let i = 0; // Ініціалізація лічильника індексів масиву.do { console.log(arr[i]); // Виводимо елемент масиву з індексом i. i++; // Інкрементуємо лічильник i на 1.} while (i < arr.length); // Умова: поки i менше довжини масиву, ітерація продовжується.Пояснення:
- Масив
arr = [1, 2, 3, 4]знову містить чотири елементи.Створюємо зміннуiі ініціалізуємо її значенням0.Циклdo...whileгарантує, що тіло циклу виконається хоча б один раз, навіть якщо умова з самого початку була б хибною. Тіло циклу виконується: - Виводимо елемент масиву, на який вказує індекс
i. - Інкрементуємо
i, щоб перейти до наступного елемента масиву. - Умова перевіряється після виконання тіла циклу. Якщо
iвсе ще менше за довжину масиву, цикл продовжується.Як тількиiстане рівним 4 (довжина масиву), умова стане хибною і цикл завершиться.
Цикл forEach()
forEach()Метод масиву, який викликає передану функцію для кожного елемента масиву. Він не повертає значення і не дозволяє змінювати індекси.
const arr = [1, 2, 3, 4];arr.forEach(function(num) { console.log(num); // Виведе 1, 2, 3, 4});Пояснення:
forEach()приймає функцію як аргумент. Ця функція викликається для кожного елемента масиву.- У функції ми передаємо змінну
num, яка на кожному кроці циклу буде рівна поточному елементу масиву. - Виводимо кожен елемент за допомогою
console.log(num).
Метод map()
Метод, який створює новий масив із результатів виконання функції на кожному елементі оригінального масиву.
const arr = [1, 2, 3, 4];const doubled = arr.map(num => num * 2);console.log(doubled); // Виведе [2, 4, 6, 8]Пояснення:
map()застосовує функцію до кожного елемента масиву і створює новий масив із результатів цих операцій.- Ми множимо кожен елемент масиву на 2, і отримуємо новий масив з подвоєними значеннями.
- Важливо, що метод
map()не змінює оригінальний масив.
Метод filter()
filter()Метод filter() створює новий масив із усіх елементів, які задовольняють умову, зазначену у функції.
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]Пояснення:
filter()перевіряє кожен елемент масиву на відповідність умові, яку ми задаємо в функції.- У нашому випадку ми перевіряємо, чи є число парним, використовуючи умову
num % 2 === 0. - Масив, що повертається, містить лише ті елементи, які задовольняють умову (в даному випадку, парні числа).
Метод reduce()
Метод, який меншує масив до одного значення, викликаючи функцію для кожного елемента, і повертає результат.
const arr = [1, 2, 3, 4, 5];const sum = arr.reduce(function(acc, num) { return acc + num; // Додаємо поточне значення до акумулятора}, 0);console.log(sum); // Виведе: 15Пояснення:
reduce()приймає функцію, яка працює з двома аргументами:acc(акумулятор): це значення, яке накопичується під час ітерації масиву.num(поточний елемент): це поточний елемент масиву.- Перший параметр функції
reduce()визначає початкове значення акумулятора. У нашому випадку це0. - На кожному кроці функція додає поточний елемент до акумулятора, і в кінці отримуємо суму всіх елементів масиву.
Деструктуризація масивів та спред-оператор
Деструктуризація масиву — це синтаксис у 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 в arr2arr2.push(4); // Додаємо новий елемент у arr2console.log(arr1); // Виведе: [1, 2, 3]console.log(arr2); // Виведе: [1, 2, 3, 4]Пояснення:
- Ми використовуємо спред-оператор для копіювання всіх елементів масиву
arr1у новий масивarr2. - Оскільки це поверхневе копіювання, зміни в
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на початок масивуarrза допомогою спред-оператора. - Потім додаємо елемент
5в кінець масивуarrза допомогою спред-оператора.
Спред-оператор можна використовувати для “розпакування” елементів масиву в функціях або конструкторах.
const arr = [1, 2, 3, 4];function sum(a, b, c, d) { return a + b + c + d;}console.log(sum(arr)); // Виведе: 10Пояснення:
- Ми передаємо масив
arrу функціюsum()за допомогою спред-оператора, який розпаковує елементи масиву як окремі аргументи. - Функція отримує ці елементи як окремі аргументи
a,b,c,dі виконує операцію над ними.
Спред-оператор у функціях з невизначеною кількістю аргументів (Rest/Spread)
Якщо у вас є функція, яка приймає декілька параметрів, спред-оператор може допомогти вам зібрати аргументи в масив. Це також відомо як Rest-оператор. Приклад:
function printAll(args) { console.log(args);}printAll(1, 2, 3, 4); // Виведе: [1, 2, 3, 4]Пояснення:
- Оператор
...argsзбирає всі передані аргументи в масивargs. - У цьому випадку, всі числа передаються у вигляді масиву.
Спред-оператор у поєднанні з іншими методами
Ви можете не тільки копіювати масив, а й модифікувати елементи під час його копіювання за допомогою спред-оператора. Наприклад:
const arr = [1, 2, 3, 4];// Створюємо новий масив, де замінюємо третій елементconst modifiedArr = [arr.slice(0, 2), 100, arr.slice(3)];console.log(modifiedArr); // Виведе: [1, 2, 100, 4]Пояснення:
- Спочатку за допомогою методу
slice(0, 2)ми копіюємо перші два елементи. - Потім ми вставляємо значення
100на третє місце. - В кінці використовуємо
slice(3)для копіювання елементів з індексу 3 і далі.
Приклади деструктуризації
1. Пропуск елементів.
Якщо вам потрібно отримати лише певні елементи, можна пропустити інші за допомогою коми:
const arr = [1, 2, 3, 4, 5];const [first, , third] = arr;console.log(first); // 1console.log(third); // 3Тут ми пропустили другий елемент (індекс 1).
2. Деструктуризація з залишковими елементами
Якщо потрібно отримати перші кілька елементів, а решту зібрати в окремий масив, використовуйте синтаксис ...rest:
const arr = [1, 2, 3, 4, 5];const [first, second, rest] = arr;console.log(first); // 1console.log(second); // 2console.log(rest); // [3, 4, 5]Змінна rest містить усі елементи, які залишилися.
3. Значення за замовчуванням
Якщо елемент масиву відсутній або дорівнює undefined, можна вказати значення за замовчуванням:
const arr = [1, 2];const [first, second, third = 3] = arr;console.log(first); // 1console.log(second); // 2console.log(third); // 3 (значення за замовчуванням)4. Обмін значень змінних
Деструктуризація дозволяє легко обмінювати значення змінних:
let a = 1;let b = 2;[a, b] = [b, a];console.log(a); // 2console.log(b); // 15. Деструктуризація вкладених масивів
Якщо масив містить інші масиви, можна деструктуризувати їх також:
const arr = [1, [2, 3], 4];const [first, [second, third], fourth] = arr;console.log(first); // 1console.log(second); // 2console.log(third); // 3console.log(fourth); // 46. Деструктуризація під час ітерації
Деструктуризація може бути корисна під час роботи з масивами в циклах:
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); // 1console.log(second); // 2console.log(third); // 3Переваги деструктуризації
- Скорочення коду: Не потрібно вручну звертатися до елементів масиву за індексами.
- Зручність: Легко отримувати значення з вкладених структур.
- Читабельність: Код стає більш зрозумілим і лаконічним.
Обмеження деструктуризації
- Якщо масив коротший, ніж кількість змінних, “зайві” змінні отримають значення
undefined. - Якщо ви намагаєтеся деструктуризувати щось, що не є ітерабельним (наприклад,
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() та іншим, масиви стали незамінним інструментом у розробці сучасних веб-додатків. Зрозумівши основи роботи з масивами та їхні можливості, ви зможете значно підвищити ефективність вашого коду та значно полегшити обробку великих обсягів інформації.
