JavaScript Масиви
Масив - це спеціальна змінна, яка може містити більше, ніж одне значення одночасно:
const cars = ["Saab", "Volvo", "BMW"];
Спробуйте самі »
Чому використовують масиви?
Якщо у вас є список елементів (наприклад, список назв автомобілів), зберігання автомобілів в окремих змінних може виглядіти наступним чином:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
Однак, якщо ви хочете перебрати автомобілі та знайти конкретний? А якби у вас було не 3 автомобілі, а 300?
Рішення - масив!
Масив може містити багато значень під одним іменем, і ви можете отримати доступ до значень, лише вказавши номер індексу.
Створення масиву
Використання літералу масиву - найпростіший спосіб створити JavaScript масив.
Синтаксис:
const array_name = [item1, item2, ...];
Є наступна практика для оголошення масивів за допомогою ключового слова const.
Дізнатись більше про const з масивами в розділі: JS Array Const.
Пробіли та перенесення рядка не важливі. Оголошення може займати кілька рядків:
Ви також можете створити масив, а потім надати елементи:
Використання ключового слова JavaScript new
В наступному прикладі також створюється масив і йому присвоюються значення:
Два наведених вище приклади роблять те саме.
Немає необхідності використовувати new Array().
Для простоти, читабельності та швидкості виконання використовуйте перший (метод літералу масиву).
Доступ до елементів масиву
Ви отримуєте доступ до елементу масиву, посилаючись на номер індексу:
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Спробуйте самі »
Примітка: Індекси масиву починаються із 0.
[0] є першим елементом. [1] є другим елементом і т.д.
Зміна елементу масиву
Ця інструкція змінює значення першого елементу в cars:
cars[0] = "Opel";
Доступ до повного масиву
За допомогою JavaScript можна отримати доступ до повного масиву, вказавши ім’я масиву:
Приклад
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Спробуйте самі »Масиви - це об’єкти
Масиви - це особливий тип об’єктів. Оператор typeof в JavaScript повертає "об’єкт" для масивів.
Але JavaScript масиви краще за все описувати як масиви.
Масиви використовують числа для доступу для своїх "елементів". В цьому прикладі person[0] повертає John:
Об’єкти використовують імена для доступу до своїх "членів". В цьому прикладі person.firstName повертає John:
Елементи масиву можуть бути об’єктами
JavaScript змінні можуть бути об’єктами. Масиви - це особливі види об’єктів.
Із-за цього в одному масиві можуть бути змінні різних типів.
Ви можете мати об’єкти в масиві. Ви можете мати функції в масиві. Ви можете мати масиви в масиві:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Властивості і методи масиву
Справжня сила JavaScript масивів - це вбудовані властивості та методи масиву:
cars.length // Повертає кількість елементів
cars.sort() // Сортує масив
Методи масиву розглядаються в наступних розділах.
Властивість length (довжина)
Властивість length масиву повертає довжину масиву (кількість елементів масиву).
Приклад
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
Спробуйте самі »
Властивість length завжди на одиницю більше, аніж найбільший індекс масиву.
Доступ до першого елементу масиву
Приклад
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Спробуйте самі »
Доступ до останнього елементу масиву
Приклад
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Спробуйте самі »
Зациклювання елементів масиву
Найбільш безпечний спосіб перебрати масив - це використання циклу for:
Приклад
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
Спробуйте самі »
Ви також можете використовувати функцію Array.forEach():
Приклад
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
Спробуйте самі »
Додавання елементів масиву
Найпростіший спосіб додати новий елемент в масив - використовувати метод push():
Приклад
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Додати новий елемент (Lemon) до масиву fruits
Спробуйте самі »
Новий елемент також можна додати в масив, використовуючи властивість length:
Приклад
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Додавання "Lemon" до масиву fruits
Спробуйте самі »
ПОПЕРЕДЖЕННЯ!
Додавання елементів з високими індексами може створити невизначені (undefined) "отвори" в масиві:
Приклад
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Створення undefined "отворів" в fruits
Спробуйте самі »
Асоціативні масиви
Більшість мов програмування підтримують масиви з іменованими індексами.
Масиви з іменованими індексами називаються асоціативними масивами (або хешами).
JavaScript не підтримує масиви з іменованими індексами.
В JavaScript масиви завжди використовують нумеровані індекси.
Приклад
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Поверне 3
person[0]; // Поверне "John"
Спробуйте самі »
ПОПЕРЕДЖЕННЯ!!
Якщо ви використовуєте іменовані індекси, JavaScript перевизначить масив на об’єкт.
Після цього деякі методи та властивості масиву будуть давати невірні результати.
Приклад:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Поверне 0
person[0]; // Поверне undefined
Спробуйте самі »
Відмінності між масивами та об’єктами
В JavaScript масиви використовують нумеровані індекси.
В JavaScript об’єкти використовують іменовані індекси.
Масиви - це особливий вид об’єктів з нумерованими індексами.
Коли використовувати масиви? Коли використовувати об’єкти?
- JavaScript не підтримує асоціативні масиви.
- Ви маєте використовувати об’єкти, якщо хочете, щоб імена елементів були рядками (текстом).
- Ви маєте використовувати масиви, якщо хочете, щоб імена елементів були числами.
JavaScript new Array()
JavaScript має вбудований конструктор масиву new Array().
Але ви можете використовувати [] замість цього.
Це дві різних інструкції створюють новий пустий масив з іменем points:
const points = new Array();
const points = [];
Ці дві різних інструкції створюють новий масив, що містить 6 чисел:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
Спробуйте самі »
Ключове слово new може продукувати неочікуваний результат:
// Створити масив з трьома елементами:
const points = new Array(40, 100, 1);
Спробуйте самі »
// Створити масив з двома елементами:
const points = new Array(40, 100);
Спробуйте самі »
// Створити масив з одним елементом ???
const points = new Array(40);
Спробуйте самі »
Наступна помилка
const points = [40];
є не такою, як:
const points = new Array(40);
// Створити масив з одним елементом:
const points = [40];
Спробуйте самі »
// Створити масив з 40 undefined елементами:
const points = new Array(40);
Спробуйте самі »
Як розпізнати масив
Розповсюджене питання: Як дізнатись, чи є змінна масивом?
Проблема в тому, що JavaScript оператор typeof повертає "object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
Спробуйте самі »
Оператор typeof повертає object, тому що JavaScript масив є об’єктом.
Рішення 1:
Для розв’язання цієї проблеми ECMAScript 5 (JavaScript 2009) визначає новий метод Array.isArray():
Array.isArray(fruits);
Спробуйте самі »
Рішення 2:
Оператор instanceof повертає true, якщо об’єкт створений даним конструктором:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Спробуйте самі »
Повний довідник масиву
Для більш детального ознайомлення з масивами, відвідайте:
Повний довідник JavaScript масиву на нашому сайті W3Schools українською.
Довідник містить описи та приклади всіх властивостей та методів масиву.
