Масиви — частина 1

JavaScript масиви — дерев'яний поїзд з вагонами як впорядкована колекція елементів

До цього моменту кожна змінна зберігала одне значення. Але що якщо потрібно зберегти список з 100 студентів? Створювати 100 змінних? Ні — для цього є масиви.

Що таке масив?

Масив (Array) — впорядкована колекція елементів:

const fruits = ["яблуко", "банан", "вишня"];
const numbers = [10, 20, 30, 40, 50];
const mixed = ["текст", 42, true, null]; // різні типи — можна, але краще не треба

Доступ до елементів

Елементи нумеруються з 0 (не з 1!):

const colors = ["червоний", "зелений", "синій"];

console.log(colors[0]); // "червоний"  — перший
console.log(colors[1]); // "зелений"   — другий
console.log(colors[2]); // "синій"     — третій
console.log(colors[3]); // undefined   — елемента немає

Індекси:  [0]           [1]          [2]
Масив:    "червоний"    "зелений"    "синій"

Зміна елемента

const colors = ["червоний", "зелений", "синій"];
colors[1] = "жовтий";
console.log(colors); // ["червоний", "жовтий", "синій"]

length — довжина масиву

const fruits = ["яблуко", "банан", "вишня"];
console.log(fruits.length); // 3

// Останній елемент
console.log(fruits[fruits.length - 1]); // "вишня"

Додавання та видалення елементів

В кінець / з кінця

const fruits = ["яблуко", "банан"];

fruits.push("вишня");        // додати в кінець
console.log(fruits);          // ["яблуко", "банан", "вишня"]

const last = fruits.pop();   // видалити останній
console.log(last);            // "вишня"
console.log(fruits);          // ["яблуко", "банан"]

На початок / з початку

const fruits = ["яблуко", "банан"];

fruits.unshift("манго");      // додати на початок
console.log(fruits);           // ["манго", "яблуко", "банан"]

const first = fruits.shift(); // видалити перший
console.log(first);            // "манго"
console.log(fruits);           // ["яблуко", "банан"]

Пошук у масиві

includes — чи є елемент?

const fruits = ["яблуко", "банан", "вишня"];

console.log(fruits.includes("банан"));  // true
console.log(fruits.includes("манго"));  // false

indexOf — який індекс?

const fruits = ["яблуко", "банан", "вишня"];

console.log(fruits.indexOf("банан"));  // 1
console.log(fruits.indexOf("манго"));  // -1 (не знайдено)

Перебір масиву

for

const numbers = [10, 20, 30, 40];

for (let i = 0; i < numbers.length; i++) {
  console.log(`Індекс ${i}: ${numbers[i]}`);
}

for...of (рекомендовано)

const fruits = ["яблуко", "банан", "вишня"];

for (const fruit of fruits) {
  console.log(fruit);
}
// "яблуко", "банан", "вишня"

Корисні методи

splice — видалення/вставка посередині

const colors = ["червоний", "зелений", "синій", "жовтий"];

// Видалити 1 елемент починаючи з індексу 1
colors.splice(1, 1);
console.log(colors); // ["червоний", "синій", "жовтий"]

// Вставити на позицію 1
colors.splice(1, 0, "білий");
console.log(colors); // ["червоний", "білий", "синій", "жовтий"]

slice — копія частини масиву

const numbers = [10, 20, 30, 40, 50];

const part = numbers.slice(1, 3); // від індексу 1 до 3 (не включаючи)
console.log(part);     // [20, 30]
console.log(numbers);  // [10, 20, 30, 40, 50] — оригінал не змінився!

concat та spread — з'єднання масивів

const a = [1, 2];
const b = [3, 4];

// concat
const c = a.concat(b);
console.log(c); // [1, 2, 3, 4]

// spread operator (сучасніший спосіб)
const d = [...a, ...b];
console.log(d); // [1, 2, 3, 4]

Практика

// 1. Розвернути масив без reverse()
function reverseArray(arr) {
  const result = [];
  for (let i = arr.length - 1; i >= 0; i--) {
    result.push(arr[i]);
  }
  return result;
}
console.log(reverseArray([1, 2, 3, 4, 5])); // [5, 4, 3, 2, 1]

// 2. Знайти максимум
function findMax(arr) {
  let max = arr[0];
  for (const num of arr) {
    if (num > max) max = num;
  }
  return max;
}
console.log(findMax([3, 7, 2, 9, 1])); // 9

// 3. Видалити дублікати
function unique(arr) {
  const result = [];
  for (const item of arr) {
    if (!result.includes(item)) {
      result.push(item);
    }
  }
  return result;
}
console.log(unique([1, 2, 2, 3, 3, 3])); // [1, 2, 3]

Підсумок

• Масив — впорядкована колекція, нумерація з 0
• push/pop — додати/видалити з кінця
• unshift/shift — додати/видалити з початку
• includes — перевірка наявності, indexOf — пошук індексу
• for...of — найзручніший спосіб перебору
• splice — зміна посередині, slice — копія частини
• spread [...a, ...b] — з'єднання масивів

Що далі?

У наступному уроці вивчимо методи масивів — map, filter, find, reduce та sort.