Массивы

С возвращением.

В предыдущем уроке ты познакомился с функциями.

Функции помогают повторно использовать код, организовывать логику и не превращать программу в суп из копирования и вставки.

Очень полезно.

Очень цивилизованно.

Сегодня мы переходим к ещё одной важной теме в JavaScript.

Массивы.

Массив — это список значений.

Вместо того чтобы создавать много отдельных переменных, ты можешь хранить много значений в одной переменной.

Без массивов код выглядит так:

const student1 = "Anna";
const student2 = "Marco";
const student3 = "Luca";
const student4 = "Sofia";

Это работает.

Но красивым это назвать сложно.

Это как носить по одной картофелине в каждом кармане вместо того, чтобы взять сумку.

С массивом можно написать так:

const students = ["Anna", "Marco", "Luca", "Sofia"];

Гораздо лучше.

Одна переменная.

Много значений.

Меньше хаоса.

JavaScript медленно учится убирать свою комнату.

Почти.

Что Ты Изучишь

В этом уроке ты изучишь:

что такое массивы;
как создать массив;
как работают индексы;
как получать элементы массива;
как изменять элементы массива;
как добавлять элементы с помощью push;
как удалять элементы с помощью pop;
как проверять длину массива;
как проходить массив с помощью цикла;
как использовать массивы с функциями;
как использовать массивы с DOM;
как создать маленький список задач.

В конце этого урока ты поймёшь, как JavaScript хранит списки данных.

Это большой шаг.

Потому что настоящие сайты полны списков.

Товары.

Пользователи.

Посты блога.

Пункты меню.

Комментарии.

Задачи.

Фотографии.

Всё является списком, если смотреть достаточно долго.

Немного философски.

Но всё ещё JavaScript.

Что Такое Массив?

Массив — это специальная переменная, которая может хранить много значений.

Пример:

const fruits = ["apple", "banana", "orange"];

Здесь у нас есть одна переменная:

fruits

А внутри неё три значения:

apple
banana
orange

Массив использует квадратные скобки:

[]

Каждое значение отделяется запятой.

Пример:

const numbers = [10, 20, 30, 40];
const names = ["Anna", "Marco", "Viktor"];
const mixed = ["JavaScript", 2026, true];

Массив может содержать строки, числа, булевые значения и другие данные.

Но обычно мы храним похожие данные вместе.

Вот так:

const products = ["Laptop", "Mouse", "Keyboard"];

А не так:

const strangeArray = ["Pizza", 42, false, "Смущённый пингвин"];

JavaScript это позволяет.

Но если что-то можно сделать, это ещё не значит, что так нужно делать.

Очень важный урок жизни.

И программирования тоже.

Создай Проект

Создай папку для этого урока:

mkdir javascript-lesson5
cd javascript-lesson5
touch index.html
touch script.js

Твой проект должен выглядеть так:

javascript-lesson5/
  index.html
  script.js

Открой папку в редакторе.

Мы начнём с консоли.

Потом используем массивы, чтобы обновлять веб-страницу.

Сегодня без дракона-фреймворка.

Только JavaScript.

Всё ещё немного опасно.

Но уже управляемо.

Напиши HTML

Открой index.html и добавь:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Массивы</title>
</head>
<body>
  <h1>Массивы</h1>
  <p>Открой консоль браузера, чтобы увидеть результат JavaScript.</p>

  <script src="script.js"></script>
</body>
</html>

Открой файл в браузере.

Открой консоль:

нажми правой кнопкой на странице;
выбери Inspect или Проверить;
открой вкладку Console.

Теперь JavaScript готов.

Консоль смотрит.

Снова.

Она никогда не спит.

Твой Первый Массив

Открой script.js и добавь:

const fruits = ["apple", "banana", "orange"];

console.log(fruits);

Обнови браузер.

Ты должен увидеть:

["apple", "banana", "orange"]

Поздравляю.

Ты создал свой первый массив.

Выглядит просто.

Но это один из самых важных инструментов в JavaScript.

Переменная хранит одно значение.

Массив хранит много значений.

Вот разница.

Маленькие скобки.

Большая сила.

Индексы Массива

Каждый элемент в массиве имеет свою позицию.

Эта позиция называется индексом.

Важно:

JavaScript начинает считать с нуля.

Не с единицы.

С нуля.

Потому что программисты посмотрели на нормальный счёт и сказали:

“Нет. Слишком удобно.”

Пример:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Результат:

apple
banana
orange

Структура такая:

Index 0 -> apple
Index 1 -> banana
Index 2 -> orange

Значит, первый элемент — это:

fruits[0]

А не:

fruits[1]

Это одна из самых частых ошибок начинающих.

Не переживай.

Все так делают.

Потом все страдают.

Потом все запоминают.

Это естественный путь JavaScript-мудрости.

Получение Элементов Массива

Ты можешь получить любой элемент по его индексу.

Пример:

const languages = ["HTML", "CSS", "JavaScript"];

console.log(languages[0]);
console.log(languages[1]);
console.log(languages[2]);

Результат:

HTML
CSS
JavaScript

Если попробовать получить индекс, которого не существует:

console.log(languages[5]);

Результат:

undefined

Почему?

Потому что элемента с индексом 5 нет.

JavaScript не паникует.

Он просто говорит:

undefined

То есть:

“Я тут ничего не нашёл, друг.”

Очень спокойно.

Даже подозрительно спокойно.

Изменение Элементов Массива

Ты можешь изменить элемент в массиве.

Пример:

const fruits = ["apple", "banana", "orange"];

fruits[1] = "kiwi";

console.log(fruits);

Результат:

["apple", "kiwi", "orange"]

Элемент с индексом 1 был изменён.

Было:

banana

Стало:

kiwi

Банан покинул здание.

Без объяснений.

Без прощания.

Просто JavaScript.

Добавление Элементов с Помощью push

Чтобы добавить элемент в конец массива, используем push.

Пример:

const fruits = ["apple", "banana"];

fruits.push("orange");

console.log(fruits);

Результат:

["apple", "banana", "orange"]

push добавляет новый элемент в конец.

Ещё один пример:

const tasks = ["study JavaScript", "drink coffee"];

tasks.push("build a website");

console.log(tasks);

Результат:

["study JavaScript", "drink coffee", "build a website"]

Это полезно, когда пользователь что-то добавляет.

Новую задачу.

Новый товар.

Новое сообщение.

Новую проблему.

Особенно последнее.

Веб-разработка любит новые проблемы.

Удаление Элементов с Помощью pop

Чтобы удалить последний элемент из массива, используем pop.

Пример:

const fruits = ["apple", "banana", "orange"];

fruits.pop();

console.log(fruits);

Результат:

["apple", "banana"]

pop удаляет последний элемент.

Он также может вернуть удалённый элемент:

const fruits = ["apple", "banana", "orange"];

const removedFruit = fruits.pop();

console.log(removedFruit);
console.log(fruits);

Результат:

orange
["apple", "banana"]

Апельсин был удалён.

Но мы сохранили его в переменную.

Очень драматично.

Очень организованно.

Длина Массива

Чтобы проверить, сколько элементов есть в массиве, используем .length.

Пример:

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length);

Результат:

Это говорит нам, что в массиве три элемента.

Ещё один пример:

const students = ["Anna", "Marco", "Luca", "Sofia"];

console.log(`There are ${students.length} students.`);

Результат:

There are 4 students.

.length очень полезен.

Особенно когда нужно пройти массив с помощью цикла.

И да.

Циклы уже идут.

Не убегай.

Они дружелюбные.

В основном.

Проход По Массиву

Представь, что у нас есть такой массив:

const fruits = ["apple", "banana", "orange"];

Мы могли бы вывести каждый элемент вручную:

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Это работает.

Но это не гибко.

А если у нас 100 элементов?

Писать 100 раз console.log?

Нет.

У нас есть достоинство.

Мы используем цикл.

Пример:

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Результат:

apple
banana
orange

Как это работает?

let i = 0

Начинаем с индекса 0.

i < fruits.length

Продолжаем, пока i меньше длины массива.

i++

После каждого прохода увеличиваем i.

Потом:

fruits[i]

получает текущий элемент.

Это очень распространённый шаблон в JavaScript.

Ты будешь видеть его везде.

Как пыль.

Но полезную пыль.

Цикл for...of

Есть также более простой способ проходить массивы.

Пример:

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Результат:

apple
banana
orange

Это цикл for...of.

Он чистый и легко читается.

Используй его, когда хочешь сразу получать каждый элемент.

Пример:

const names = ["Anna", "Marco", "Viktor"];

for (const name of names) {
  console.log(`Hello, ${name}!`);
}

Результат:

Hello, Anna!
Hello, Marco!
Hello, Viktor!

Очень красиво.

Очень читаемо.

Без драмы с индексами.

for или for...of?

Используй обычный цикл for, когда тебе нужен индекс.

Пример:

const products = ["Laptop", "Mouse", "Keyboard"];

for (let i = 0; i < products.length; i++) {
  console.log(`${i}: ${products[i]}`);
}

Результат:

0: Laptop
1: Mouse
2: Keyboard

Используй for...of, когда тебе нужно только значение.

Пример:

const products = ["Laptop", "Mouse", "Keyboard"];

for (const product of products) {
  console.log(product);
}

Результат:

Laptop
Mouse
Keyboard

Простое правило:

Если нужен индекс — используй for.

Если нужен только элемент — используй for...of.

JavaScript даёт выбор.

Иногда слишком большой.

Но эти два варианта действительно полезны.

Массивы и Условия

Ты можешь использовать условия внутри циклов.

Пример:

const prices = [10, 25, 50, 5, 100];

for (const price of prices) {
  if (price > 20) {
    console.log(`Expensive item: €${price}`);
  }
}

Результат:

Expensive item: €25
Expensive item: €50
Expensive item: €100

Это мощно.

Ты можешь фильтровать данные.

Находить важные элементы.

Проверять правила.

Пример:

const ages = [12, 18, 25, 16, 40];

for (const age of ages) {
  if (age >= 18) {
    console.log(`${age} can enter.`);
  } else {
    console.log(`${age} cannot enter.`);
  }
}

Результат:

12 cannot enter.
18 can enter.
25 can enter.
16 cannot enter.
40 can enter.

Массивы хранят данные.

Циклы проходят по данным.

Условия принимают решения.

JavaScript начинает выглядеть как маленький офисный работник.

Немного уставший.

Но продуктивный.

Массивы и Функции

Массивы очень хорошо работают с функциями.

Пример:

function showProducts(products) {
  for (const product of products) {
    console.log(product);
  }
}

const products = ["Laptop", "Mouse", "Keyboard"];

showProducts(products);

Результат:

Laptop
Mouse
Keyboard

Здесь функция получает массив.

Потом проходит по нему циклом.

Это очень часто встречается в реальных проектах.

Ещё один пример:

function countItems(items) {
  return items.length;
}

const tasks = ["study", "practice", "build"];

console.log(countItems(tasks));

Результат:

Функции и массивы — хорошие друзья.

Функции выполняют действия.

Массивы хранят данные.

Вместе они опасны.

В хорошем смысле.

В основном.

Создай Список Задач

Теперь создадим маленькую страницу, которая показывает список задач.

Обнови index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Массивы</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    p,
    li {
      font-size: 20px;
      line-height: 1.6;
    }

    ul {
      padding-left: 24px;
    }

    li {
      margin-bottom: 10px;
    }

    .count {
      font-weight: 700;
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>Массивы</h1>

  <div class="card">
    <h2>Сегодняшние Задачи</h2>
    <p id="taskCount" class="count"></p>
    <ul id="taskList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

Теперь обнови script.js:

const tasks = [
  "Learn arrays",
  "Practice loops",
  "Build a small project",
  "Drink coffee"
];

const taskListElement = document.getElementById("taskList");
const taskCountElement = document.getElementById("taskCount");

function showTaskCount(tasks) {
  taskCountElement.textContent = `You have ${tasks.length} tasks today.`;
}

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

showTaskCount(tasks);
showTasks(tasks);

Обнови браузер.

Ты должен увидеть список задач на странице.

JavaScript взял массив и создал из него HTML-элементы.

Это важно.

Очень важно.

Потому что многие реальные сайты работают именно так:

получают данные;
сохраняют данные в массиве;
проходят по массиву;
создают HTML;
показывают всё пользователю.

Это не просто теория.

Это настоящая веб-разработка.

Маленькая.

Простая.

Но настоящая.

Браузер больше не декоративная картошка.

Он работает.

Как Работает Этот Код

Этот массив хранит задачи:

const tasks = [
  "Learn arrays",
  "Practice loops",
  "Build a small project",
  "Drink coffee"
];

Это находит список в HTML:

const taskListElement = document.getElementById("taskList");

Это находит абзац с количеством задач:

const taskCountElement = document.getElementById("taskCount");

Эта функция показывает, сколько у нас задач:

function showTaskCount(tasks) {
  taskCountElement.textContent = `You have ${tasks.length} tasks today.`;
}

Эта функция создаёт элементы списка:

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Это запускает обе функции:

showTaskCount(tasks);
showTasks(tasks);

Обрати внимание на важную вещь.

Массив содержит данные.

Функции решают, что делать с этими данными.

Это помогает держать код в порядке.

Не идеально.

Но лучше.

Идеальность всё равно подозрительна.

Типичные Ошибки

Забыть, что Массивы Начинаются с Нуля

Неправильное ожидание:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[1]);

Можно ожидать:

apple

Но получишь:

banana

Потому что первый элемент имеет индекс 0.

Правильно:

console.log(fruits[0]);

Результат:

apple

JavaScript начинает с нуля.

Прими это.

Попей воды.

Иди дальше.

Использование Индекса, Которого Не Существует

Пример:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[10]);

Результат:

undefined

Элемента с индексом 10 нет.

JavaScript не злится.

Там просто пусто.

Как в холодильнике после полуночи.

Использование `<=` Вместо `<` в Цикле

Неправильно:

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i <= fruits.length; i++) {
  console.log(fruits[i]);
}

Это может вывести:

apple
banana
orange
undefined

Почему?

Потому что последний правильный индекс — 2.

А fruits.length равен 3.

Правильно:

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Используй <.

Не <=.

Маленький знак.

Большая разница.

Как один винтик в стуле.

Вроде мелочь.

А потом ты сидишь на полу.

Забыть Очистить Список

Если запустить функцию много раз, она может добавить одни и те же элементы несколько раз.

Пример:

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Если эта функция запустится дважды, задачи появятся дважды.

Чтобы этого избежать, сначала очисти список:

function showTasks(tasks) {
  taskListElement.innerHTML = "";

  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Это удаляет старое содержимое перед добавлением нового.

Очень полезно.

Особенно когда страница начинает дублировать элементы, как сломанный принтер.

Практика

Создай массив с названием favoriteLanguages.

Он должен содержать минимум три языка программирования.

Пример:

const favoriteLanguages = ["JavaScript", "Python", "Java"];

Выведи каждый язык с помощью цикла for...of.

Пример:

for (const language of favoriteLanguages) {
  console.log(language);
}

Потом создай массив с названием scores.

Пример:

const scores = [10, 25, 8, 40, 15];

Выведи только результаты больше 20.

Пример:

for (const score of scores) {
  if (score > 20) {
    console.log(score);
  }
}

Запусти код.

Измени значения.

Сломай его.

Почини его.

Это всё ещё лучший способ учиться.

JavaScript любит практику.

И иногда жертвы.

Но в основном практику.

Мини-Челлендж

Создай маленькую страницу с:

заголовком;
абзацем, который показывает, сколько элементов есть в списке;
пустым <ul>;
массивом товаров;
функцией, которая показывает все товары на странице.

Пример массива:

const products = [
  "Laptop",
  "Mouse",
  "Keyboard",
  "Monitor"
];

Создай функцию:

function showProducts(products) {
  // create list items here
}

Бонус:

Добавь ещё одну функцию с названием showProductCount.

Она должна показать сообщение:

There are 4 products.

Используй:

products.length

Этот челлендж очень близок к реальной веб-разработке.

У тебя есть данные.

Ты показываешь данные.

Ты держишь логику в функциях.

Так мы избегаем спагетти.

Или хотя бы готовим спагетти получше.

Итог

Сегодня ты изучил:

массивы хранят много значений;
массивы используют квадратные скобки;
каждый элемент массива имеет индекс;
индексы в JavaScript начинаются с нуля;
можно получать элементы по индексу;
можно изменять элементы массива;
push добавляет элемент в конец;
pop удаляет последний элемент;
.length показывает количество элементов;
циклы могут проходить по массивам;
for...of — чистый способ читать элементы;
массивы хорошо работают с функциями;
массивы могут создавать HTML-элементы динамически.

Это большой шаг.

Массивы в JavaScript повсюду.

Когда ты видишь список товаров, постов, пользователей, задач, комментариев или фотографий, где-то за сценой, скорее всего, работает массив.

Тихо.

Уставший.

Но полезный.

Следующий Урок

В следующем уроке мы изучим объекты.

Объекты помогают хранить данные более структурированно.

Потому что иногда этого недостаточно:

const user = "Viktor";

Иногда нужно вот так:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

Массивы — для списков.

Объекты — для деталей.

Вместе они повсюду.

JavaScript становится серьёзным.

Всё ещё странным.

Но серьёзным.

Массивы

Что Ты Изучишь

Что Такое Массив?

Создай Проект

Напиши HTML

Твой Первый Массив

Индексы Массива

Получение Элементов Массива

Изменение Элементов Массива

Добавление Элементов с Помощью push

Удаление Элементов с Помощью pop

Длина Массива

Проход По Массиву

Цикл for...of

for или for...of?

Массивы и Условия

Массивы и Функции

Создай Список Задач

Как Работает Этот Код

Типичные Ошибки

Забыть, что Массивы Начинаются с Нуля

Использование Индекса, Которого Не Существует

Использование <= Вместо < в Цикле

Забыть Очистить Список

Практика

Мини-Челлендж

Итог

Следующий Урок

Использование `<=` Вместо `<` в Цикле