Пошук уроків, статей та іншого контенту
Розглянете, що таке масиви в JavaScript, як їх створювати та як визначати кількість елементів.
Масив — це структура даних, яка дає змогу зберігати кілька значень в одній змінній.
Наприклад, замість окремих змінних для кожного кольору:
const color1 = "червоний";
const color2 = "зелений";
const color3 = "синій";можна створити один масив:
const colors = ["червоний", "зелений", "синій"];Масив може містити:
числа;
рядки;
логічні значення;
об’єкти;
інші масиви;
значення різних типів одночасно.
const values = [10, "JavaScript", true, null];На практиці зазвичай зберігають в одному масиві однотипні дані: список імен, оцінок, товарів або повідомлень.
Найпоширеніший спосіб створити масив — використати квадратні дужки [].
const fruits = ["яблуко", "банан", "апельсин"];Елементи масиву записують через кому.
Створити порожній масив можна так:
const emptyArray = [];Пізніше до нього можна додати елементи.
const tasks = [];
tasks.push("Вивчити масиви");
tasks.push("Написати програму");
console.log(tasks);Результат:
[ 'Вивчити масиви', 'Написати програму' ]ArrayМасив також можна створити за допомогою конструктора Array:
const numbers = new Array(10, 20, 30);
console.log(numbers);Результат:
[ 10, 20, 30 ]Однак для звичайного створення масивів частіше використовують літерал:
const numbers = [10, 20, 30];Цей запис коротший і зрозуміліший.
new Array()Якщо передати конструктору Array одне число, воно означатиме не елемент масиву, а його початкову довжину:
const array = new Array(3);
console.log(array.length); // 3
console.log(array); // [ <3 empty items> ]Такий масив має довжину 3, але не містить трьох значень.
Тому якщо потрібно створити масив з одним числом, краще використовувати квадратні дужки:
const numbers = [3];
console.log(numbers.length); // 1
console.log(numbers[0]); // 3Кожен елемент масиву має свій індекс — порядковий номер елемента.
У JavaScript індексація починається з нуля:
const fruits = ["яблуко", "банан", "апельсин"];| Елемент | Індекс | |---|---:| | "яблуко" | 0 | | "банан" | 1 | | "апельсин" | 2 |
Доступ до елемента отримують за допомогою квадратних дужок:
const fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits[0]); // яблуко
console.log(fruits[1]); // банан
console.log(fruits[2]); // апельсинЩоб отримати останній елемент масиву, можна використати його довжину:
const fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits[fruits.length - 1]); // апельсинЧому використовується length - 1? Якщо в масиві три елементи, його довжина дорівнює 3, але останній індекс — 2.
lengthВластивість length повертає кількість позицій у масиві.
const colors = ["червоний", "зелений", "синій"];
console.log(colors.length); // 3Властивість записують без круглих дужок:
colors.length;length — це властивість, а не метод. Тому правильний запис:
colors.length;а не:
colors.length();Для порожнього масиву значення length дорівнює нулю:
const items = [];
console.log(items.length); // 0Це зручно для перевірки, чи містить масив елементи:
const messages = [];
if (messages.length === 0) {
console.log("Масив порожній");
}Можна записати значення за конкретним індексом:
const users = [];
users[0] = "Олена";
users[1] = "Андрій";
console.log(users);
console.log(users.length);Результат:
[ 'Олена', 'Андрій' ]
2Якщо записати значення за індексом, якого ще не було, довжина масиву збільшиться:
const numbers = [10, 20];
numbers[4] = 50;
console.log(numbers.length); // 5
console.log(numbers); // [ 10, 20, <2 empty items>, 50 ]Індекси 2 і 3 у цьому прикладі не містять значень, але позиція 4 збільшила length до 5.
lengthВластивість length можна змінювати.
Якщо встановити менше значення, масив буде скорочено:
const numbers = [10, 20, 30, 40];
numbers.length = 2;
console.log(numbers); // [ 10, 20 ]Елементи з індексами 2 і 3 буде видалено.
Якщо встановити більше значення, з’являться порожні позиції:
const numbers = [10, 20];
numbers.length = 4;
console.log(numbers); // [ 10, 20, <2 empty items> ]На початковому етапі зазвичай достатньо читати length, а для додавання та видалення елементів використовувати спеціальні методи масивів.
Значення length можна використовувати в умовах:
const scores = [85, 92, 78];
if (scores.length >= 3) {
console.log("У масиві щонайменше три оцінки");
}Також length часто використовують у циклах:
const fruits = ["яблуко", "банан", "апельсин"];
for (let index = 0; index < fruits.length; index++) {
console.log(fruits[index]);
}Результат:
яблуко
банан
апельсинУмова index < fruits.length гарантує, що цикл звертається лише до дійсних індексів масиву.
const students = ["Олена", "Андрій", "Марія"];
console.log("Кількість студентів:", students.length);
// Індекси масиву починаються з нуля
console.log("Перший студент:", students[0]);
console.log("Останній студент:", students[students.length - 1]);
// Додаємо нового студента
students.push("Іван");
console.log("Оновлений список:", students);
console.log("Нова кількість студентів:", students.length);
// Виводимо всіх студентів
for (let index = 0; index < students.length; index++) {
console.log(`${index + 1}. ${students[index]}`);
}У цьому прикладі:
створюється масив students;
за допомогою length визначається його розмір;
елементи отримуються за індексами;
до масиву додається новий елемент;
масив перебирається в циклі.
Неправильно:
const colors = ["червоний", "зелений", "синій"];
console.log(colors[1]); // зеленийЯкщо потрібно отримати перший елемент, слід використати індекс 0:
console.log(colors[0]); // червонийconst fruits = ["яблуко", "банан"];
console.log(fruits[2]); // undefinedУ масиві є індекси 0 і 1, тому індекс 2 не існує.
length як методНеправильно:
const numbers = [1, 2, 3];
console.log(numbers.length());Правильно:
console.log(numbers.length);const numbers = [10, 20, 30];
console.log(numbers.length); // 3
console.log(numbers[numbers.length - 1]); // 30Довжина дорівнює 3, а останній індекс — 2.
new Array(3), коли потрібен масив із числом 3const firstArray = new Array(3);
const secondArray = [3];
console.log(firstArray.length); // 3
console.log(secondArray.length); // 1new Array(3) створює масив із трьома порожніми позиціями, а [3] — масив з одним елементом.
Масив зберігає кілька значень в одній змінній.
Найчастіше масив створюють за допомогою квадратних дужок: [].
Елементи масиву розділяють комами.
Індексація масиву починається з 0.
Доступ до елемента здійснюється через квадратні дужки: array[index].
Властивість length повертає кількість позицій у масиві.
Індекс останнього елемента можна отримати за формулою array.length - 1.
Для перевірки порожнього масиву можна порівняти array.length із 0.