Масиви

... з циклами ми круті. З масивами ми вдвічі крутіші.

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), то природно для заповнення масиву потрібно звертатися до "неіснуючих" комірок. Таким чином власне заповнюючи масив.

В планах — перезаписати це відео українською. Якщо хочете допомогти та можете зробити це якісно — долучайтесь, так переклад з'явиться швидше. Щодо всіх питань з цього приводу пишіть на [e-mail]

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

Про масиви (uk.javascript.info)

Ще про масиви (яваскрипт.укр)

Про об'єкти (uk.javascript.info)

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

МістаБанкоматВідцентрована штука

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