Массивы, цикл for

1. Что такое массив?🧩

Массив — это структура данных, которая представляет собой упорядоченную коллекцию элементов, заключенную в квадратные скобки [].

🔍 Ключевые характеристики:

• Хранение данных: может содержать различные типы данных (числа, строки, объекты, другие массивы).
• Организация: как "коробка" или "сумка" с элементами.
• Индексация: нумерация элементов начинается с 0 (не с 1!).

📋 Примеры массивов:

// Массив чисел
var arrayOfNumbers = [13, 24, 56, 100]
 
// Массив строк
var arrayOfNames = ["Дима", "Саша", "Аня", "Коля"]
 
// Вместо работы с каждой кнопкой по отдельности создаем массив
var operationButtons = [buttonPlus, buttonMinus, buttonMultiply, buttonDivide]

🔢 Доступ к элементам:

var firstElement = names[0] // "Дима"
var secondElement = names[1] // "Саша"

function addCommonEventListener(i) {
  operationButtons[i].addEventListener("click", onOperationButtonClick)
}
var operationButtons = [buttonPlus, buttonMinus, buttonMultiply, buttonDivide]
addCommonEventListener(0)
addCommonEventListener(1)
addCommonEventListener(2)
addCommonEventListener(3)

❌ Проблема дублирования кода:

// ⛔ Крайне неэффективный подход
addCommonEventListener(0)
addCommonEventListener(1)
addCommonEventListener(2)
addCommonEventListener(3)
addCommonEventListener(4)
addCommonEventListener(5)
addCommonEventListener(6)
addCommonEventListener(7)
addCommonEventListener(8)
addCommonEventListener(9)
// ... и так 40 раз! 😫

2. Автоматизация с помощью цикла for 🔁

📝Синтаксис цикла for:

for (инициализация; условие; изменение) {
  // тело цикла
}

🧠 Пример использования:

for (var i = 0; i < operationButtons.length; i++) {
  var button = operationButtons[i] // Получаем текущую кнопку
  button.addEventListener("click", onOperationButtonClick) // Привязываем обработчик
}

🔄 Логика выполнения цикла for

Пошаговый процесс:

1. let i = 0 - 🚀 инициализация счетчика

   • Создается итерационная переменная (i) и ей присваивается начальное значение.

2. i < operationsButtons.length - проверка условия 🔍

   • Происходит проверка: если условие истинно (true), выполняется шаг 3. Если ложно (false), цикл завершается (переход к шагу 6).

3. { // Тело цикла } - выполняется тело цикла ⚡

   • Выполняются все команды, заключенные в фигурные скобки {}.

4. i++ - увеличение счетчика ➕

   • Значение итерационной переменной изменяется (обычно увеличивается на 1).

5. ➰ возврат к шагу 2

   • Управление передается обратно на проверку условия.

6. false - выход из цикла ✅

   • Выполнение программы продолжается со следующей команды после цикла.

🎪 Итерационная переменная

Переменная i (от слова index) — это счетчик, который:

• 📶 Последовательно принимает значения 0, 1, 2, 3...
• 🔗 Позволяет обращаться к элементам массива по его индексу (например, operationButtons[i]).
• 🤖 Автоматически изменяется после каждой итерации (например, с помощью i++).

3. Ключевые преимущества💡

✅ Плюсы использования массивов + циклов:

• Сокращение кода 📉
• Улучшение читаемости 👀
• Легкое масштабирование 📈
• Автоматизация рутинных задач ⚙️