Изучите структуры циклов в JavaScript

Введение

В этом лабе студенты углубятся в структуры циклов JavaScript, изучая различные методы итерации, которые являются фундаментальными для логики программирования. Лаб涵盖了基本的循环类型，包括 while 循环、do-while 循环、for 循环和 for-in 循环，通过实际的编码示例和渐进式学习，为每种结构提供实践经验。

Участники начнут с понимания базового синтаксиса while-циклов, узнавая, как создавать контролируемые итерации и выполнять задачи, такие как подсчет и условный поиск. При продвижении они будут практиковать реализацию различных структур циклов, сравнивать их уникальные характеристики и области применения, что поможет развить комплексное понимание того, как циклы могут быть использованы для манипуляции данными, итерации по массивам и создания динамических решений в JavaScript.

Изучите синтаксис и базовое использование цикла while

В этом шаге вы узнаете о базовом синтаксисе и использовании циклов while в JavaScript. Циклы while - это фундаментальные управляющие структуры, которые позволяют повторять блок кода, пока заданное условие истинно.

Давайте начнём с создания нового файла JavaScript для изучения циклов while. Откройте WebIDE и создайте файл с именем whileLoop.js в директории ~/project.

// Создадим простой цикл while для подсчёта от 1 до 5
let count = 1;

while (count <= 5) {
  console.log(`Текущее значение счётчика: ${count}`);
  count++;
}

Теперь запустите файл JavaScript с использованием Node.js, чтобы увидеть вывод:

node ~/project/whileLoop.js

Пример вывода:

Текущее значение счётчика: 1
Текущее значение счётчика: 2
Текущее значение счётчика: 3
Текущее значение счётчика: 4
Текущее значение счётчика: 5

Разберёмся с синтаксисом цикла while:

• let count = 1; инициализирует переменную-счётчик перед циклом
• while (count <= 5) определяет условие, которое должно быть истинным, чтобы продолжать цикл
• console.log() выводит текущее значение count
• count++ увеличивает счётчик на каждой итерации

Теперь создадим более практический пример, демонстрирующий цикл while с более сложным условием:

// Создадим цикл while для поиска первого числа, которое делится на 3 и на 5
let number = 1;

while (!(number % 3 === 0 && number % 5 === 0)) {
  number++;
}

console.log(`Первое число, делящееся на 3 и на 5: ${number}`);

Запустите файл снова:

node ~/project/whileLoop.js

Пример вывода:

Первое число, делящееся на 3 и на 5: 15

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

Практикуйте цикл do-while с инкрементальной итерацией

В этом шаге вы узнаете о циклах do-while в JavaScript, которые похожи на циклы while, но с важной разницей: блок кода выполняется хотя бы один раз перед проверкой условия.

Создайте новый файл с именем doWhileLoop.js в директории ~/project с использованием WebIDE:

// Демонстрируем цикл do-while с имитацией ввода пользователя
let attempts = 0;
let secretNumber = 7;
let guess;

do {
  // Имитируем случайный угадывание между 1 и 10
  guess = Math.floor(Math.random() * 10) + 1;
  attempts++;

  console.log(`Попытка ${attempts}: Угадано ${guess}`);

  if (guess === secretNumber) {
    console.log(`Поздравляем! Вы угадали число за ${attempts} попыток.`);
  }
} while (guess !== secretNumber);

Запустите файл JavaScript, чтобы увидеть, как работает цикл do-while:

node ~/project/doWhileLoop.js

Пример вывода:

Попытка 1: Угадано 3
Попытка 2: Угадано 9
Попытка 3: Угадано 7
Поздравляем! Вы угадали число за 3 попытки.

Основные характеристики циклов do-while:

• Блок кода выполняется хотя бы один раз перед проверкой условия
• Условие проверяется в конце каждой итерации
• Полезен, когда нужно гарантировать, что код выполнится хотя бы один раз

Давайте создадим еще один пример, чтобы более наглядно показать цикл do-while:

// Демонстрируем инкрементальную итерацию с циклом do-while
let total = 0;
let i = 1;

do {
  total += i;
  console.log(`Текущая сумма: ${total}, Текущее число: ${i}`);
  i++;
} while (total < 10);

console.log(`Конечная сумма: ${total}`);

Запустите файл снова:

node ~/project/doWhileLoop.js

Пример вывода:

Текущая сумма: 1, Текущее число: 1
Текущая сумма: 3, Текущее число: 2
Текущая сумма: 6, Текущее число: 3
Текущая сумма: 10, Текущее число: 4
Конечная сумма: 10

Этот пример показывает, как циклы do-while могут быть использованы для инкрементальной итерации, гарантируя, что блок кода выполнится хотя бы один раз перед проверкой условия завершения.

Реализуйте цикл for для контролируемых итераций

В этом шаге вы узнаете о циклах for в JavaScript, которые предоставляют простой способ для выполнения контролируемых итераций с четким началом, концом и механизмом инкремента/декремента.

Создайте новый файл с именем forLoop.js в директории ~/project с использованием WebIDE:

// Базовый цикл for для вывода чисел от 1 до 5
console.log("Базовый цикл подсчета:");
for (let i = 1; i <= 5; i++) {
  console.log(`Текущее число: ${i}`);
}

// Цикл for для вычисления факториала числа
console.log("\nВычисление факториала:");
let number = 5;
let factorial = 1;

for (let j = 1; j <= number; j++) {
  factorial *= j;
}

console.log(`Факториал ${number} равен: ${factorial}`);

// Цикл for для итерации по массиву
console.log("\nИтерация по массиву:");
let fruits = ["apple", "banana", "cherry", "date"];

for (let k = 0; k < fruits.length; k++) {
  console.log(`Фрукт по индексу ${k}: ${fruits[k]}`);
}

Запустите файл JavaScript, чтобы увидеть различные примеры цикла for:

node ~/project/forLoop.js

Пример вывода:

Базовый цикл подсчета:
Текущее число: 1
Текущее число: 2
Текущее число: 3
Текущее число: 4
Текущее число: 5

Вычисление факториала:
Факториал 5 равен: 120

Итерация по массиву:
Фрукт по индексу 0: apple
Фрукт по индексу 1: banana
Фрукт по индексу 2: cherry
Фрукт по индексу 3: date

Разберёмся с синтаксисом цикла for:

• for (initialization; condition; increment/decrement) - стандартная структура
• let i = 1 инициализирует счётчик цикла
• i <= 5 определяет условие продолжения
• i++ увеличивает счётчик после каждой итерации

Создайте еще один пример, демонстрирующий более сложное использование цикла for:

// Вложенный цикл for для создания таблицы умножения
console.log("Таблица умножения:");
for (let row = 1; row <= 5; row++) {
  let rowOutput = "";
  for (let col = 1; col <= 5; col++) {
    rowOutput += `${row * col}\t`;
  }
  console.log(rowOutput);
}

Запустите файл снова:

node ~/project/forLoop.js

Пример вывода:

Таблица умножения:
1 2 3 4 5
2 4 6 8 10
3 6 9 12 15
4 8 12 16 20
5 10 15 20 25

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

Используйте цикл for-in для перебора элементов массива

В этом шаге вы узнаете о цикле for-in в JavaScript, который предоставляет простой способ итерировать по свойствам объекта или элементам массива.

Создайте новый файл с именем forInLoop.js в директории ~/project с использованием WebIDE:

// Итерирование по массиву с использованием цикла for-in
let fruits = ["apple", "banana", "cherry", "date"];

console.log("Итерирование по индексам массива:");
for (let index in fruits) {
  console.log(`Индекс: ${index}, Фрукт: ${fruits[index]}`);
}

// Итерирование по объекту с использованием цикла for-in
let student = {
  name: "John Doe",
  age: 22,
  major: "Computer Science",
  gpa: 3.8
};

console.log("\nИтерирование по свойствам объекта:");
for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// Практический пример: вычисление общей стоимости товаров
let shoppingCart = [
  { name: "Ноутбук", price: 1000 },
  { name: "Наушники", price: 100 },
  { name: "Мышь", price: 50 }
];

console.log("\nВычисление общей стоимости:");
let totalPrice = 0;
for (let index in shoppingCart) {
  totalPrice += shoppingCart[index].price;
}
console.log(`Общая стоимость: $${totalPrice}`);

Запустите файл JavaScript, чтобы увидеть работу цикла for-in:

node ~/project/forInLoop.js

Пример вывода:

Итерирование по индексам массива:
Индекс: 0, Фрукт: apple
Индекс: 1, Фрукт: banana
Индекс: 2, Фрукт: cherry
Индекс: 3, Фрукт: date

Итерирование по свойствам объекта:
name: John Doe
age: 22
major: Computer Science
gpa: 3.8

Вычисление общей стоимости:
Общая стоимость: $1150

Основные моменты о циклах for-in:

• Работает как с массивами, так и с объектами
• Итерируется по индексам (для массивов) или свойствам (для объектов)
• Предоставляет простой способ доступа к элементам без использования традиционных циклов с индексами
• Будьте осторожны при использовании с массивами, так как он итерируется по всем перечисляемым свойствам

Давайте рассмотрим еще один пример, чтобы продемонстрировать его гибкость:

// Использование цикла for-in для фильтрации и преобразования данных
let grades = {
  math: 85,
  science: 92,
  english: 78,
  history: 88
};

console.log("Фильтрация оценок выше 80:");
for (let subject in grades) {
  if (grades[subject] > 80) {
    console.log(`${subject}: ${grades[subject]}`);
  }
}

Запустите файл снова:

node ~/project/forInLoop.js

Пример вывода:

Фильтрация оценок выше 80:
math: 85
science: 92
history: 88

Сравните и противопоставьте разные структуры циклов

В этом шаге вы изучите различия между различными структурами циклов в JavaScript и узнаете, когда эффективно использовать каждый тип цикла.

Создайте новый файл с именем loopComparison.js в директории ~/project с использованием WebIDE:

// Демонстрация различных структур циклов для одной и той же задачи

// 1. Цикл while: Лучший для неизвестного количества итераций
console.log("Пример цикла while:");
let whileCounter = 1;
while (whileCounter <= 5) {
  console.log(`Цикл while: ${whileCounter}`);
  whileCounter++;
}

// 2. Цикл do-while: Гарантирует хотя бы одну итерацию
console.log("\nПример цикла do-while:");
let doWhileCounter = 1;
do {
  console.log(`Цикл do-while: ${doWhileCounter}`);
  doWhileCounter++;
} while (doWhileCounter <= 5);

// 3. Цикл for: Лучший для известного количества итераций
console.log("\nПример цикла for:");
for (let forCounter = 1; forCounter <= 5; forCounter++) {
  console.log(`Цикл for: ${forCounter}`);
}

// 4. Цикл for-in: Итерирование по свойствам объекта
console.log("\nПример цикла for-in:");
let student = {
  name: "John Doe",
  age: 22,
  major: "Computer Science"
};

for (let property in student) {
  console.log(`${property}: ${student[property]}`);
}

// 5. Сравнение производительности циклов
console.log("\nСравнение производительности циклов:");
const iterations = 1000000;

console.time("Цикл while");
let a = 0;
while (a < iterations) {
  a++;
}
console.timeEnd("Цикл while");

console.time("Цикл for");
for (let b = 0; b < iterations; b++) {}
console.timeEnd("Цикл for");

Запустите файл JavaScript, чтобы увидеть сравнение:

node ~/project/loopComparison.js

Пример вывода:

Пример цикла while:
Цикл while: 1
Цикл while: 2
Цикл while: 3
Цикл while: 4
Цикл while: 5

Пример цикла do-while:
Цикл do-while: 1
Цикл do-while: 2
Цикл do-while: 3
Цикл do-while: 4
Цикл do-while: 5

Пример цикла for:
Цикл for: 1
Цикл for: 2
Цикл for: 3
Цикл for: 4
Цикл for: 5

Пример цикла for-in:
name: John Doe
age: 22
major: Computer Science

Сравнение производительности циклов:
Цикл while: 2.345мс
Цикл for: 1.876мс

Основные различия:

1. Цикл while:

   • Используйте, когда количество итераций неизвестно
   • Условие проверяется перед каждой итерацией
   • Может не выполниться, если условие ложно с самого начала

2. Цикл do-while:

   • Гарантирует хотя бы одну итерацию
   • Условие проверяется после каждой итерации
   • Полезен, когда нужно выполнить код хотя бы один раз

3. Цикл for:

   • Лучший для известного количества итераций
   • Компактный синтаксис с инициализацией, условием и инкрементом
   • Чаще всего используется для итерации по массивам и подсчета

4. Цикл for-in:

   • Особенно для итерирования по свойствам объекта
   • Работает с объектами и массивами
   • Предоставляет индексы или имена свойств

Давайте создадим последний пример, чтобы продемонстрировать выбор правильного цикла:

// Выбор правильного цикла для различных сценариев
let numbers = [10, 20, 30, 40, 50];

// Цикл while для условного поиска
console.log("\nВыбор правильного цикла:");
let searchValue = 30;
let index = 0;
while (index < numbers.length && numbers[index] !== searchValue) {
  index++;
}
console.log(`Найдено ${searchValue} по индексу: ${index}`);

// Цикл for для простой итерации
console.log("Квадраты чисел:");
for (let i = 0; i < numbers.length; i++) {
  console.log(`${numbers[i]} в квадрате: ${numbers[i] * numbers[i]}`);
}

Запустите файл снова:

node ~/project/loopComparison.js

Пример вывода:

Выбор правильного цикла:
Найдено 30 по индексу: 2
Квадраты чисел:
10 в квадрате: 100
20 в квадрате: 400
30 в квадрате: 900
40 в квадрате: 1600
50 в квадрате: 2500

Резюме

В этом практическом занятии участники изучали различные структуры циклов в JavaScript, сосредоточившись на понимании и реализации разных типов циклов. Практическое занятие началось с глубокого изучения циклов while, демонстрации их базового синтаксиса и практических применений с помощью примеров подсчета итераций и поиска конкретных числовых условий. Участники узнали, как инициализировать переменные цикла, определить условия цикла и использовать операторы инкремента для управления выполнением цикла.

Практическое занятие продолжалось с изучением дополнительных типов циклов, включая циклы do-while, for и for-in, предоставляя практический опыт работы с каждой структурой. Сравнив и противопоставив эти механизмы циклов, ученики приобрели понимание способа выбора подходящих структур циклов для различных сценариев программирования, повысив свои навыки программирования на JavaScript и加深了对控制流机制的理解。