Уроки JavaScript — Масиви: основи використання та основні функції

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

 

Основне визначення масивів у JS

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

 

Способи створення масивів у JS

Щоб створити масив у JavaScript, ви можете скористатися кількома способами:

1. Літеральною нотацією масиву: ви визначаєте новий масив лише з використанням порожніх дужок ([]). Це найпоширеніший і найпростіший метод
2. Через конструктор масиву: використовуєте конструктор new Array()
3. Створення масиву із масивоподібного або ітерованого об’єкту: використовуєте метод Array.from()
4. Створення масиву зі змінною (довільною) кількістю аргументів: використовуєте метод Array.of()

 

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

let frukti = ["Апельсин", "Банан", "Яблуко"]; // літеральна нотація масиву
let frukti = new Array("Апельсин", "Банан", "Яблуко"); // конструктор масиву
const miyArr = Array.from("АБВГД"); // масив з рядка; результат — А,Б,В,Г,Д
let frukti = Array.of("Апельсин", "Банан", "Яблуко"); // масив з довільних аргументів; результат — Апельсин,Банан,Яблуко

 

Загальні властивості масивів у JS

Довжина масиву — це найважливіша властивість масиву. Отримати її значення можна з допомогою властивості length. Вона визначає кількість елементів у масиві:

let frukti = ["Апельсин", "Банан", "Яблуко"];
console.log(frukti.length); // 3

 

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

 

Доступ до елементів масиву — здійснюється через їх індекс у квадратних дужках:

let frukti = ["Апельсин", "Банан", "Яблуко"];
console.log(frukti[0]); // Апельсин
console.log(frukti[2]); // Яблуко

 

Основні методи по роботі з масивами у JavaScript

У JavaScript доступні різноманітні методи, що дозволяють ефективно працювати/оброблювати масиви. До найважливіших можна віднести наступні:

 

Методи push() і pop()

• push(): додає один або більше елементів у кінець масиву
• pop(): видаляє останній елемент із масиву та повертає його

const chisla = [1, 2, 3];
chisla.push(4);
console.log(chisla); // [1, 2, 3, 4]
const ostannyeChislo = chisla.pop();
console.log(ostannyeChislo); // 4
console.log(chisla); // [1, 2, 3]

 

Методи unshift() і shift()

• unshift(): додає один або більше елементів у початок масиву
• shift(): видаляє перший елемент із масиву та повертає його

let frukti = ["Банан", "Яблуко"];
frukti.unshift("Апельсин");
console.log(frukti); // ["Апельсин", "Банан", "Яблуко"]
const pershiyFrukt = frukti.shift();
console.log(pershiyFrukt); // "Апельсин"
console.log(frukti); // ["Банан", "Яблуко"]

 

Метод splice()

Цей метод більш універсальний за попередні розглянуті, і він може додавати/видаляти елементи в будь-якій позиції масиву.

let frukti = ["Апельсин", "Банан", "Яблуко"];
frukti.splice(1, 2, "Вишня", "Полуниця"); // заміна елементів із індексом 1 та 2
console.log(frukti); // ["Апельсин", "Вишня", "Полуниця"]

 

Метод slice()

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

let frukti = ["Банан", "Апельсин", "Лимон", "Мандарин", "Вишня", "Яблуко"];
let citrus = frukti.slice(1, 4);
console.log(citrus); // ["Апельсин", "Лимон", "Мандарин"]

 

Розширені методи по роботі з масивами у JS

 

Метод map()

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

const chisla = [1, 2, 3, 4];
const squared = chisla.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

 

Метод filter()

Цей метод створює новий масив з усіма елементами, які пройшли вказаною функцією перевірку.

const chisla = [1, 2, 3, 4, 5, 6];
const evenNumbers = chisla.filter(num => num % 2 === 0); // лише парні числа
console.log(evenNumbers); // [2, 4, 6]

 

Метод reduce()

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

const chisla = [1, 2, 3, 4];
const sum = chisla.reduce((acc, curr) => acc + curr, 0); // сума всіх елементів масиву
console.log(sum); // 10

 

Метод forEach()

З допомогою цього методу ви можете виконати певну функцію один раз для кожного елемента у масиві.

let frukti = ["Апельсин", "Банан", "Яблуко"];
frukti.forEach(frukti => console.log(frukti));
// Апельсин
// Банан
// Яблуко

 

Багатовимірні масиви в JavaScript

Мова програмування JavaScript також підтримує багатовимірні масиви, які можна представити як масиви у масивах.

const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][1]); // 5

 

Методи для пошуку у масиві JS: indexOf() та lastIndexOf()

Ці методи шукають елемент у масиві та повертають його індекс.

let frukti = ["Апельсин", "Банан", "Мандарин", "Яблуко"];
console.log(frukti.indexOf("Мандарин")); // 2
console.log(frukti.lastIndexOf("Банан")); // 1

 

Методи для пошуку у масиві JS: find() і findIndex()

Ці методи шукають елементи, які задовольняють певній умові, що передана в callback функції.

const chisla = [1, 2, 3, 4, 5];
const found = chisla.find(num => num > 3);
console.log(found); // повертає перше значення; результат — 4
const foundIndex = chisla.findIndex(num => num > 3);
console.log(foundIndex); // повертає індекс першого значення; результат — 3

 

Методи JavaScript для сортування у масиві

 

Метод sort() — сортує елементи масиву та повертає відсортований масив, в порядку кодових точок Unicode (за замовчуванням).

let frukti = ["Банан", "Апельсин", "Яблуко", "Мандарин"];
frukti.sort();
console.log(frukti); // ["Апельсин", "Банан", "Мандарин", "Яблуко"]

 

Метод reverse() — змінює порядок елементів у масиві: перший елемент масиву стає останнім, а останній першим.

const chisla = [1, 2, 3, 4, 5];
chisla.reverse();
console.log(chisla); // [5, 4, 3, 2, 1]

 

Оператор поширення (spread syntax) та масиви у JS

Оператор поширення (...) є корисним доповненням до масивів у JavaScript. Це дозволяє «розпакувати» масив на його окремі елементи.

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

 

Деструктуризація масивів у JavaScript

Деструктуризація дозволяє витягувати значення з масивів і призначати їх змінним.

const [pershiy, drugiy, ...inshi] = [1, 2, 3, 4, 5];
console.log(pershiy); // 1
console.log(drugiy); // 2
console.log(inshi); // [3, 4, 5]

 

Масивоподібні об’єкти у JS

У JavaScript також існують масивоподібні об’єкти, які мають деякі властивості масивів, але не підтримують усі методи масиву. Прикладом цього може слугувати об’єкт arguments у функції.

function exampleFunction() {
  console.log(arguments.length);
  console.log(Array.from(arguments));
}
exampleFunction(1, 2, 3);
// 3
// [1, 2, 3]

 

Зауваження щодо продуктивності при роботі із масивами

Працюючи з великими масивами, розробникам слід пам’ятати про продуктивність. Такі методи, як forEach(), map(), filter() і reduce() при дуже великих масивах можуть спричинити проблеми з продуктивністю. Натомість, у таких випадках краще використовувати традиційні цикли for або for ... of, що будуть більш ефективними.

 

Кращі практики при роботі із масивами у JS

Працюючи з масивами в JavaScript, дотримуйтеся наступних найкращих практик:

• Якщо вам не потрібні особливі функції конструктора масиву, використовуйте літеральну нотацію масиву (квадратні дужки []), щоб створити масив
• Використання методів map(), filter() і reduce() дозволяє організувати більш чітку та лаконічну структуру коду (але уникайте їх для дуже великих масивів)
• Уникайте використання delete для видалення елементів з масиву, оскільки це залишає «діри» в масиві. Натомість використовуйте такі методи, як splice() або filter()
• Якщо вам потрібно перевірити, чи є значення масивом, замість того, щоб покладатися на typeof, скористайтеся конструкцією методу Array.isArray()

 

 

Замість висновку

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

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

Дякую за увагу!