Web-Dev-For-Beginners/translations/ru/2-js-basics/4-arrays-loops

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

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

Викторина перед лекцией

Викторина перед лекцией

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

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

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

Массивы

Работа с данными — это распространённая задача в любом языке программирования, и она становится намного проще, если данные организованы в структурированном формате, таком как массивы. С помощью массивов данные хранятся в структуре, похожей на список. Одним из главных преимуществ массивов является то, что в одном массиве можно хранить данные разных типов.

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

Синтаксис массива — это пара квадратных скобок.

let myArray = [];

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

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

Значения массива получают уникальное значение, называемое индексом — целое число, которое присваивается в зависимости от его расстояния от начала массива. В приведённом выше примере строковое значение "Chocolate" имеет индекс 0, а индекс "Rocky Road" равен 4. Используйте индекс с квадратными скобками, чтобы получить, изменить или вставить значения массива.

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

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

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

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

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

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Более распространённый способ добавления значений в массив — использование операторов массива, таких как array.push().

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

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

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

Циклы

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

Цикл for

Цикл for требует 3 части для итерации:

• счётчик Переменная, которая обычно инициализируется числом и отслеживает количество итераций
• условие Выражение, использующее операторы сравнения, чтобы остановить цикл, когда оно становится false
• выражение-итерация Выполняется в конце каждой итерации, обычно используется для изменения значения счётчика

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

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

Цикл while

В отличие от синтаксиса цикла for, циклы while требуют только условия, которое остановит цикл, когда оно станет false. Условия в циклах обычно зависят от других значений, таких как счётчики, и должны управляться в процессе выполнения цикла. Начальные значения для счётчиков должны быть созданы вне цикла, а любые выражения для выполнения условия, включая изменение счётчика, должны поддерживаться внутри цикла.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

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

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

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

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

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

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

---

🚀 Задание

Существуют и другие способы перебора массивов, помимо циклов for и while. Это forEach, for-of и map. Перепишите ваш цикл для массива, используя один из этих методов.

Викторина после лекции

Викторина после лекции

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

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

Задание

Перебор массива

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