25 KiB

Raw Blame History Unescape Escape

Основы JavaScript: массивы и циклы

Скетчноут от Tomomi Imura

Тест перед лекцией

Задумывались ли вы, как сайты отслеживают товары в корзине или отображают список ваших друзей? Здесь на помощь приходят массивы и циклы. Массивы — это как цифровые контейнеры, которые хранят несколько элементов информации, а циклы позволяют работать с этими данными эффективно, без повторяющегося кода.

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

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

🎥 Нажмите на изображения выше, чтобы посмотреть видео о массивах и циклах.

Вы можете пройти этот урок на Microsoft Learn!

Массивы

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

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

✅ Массивы повсюду! Можете ли вы придумать пример массива в реальной жизни, например, массив солнечных панелей?

Создание массивов

Создать массив очень просто — просто используйте квадратные скобки!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Что здесь происходит? Вы только что создали пустой контейнер, используя квадратные скобки []. Представьте это как пустую полку в библиотеке — она готова к тому, чтобы на ней разместить любые книги, которые вы захотите.

Вы также можете сразу заполнить массив начальными значениями:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Интересные моменты:

В одном массиве можно хранить текст, числа или даже значения true/false
Просто разделяйте каждый элемент запятой — легко!
Массивы идеально подходят для хранения связанных данных

Индексация массива

Вот что может показаться необычным на первый взгляд: массивы нумеруют свои элементы, начиная с 0, а не с 1. Этот подход с нумерацией с нуля связан с тем, как работает память компьютера — это стало стандартом программирования с первых дней существования языков, таких как C. Каждое место в массиве получает свой номер адреса, называемый индексом.

Индекс	Значение	Описание
0	"Шоколад"	Первый элемент
1	"Клубника"	Второй элемент
2	"Ваниль"	Третий элемент
3	"Фисташковое"	Четвертый элемент
4	"Рокки Роуд"	Пятый элемент

✅ Вас удивляет, что массивы начинаются с нулевого индекса? В некоторых языках программирования индексация начинается с 1. Это интересная история, о которой вы можете прочитать на Википедии.

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

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Разберем, что здесь происходит:

Используется нотация квадратных скобок с номером индекса для доступа к элементам
Возвращается значение, хранящееся в указанной позиции массива
Начинается отсчет с 0, поэтому первый элемент имеет индекс 0

Изменение элементов массива:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

В приведенном выше примере мы:

Изменили элемент с индексом 4 с "Рокки Роуд" на "Масляный орех"
Добавили новый элемент "Печенье с тестом" с индексом 5
Автоматически увеличили длину массива, добавив элемент за пределами текущих границ

Длина массива и основные методы

Массивы имеют встроенные свойства и методы, которые значительно упрощают работу с данными.

Определение длины массива:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Основные моменты:

Возвращает общее количество элементов в массиве
Автоматически обновляется, когда элементы добавляются или удаляются
Предоставляет динамический счетчик, полезный для циклов и проверки

Основные методы массивов:

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

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Что нужно знать о методах:

Добавляют элементы с помощью push() (в конец) и unshift() (в начало)
Удаляют элементы с помощью pop() (с конца) и shift() (с начала)
Находят элементы с помощью indexOf() и проверяют наличие с помощью includes()
Возвращают полезные значения, такие как удаленные элементы или индексы позиций

✅ Попробуйте сами! Используйте консоль вашего браузера, чтобы создать и изменить массив по вашему выбору.

Циклы

Представьте себе наказание из романов Чарльза Диккенса, где ученики должны были многократно писать одну и ту же фразу на доске. А теперь представьте, что вы можете просто сказать кому-то: "Напиши это предложение 100 раз", и оно будет выполнено автоматически. Именно это делают циклы для вашего кода.

Циклы — это как неутомимый помощник, который может повторять задачи без ошибок. Независимо от того, нужно ли вам проверить каждый элемент в корзине покупок или показать все фотографии в альбоме, циклы эффективно справляются с повторением.

JavaScript предлагает несколько типов циклов на выбор. Давайте рассмотрим каждый из них и поймем, когда их использовать.

Цикл for

Цикл for похож на таймер — вы точно знаете, сколько раз хотите выполнить действие. Он очень организован и предсказуем, что делает его идеальным для работы с массивами или подсчета чего-либо.

Структура цикла for:

Компонент	Назначение	Пример
Инициализация	Устанавливает начальную точку	`let i = 0`
Условие	Когда продолжать	`i < 10`
Инкремент	Как обновлять	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Шаг за шагом, вот что происходит:

Инициализируется переменная-счетчик i со значением 0 в начале
Проверяется условие i < 10 перед каждой итерацией
Выполняется блок кода, если условие истинно
Увеличивается i на 1 после каждой итерации с помощью i++
Останавливается, когда условие становится ложным (когда i достигает 10)

✅ Запустите этот код в консоли браузера. Что произойдет, если вы немного измените счетчик, условие или выражение итерации? Можете ли вы заставить его работать в обратном порядке, создавая обратный отсчет?

Цикл while

Цикл while похож на команду "продолжай делать это, пока...". Вы можете не знать точно, сколько раз он будет выполняться, но знаете, когда он должен остановиться. Это идеально подходит для таких задач, как запрос ввода от пользователя, пока он не предоставит нужную информацию, или поиск данных, пока вы не найдете то, что ищете.

Характеристики цикла while:

Продолжает выполнение, пока условие истинно
Требует ручного управления переменными-счетчиками
Проверяет условие перед каждой итерацией
Риск бесконечного цикла, если условие никогда не становится ложным

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Понимание этих примеров:

Управляет переменной-счетчиком i вручную внутри тела цикла
Увеличивает счетчик, чтобы избежать бесконечных циклов
Демонстрирует практическое применение с вводом пользователя и ограничением попыток
Включает механизмы безопасности для предотвращения бесконечного выполнения

Современные альтернативы циклам

JavaScript предлагает современный синтаксис циклов, который делает ваш код более читаемым и менее подверженным ошибкам.

Цикл for...of (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Основные преимущества for...of:

Устраняет управление индексами и возможные ошибки
Обеспечивает прямой доступ к элементам массива
Улучшает читаемость кода и снижает сложность синтаксиса

Метод forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Что нужно знать о forEach:

Выполняет функцию для каждого элемента массива
Предоставляет значение элемента и индекс в качестве параметров
Нельзя остановить досрочно (в отличие от традиционных циклов)
Возвращает undefined (не создает новый массив)

✅ Почему вы выбрали бы цикл for вместо цикла while? 17 тысяч пользователей задавали тот же вопрос на StackOverflow, и некоторые мнения могут быть вам интересны.

Циклы и массивы

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

Традиционная обработка массива:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Давайте разберем каждый подход:

Использует свойство длины массива для определения границ цикла
Получает доступ к элементам по индексу в традиционных циклах for
Предоставляет прямой доступ к элементам в циклах for...of
Обрабатывает каждый элемент массива ровно один раз

Пример практической обработки данных:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Как работает этот код:

Инициализирует переменные для отслеживания суммы и экстремальных значений
Обрабатывает каждую оценку с помощью одного эффективного цикла
Суммирует общий результат для расчета среднего значения
Отслеживает наивысшие и наименьшие значения во время итерации
Вычисляет окончательную статистику после завершения цикла

✅ Попробуйте перебрать массив, созданный вами, в консоли браузера.

Задача GitHub Copilot Agent 🚀

Воспользуйтесь режимом Agent, чтобы выполнить следующий вызов:

Описание: Создайте комплексную функцию обработки данных, которая объединяет массивы и циклы для анализа набора данных и генерации значимых выводов.

Задание: Создайте функцию analyzeGrades, которая принимает массив объектов с оценками студентов (каждый объект содержит свойства name и score) и возвращает объект со статистикой, включая наивысшую оценку, наименьшую оценку, среднюю оценку, количество студентов, которые сдали (score >= 70), и массив имен студентов, набравших выше среднего. Используйте как минимум два разных типа циклов в вашем решении.

Узнайте больше о режиме Agent здесь.

🚀 Вызов

JavaScript предлагает несколько современных методов работы с массивами, которые могут заменить традиционные циклы для выполнения определенных задач. Изучите forEach, for-of, map, filter и reduce.

Ваш вызов: Перепишите пример с оценками студентов, используя как минимум три различных метода работы с массивами. Обратите внимание, насколько чище и понятнее становится код с современным синтаксисом JavaScript.

Тест после лекции

Обзор и самостоятельное изучение

Массивы в JavaScript имеют множество встроенных методов, которые чрезвычайно полезны для манипуляции данными. Изучите эти методы и попробуйте некоторые из них (например, push, pop, slice и splice) на созданном вами массиве.

Задание

Цикл по массиву

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

25 KiB Raw Blame History Unescape Escape