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 части для итерации:

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

// 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. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.