Методи роботи з масивами в JavaScript

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

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

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

Основи 

Методи масивів – це спеціальні функції, які доступні для роботи з масивами. Існують сотні методів масивів, але найчастіше використовуються такі:

• push() – додає елемент у кінець масиву.

Приклад:

const numbers = [1, 2, 3];

numbers.push(4, 5);

console.log(numbers); // [1, 2, 3, 4, 5]

• pop() – видаляє елемент із кінця масиву.

Приклад:

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

const removedElement = numbers.pop();

console.log(removedElement); // 5

console.log(numbers); // [1, 2, 3, 4]

• метод shift js() – видаляє елемент із початку масиву.

Приклад:

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

const removedElement = numbers.shift();

console.log(removedElement); // 1

console.log(numbers); // [2, 3, 4, 5]

• unshift() – додає елемент на початок масиву.

Приклад:

const numbers = [2, 3, 4, 5];

numbers.unshift(0, 1);

console.log(numbers); // [0, 1, 2, 3, 4, 5]

Крім стандартних методів масивів можна також створювати власні, наприклад, використовуючи перевизначення методів js – воно дає змогу змінити поведінку методу, успадкованого від батьківського класу. У контексті масивів це означає, що можна створити новий метод із тим самим ім’ям, що й стандартна функція масиву, і перевизначити його поведінку.

Перебір елементів масиву

У JavaScript перебірні методи є потужними інструментами для роботи з масивами, забезпечуючи зручні засоби для ітерації, перетворення і фільтрації елементів. Вони роблять код більш читабельним і ефективним, даючи змогу розробникам гнучко обробляти дані та проводити агрегацію. Давайте розглянемо, як ці методи збагачують наші можливості в ітерації по масивах…

1. Почнемо з forEach(), який простий та інтуїтивно зрозумілий. Він дозволяє виконати певну дію для кожного елемента масиву. Це основний крок в ітерації:

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

numbers.forEach(number => {

  console.log(number * 2);

});

2. Потім ми переходимо до map(), який, на відміну від forEach(), створює новий масив, застосовуючи функцію до кожного елемента. Таким чином, ми не тільки ітеруємо, а й створюємо нову структуру даних:

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

const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

3. filter() наступний у списку, фокусується на фільтрації елементів, створюючи масив з елементів, які задовольняють певній умові. Це розширює ітерацію до відбору потрібних даних:

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

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4]

4. І, нарешті, reduce() – метод агрегації, який ітеративно зменшує масив до одного значення. Це як крок далі у використанні ітерацій для обчислень:

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

const sum = numbers.reduce((accumulator, number) => accumulator + number, 0);

console.log(sum); // 15

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

Методи пошуку 

Коли мова заходить про пошук у масиві, на допомогу приходять методи, спеціально розроблені для ефективного знаходження потрібних елементів. Розглянемо основні з них:

• indexOf(): повертає індекс першого знайденого елемента в масиві. Ідеальний вибір, якщо потрібно знати, де знаходиться конкретний елемент.

• find(): використовується для пошуку першого елемента, який відповідає заданій умові в переданій функції зворотного виклику.
• findIndex(): аналогічний методу find(), але повертає індекс знайденого елемента, а не сам елемент.
• includes(): простий метод, який повертає true, якщо масив містить зазначений елемент, і false – в іншому випадку.

Вибір конкретного методу залежить від поставленого завдання. Якщо важливий індекс, використовуйте indexOf(). Для складніших умов – find() або findIndex(). Якщо потрібно просто дізнатися, чи є елемент у масиві, застосуйте includes().

Сортування та впорядкування

Коли мова заходить про порядок у масиві, на допомогу приходять методи sort() і reverse(). Ось як із ними працювати:

• sort(): використовується для сортування елементів масиву. За замовчуванням, він перетворює елементи в рядки і влаштовує їх у порядку Unicode. Для більш складних сценаріїв, можна передати функцію порівняння.
• reverse(): змінює порядок елементів на зворотний. Це корисно, коли необхідно інвертувати порядок масиву.

Сортування не обмежується простим упорядкуванням елементів, а надає можливість створення системи: sort() може бути налаштований з використанням користувацької функції порівняння, а reverse() – є простим і ефективним засобом для інверсії порядку.

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

Перетворення масивів

Для зміни, об’єднання і копіювання масивів слугують методи join(), concat(), slice() і splice().

• join(): перетворює масив на рядок, об’єднуючи всі його елементи із заданим роздільником.

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

const joinedString = numbers.join('-');

console.log(joinedString); // '1-2-3-4-5'

• concat(): метод concat js() створює новий масив, об’єднуючи два або більше масивів.

const first = [1, 2];

const second = [3, 4];

const combined = first.concat(second);

console.log(combined); // [1, 2, 3, 4]

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

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

const subarray = numbers.slice(1, 4);

console.log(subarray); // [2, 3, 4]

• splice(): Метод splice() змінює вміст масиву, видаляючи або замінюючи наявні елементи та/або додаючи нові.

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

numbers.splice(2, 1, 99); // Remove one element starting from index 2 and insert 99

console.log(numbers); // [1, 2, 99, 4, 5]

Ці методи надають гнучкість під час роботи з масивами, даючи змогу змінювати їхню структуру відповідно до конкретних потреб.

Більш складні та сучасні методи

Коли справа доходить до складніших маніпуляцій із масивами, на допомогу приходять методи flatMap() і reduceRight().

• flatMap(): служить для об’єднання кроків map() і flat(). Він застосовує функцію до кожного елемента масиву, а потім стискає отримані результати.

// flatMap(): Combines the steps of map() and flat(). Applies a function to each element of the array, then flattens the resulting arrays.

const words = ['Hello', 'world'];

const letters = words.flatMap(word => word.split(''));

console.log(letters); // ['H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

• reduceRight(): метод аналогічний reduce(), але починає праворуч, з останнього елемента масиву, та ітерує у зворотному напрямку.

// reduceRight(): Similar to reduce(), but starts from the right, iterating in reverse.

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

const reversedSum = numbers.reduceRight((accumulator, number) => accumulator + number, 0);

console.log(reversedSum); // 15

Ці методи надають можливість більш просунутих маніпуляцій з даними в масивах. Метод flatMap() підходить для сценаріїв, коли потрібно одночасно відобразити й ущільнити масив, тоді як reduceRight() корисний під час зворотної ітерації масивом для обчислення підсумкового значення.

Під час роботи з результатами методів flatMap() і reduceRight() часто виникає необхідність створювати нові об’єкти або масиви. Для цього застосовується фабричний метод js (функція, яка створює новий об’єкт або масив, і він може бути використаний для формування нових структур даних на основі наявних). Це пов’язано з тим, що ці методи дають змогу виконувати складніші маніпуляції з даними в масивах, ніж традиційні методи, як-от map() і reduce().

Продуктивність і оптимізація

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

Вплив методів на продуктивність:

• Методи, такі як forEach(), map(), filter() і reduce(), зазвичай хороші для роботи з масивами. Однак, вони можуть уповільнити код, якщо масив дуже великий.
• Деякі методи, наприклад, concat() і splice(), можуть використовувати більше пам’яті, що теж може вплинути на продуктивність.
• Операції сортування, такі як sort(), можуть бути дорогими  і трудомісткими, особливо якщо потрібно змінити порядок елементів.

Щоб оптимізувати цикли, дотримуйтесь таких порад: уникайте змін в оригінальному масиві, щоб уникнути несподіваних проблем. Для обробки великих масивів краще використовувати класичний for-цикл для підвищення ефективності. Скористайтеся Array.from() для зручного перетворення даних у масиви. А під час сортування вибирайте методи, що відповідають вашим потребам, і перевіряйте функцію порівняння для sort().

Як бачимо, оптимізація коду — це як пошук балансу між тим, щоб код був зрозумілим і легким для читання, і водночас виконувався швидко й ефективно.

Часті помилки та найкращі практики

Під час роботи з масивами в JavaScript існують поширені помилки, які можуть знизити продуктивність програми. Наприклад: зміна масиву всередині циклу forEach(), використання for…in для масивів, забування копіювання масиву.

Відповідно, для більш ефективної роботи слід дотримуватися певних практик. Наприклад:

• використовуйте методи масивів відповідно до їхнього призначення, наприклад, map() для створення нового масиву і filter() для відфільтрованих елементів;
• уникайте зміни оригінального масиву, віддаючи перевагу методам, що створюють нові масиви, такі як map(), filter() або concat();
• для перебору масивів переважно використовувати цикл for…of, який гарантовано повертає тільки значення елементів;
• явне копіювання масивів для створення копії рекомендується з використанням методів, таких як slice() або Array.from().

У разі сумнівів щодо вибору методу або його роботи, радимо звернутися до офіційної документації JavaScript.

Висновок

Метод масивів у JavaScript – це потужний інструмент, який може допомогти вам писати більш ефективний і гнучкий код. Використовуйте ці методи, щоб заощадити час і зусилля, а також поліпшити продуктивність вашої програми.