Масиви

... з циклами ми круті. З масивами ми вдвічі крутіші.
let array = [];
... тут ми говоримо: створи новий порожній масив, і проасоціюй його зі змінною array (назва може бути будь-якою).
Що це значить? Тепер у нас є безмежна кількість звичайних змінних.
Їх імена: array[0], array[1], array[2], array[3] .....
Радимо сприймати ці змінні як абсолютно незалежні, а про змінну array (сам масив) забути зовсім. Її "не існує", є лише array[0], array[1], array[2], array[3] .....
Що лежить там? Нічого, як і в звичайних змінних. В JavaScript це називається undefined. Спробуйте вивести на екран вміст array[0] і ви побачите як це провізуалізується.
Добре, тепер у нас є дуже багато змінних. Що зазвичай з ними роблять?
  • зберігають кольори кожного пікселя картинки
  • зберігають здоров'я / набої всіх гравців в грі
  • зберігають імена всіх учнів
  • зберігають координати кожної з 1000 частинок при малюванні анімованого фонтану
  • і таке інше
Виходить, масиви — це контейнери, в яких можуть зберігатися багато значень (а не одне, як у звичайних змінних).
Елементи масиву — це змінні. Тобто, з ними можна робити все, що і зі звичайними змінними й поза масивом. Єдина різниця: у масиві змінні не мають імен, замість імені — порядковий номер (індекс).
Пам'ятаєте аналогію про змінні-коробки з попередніх розділів? Якщо продовжити, можна уявити масив коробкою, в якій лежать інші коробки(змінні).
Приклад "масиву", який містить три "змінних"

Оголошення масивів

Масив — це скільки завгодно довгий набір нумерованих значень. Ці значення можуть бути будь-якого типу. Зараз ми створюємо масив відразу з елементами
let arr = [11, 22, 33, 44, 55]; // це масив, в якому перші 5 елементів чомусь рівні
console.log(arr[0]); // буде 11
arr = [true, false, "element", 1, 1.2]; // це теж
Масив також може не містити жодного елементу при створенні.
let arr = []; // це порожній масив, але все одно можна заповнювати будь яку комірку
Як ви помітили, щоб працювати з елементом масиву, треба вказати його номер (індекс). Найперший елемент масиву має індекс 0.
let array = [1, 2, 3, 4];
console.log(array[0]); // 1
console.log(array[3]); // 4
array[3] = 10; // можна змінювати!
console.log(array[32-30+array[0]]); // 10
Сподіваюся ви звернули увагу на array[32-30+array[0]] У цьому сила масивів: індекс можна вирахувати. Про це далі.
Неіснуючі або невизначені елементи масиву можна проініціалізувати.
Замість нудного...
array[0] = 0;
array[1] = 1;
array[2] = 2;
...скористаємось циклами:
let array = [];
let i = 0;
while (i < 10) {
array[i] = i;
i++;
}
array[11] = 10;
// тепер час вивести на екран
i = 0;
while (i < 12) {
console.log(array[i]);
i++;
}
// [0, 1, ... ,9, ?, 10]
Зверніть увагу на вміст комірки з індексом 10.
Елементи масиву можна перевизначити. Взагалі, повторимося, елементи масиву - це звичайні змінні, тому нічого нового ми вам не розповідаємо
let arr = [1, 2, 3];
arr[0] = "one";
arr[1] = "two";
console.log(arr[0]+", "+arr[1]+", "+arr[2]);

length

let arr = [10, 20]; // тут все просто
console.log(arr.length); // 2 - довжина масиву arr
Розмір масиву зазвичай на 1 більше, ніж індекс останнього ініціалізованого елемента.
let arr = [];
arr[6] = 10;
console.log(arr.length); // що буде?

Обхід масивів

Для того, щоб обійти масив (тобто по черзі попрацювати з кожним його елементом), зручно використовувати цикли. Для обходу масиву можна використовувати такий шаблон коду:
let arr = [2,5,8];
let i = 0;
while (i < arr.length) {
console.log(arr[i]); // робимо щось з arr[i]
i++; // те ж саме, що i = i + 1
}
Наприклад, збільшимо кожен елемент масиву на одиницю.
let arr = [0, 1, 2, 3, 4];
let i = 0;
while (i < arr.length) {
arr[i]++;
i++;
}
for (let i = 0; i < arr.length; i++) {
console.put(arr[i] + " "); // 1 2 3 4 5
}
Подивимося тепер на цей приклад:
let array = [1, 2, 3];
let b = array; // що ми тут копіюємо?
b[0] = 111;
console.log(array[0]);// що буде?
Розгадка полягає в тому, що масиви не лежать в змінних. У змінних лежать посилання на масиви. А значить, при присвоєнні ми не будемо копіювати масив.
Поки що неважливо знати деталі, а може і важливо :)

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

Про багатовимірні масиви почитайте в інтернеті. Там нічого складного, просто масиви масивів, і вкладені цикли, щоб працювати з ними. Завдання Ш++ на вступному тестуванні зазвичай не вимагають вміння працювати з багатовимірними масивами.

Вихід за межі масиву

Не виходьте за межі масиву! (тут слово "межа" означає все що менше ніж 0 або більше .length-1) Якщо ви звертаєтеся для читання значень комірки, якої не існує, то вам повернеться значення undefined. Якщо ж ви запишете число в елемент масиву, якого не існує, то масив автоматично розшириться.
Хоча якщо у вас масив порожній (тобто його довжина дорівнює 0), то природно для заповнення масиву потрібно звертатися до "неіснуючих" комірок. Таким чином власне заповнюючи масив.
В планах — перезаписати це відео українською. Якщо хочете допомогти та можете зробити це якісно — долучайтесь, так переклад з'явиться швидше. Щодо всіх питань з цього приводу пишіть на [email protected]

Додаткові матеріали

Про масиви (uk.javascript.info)
Ще про масиви (яваскрипт.укр)
Про об'єкти (uk.javascript.info)

Обов'язкові задачі

Виникли питання або труднощі? Зверніться за допомогою до Ш++.