Пошук уроків, статей та іншого контенту
Навчитеся читати, змінювати й додавати елементи масиву за числовими індексами.
Масив зберігає кілька значень в одному порядку. Щоб отримати конкретний елемент масиву, використовують індекс.
Індекс — це числове положення елемента в масиві. У JavaScript індексація починається з нуля:
перший елемент має індекс 0;
другий — індекс 1;
третій — індекс 2.
const fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits[0]); // "яблуко"
console.log(fruits[1]); // "банан"
console.log(fruits[2]); // "апельсин"Масив fruits має три елементи, але останній індекс дорівнює 2.
Для доступу до елемента після назви масиву вказують індекс у квадратних дужках:
const colors = ["червоний", "зелений", "синій"];
const firstColor = colors[0];
const secondColor = colors[1];
console.log(firstColor); // "червоний"
console.log(secondColor); // "зелений"Індекс можна зберігати в окремій змінній:
const animals = ["кіт", "собака", "папуга"];
const index = 2;
console.log(animals[index]); // "папуга"Це корисно, коли індекс обчислюється під час виконання програми.
Властивість length містить кількість елементів у масиві. Оскільки індексація починається з нуля, індекс останнього елемента дорівнює length - 1.
const numbers = [10, 20, 30, 40];
console.log(numbers.length); // 4
console.log(numbers[numbers.length - 1]); // 40Якщо масив порожній, його довжина дорівнює 0, а останнього елемента немає:
const emptyArray = [];
console.log(emptyArray.length); // 0
console.log(emptyArray[emptyArray.length - 1]); // undefinedЩоб змінити елемент, потрібно присвоїти нове значення за відповідним індексом:
const scores = [10, 20, 30];
scores[1] = 25;
console.log(scores); // [10, 25, 30]Елемент з індексом 1 був 20, а після присвоєння став 25.
Можна змінювати елементи масиву, оголошеного через const. Ключове слово const забороняє замінити сам масив, але не забороняє змінювати його вміст:
const tasks = ["прочитати", "написати"];
tasks[0] = "перечитати";
console.log(tasks); // ["перечитати", "написати"]Якщо присвоїти значення індексу, якого ще немає, JavaScript додасть елемент у цю позицію:
const numbers = [1, 2, 3];
numbers[3] = 4;
console.log(numbers); // [1, 2, 3, 4]Для додавання елемента в кінець масиву зручно використовувати індекс length:
const fruits = ["яблуко", "банан"];
fruits[fruits.length] = "апельсин";
console.log(fruits); // ["яблуко", "банан", "апельсин"]До виконання присвоєння fruits.length дорівнює 2, тому новий елемент отримує індекс 2.
На практиці для додавання в кінець масиву частіше використовують метод push():
const fruits = ["яблуко", "банан"];
fruits.push("апельсин");
console.log(fruits); // ["яблуко", "банан", "апельсин"]Якщо додати елемент за індексом, що значно більший за поточну довжину масиву, між елементами з’являться порожні позиції:
const numbers = [10, 20];
numbers[5] = 60;
console.log(numbers.length); // 6
console.log(numbers); // [10, 20, <3 empty items>, 60]Індекси 2, 3 і 4 не містять значень. Зазвичай не варто навмисно створювати такі пропуски. Якщо потрібно додати кілька елементів у кінець, краще використовувати push():
const numbers = [10, 20];
numbers.push(30, 40, 50, 60);
console.log(numbers); // [10, 20, 30, 40, 50, 60]Якщо звернутися до індексу, якого немає в масиві, JavaScript поверне undefined:
const languages = ["JavaScript", "Python"];
console.log(languages[0]); // "JavaScript"
console.log(languages[5]); // undefinedЦе не спричиняє помилку під час читання. Проте під час роботи з отриманим значенням потрібно враховувати, що воно може бути undefined.
const languages = ["JavaScript", "Python"];
const language = languages[5];
if (language === undefined) {
console.log("Елемент не знайдено");
}Перед доступом до елемента можна перевірити, чи індекс знаходиться в допустимих межах:
const numbers = [10, 20, 30];
const index = 1;
if (index >= 0 && index < numbers.length) {
console.log(numbers[index]);
} else {
console.log("Неприпустимий індекс");
}Допустимі індекси для масиву мають бути:
0 <= index < array.lengthУ звичайному доступі через квадратні дужки від’ємний індекс не означає «рахувати з кінця»:
const fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits[-1]); // undefinedЩоб отримати останній елемент, використовуйте:
console.log(fruits[fruits.length - 1]); // "апельсин"У сучасному JavaScript також існує метод at(), який підтримує від’ємні індекси:
const fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits.at(-1)); // "апельсин"
console.log(fruits.at(-2)); // "банан"Для базового доступу до елементів достатньо квадратних дужок і формули length - 1.
Індекси часто використовують у циклах, щоб послідовно обробити всі елементи масиву:
const products = ["книга", "зошит", "ручка"];
for (let index = 0; index < products.length; index++) {
console.log(index, products[index]);
}Результат:
0 "книга"
1 "зошит"
2 "ручка"Змінна index починається з 0 і збільшується на одиницю після кожної ітерації. Умова index < products.length гарантує, що цикл не звернеться до неіснуючого індексу.
За допомогою індексу можна змінити всі елементи масиву:
const numbers = [1, 2, 3, 4];
for (let index = 0; index < numbers.length; index++) {
numbers[index] = numbers[index] * 2;
}
console.log(numbers); // [2, 4, 6, 8]У цьому прикладі програма читає елемент, змінює його та додає новий елемент у кінець масиву:
const users = ["Олена", "Андрій", "Марія"];
// Читаємо елемент за індексом
console.log(users[0]); // "Олена"
// Змінюємо елемент за індексом
users[1] = "Олексій";
// Додаємо елемент у кінець масиву
users[users.length] = "Ірина";
console.log(users); // ["Олена", "Олексій", "Марія", "Ірина"]
// Читаємо останній елемент
const lastUser = users[users.length - 1];
console.log(lastUser); // "Ірина"Людина може називати перший елемент «елементом номер 1», але в JavaScript його індекс — 0.
const items = ["перший", "другий", "третій"];
console.log(items[0]); // перший
console.log(items[1]); // другий
console.log(items[2]); // третійlength як індекс останнього елементаlength — це кількість елементів, а не індекс останнього елемента:
const numbers = [10, 20, 30];
console.log(numbers.length); // 3
console.log(numbers[3]); // undefined
console.log(numbers[numbers.length - 1]); // 30Звернення до неіснуючого індексу повертає undefined:
const names = ["Іван", "Оля"];
const name = names[2];
if (name !== undefined) {
console.log(name);
} else {
console.log("Такого імені немає");
}Не встановлюйте значення за індексом, який набагато більший за length, якщо не плануєте створювати розріджений масив:
const numbers = [1, 2];
numbers[10] = 11;
console.log(numbers.length); // 11Для звичайного додавання використовуйте push() або індекс array.length.
Створіть масив із трьох назв міст і виведіть другий елемент.
Замініть перший елемент масиву на інше значення.
Додайте новий елемент у кінець масиву за допомогою push().
Виведіть останній елемент, використовуючи length - 1.
Перевірте, що відбудеться під час звернення до індексу, якого немає.
Приклад розв’язання:
const cities = ["Київ", "Львів", "Одеса"];
console.log(cities[1]); // "Львів"
cities[0] = "Харків";
cities.push("Дніпро");
console.log(cities); // ["Харків", "Львів", "Одеса", "Дніпро"]
console.log(cities[cities.length - 1]); // "Дніпро"
console.log(cities[10]); // undefinedІндекси масиву в JavaScript починаються з 0.
Елемент читають через квадратні дужки: array[index].
Елемент змінюють присвоєнням: array[index] = value.
Кількість елементів зберігається у властивості length.
Індекс останнього елемента: array.length - 1.
Для додавання в кінець масиву можна використовувати push() або індекс array.length.
Звернення до неіснуючого індексу повертає undefined.
Від’ємні індекси у квадратних дужках не працюють як індекси з кінця; для цього можна використати at() або length - 1.