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

Основы программирования Pt. 3

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

Представьте, что вы сотрудник очень успешного бизнеса по разработке программного обеспечения. Программное обеспечение, которое вы продаете, имеет около 10 000 клиентов, и все они платят ежегодную абонентскую плату за лицензию на программное обеспечение. Теперь ваш босс по экономическим причинам решает, что компания перейдет на другой банковский счет. Теперь ваша задача — уведомить об этом каждого клиента по электронной почте. облом.

Представьте, что вам пришлось сделать это вручную: просмотреть список из 10 000 клиентов и отправить каждому электронное письмо об этом изменении. Вы бы, наверное, бросили работу. 😅 К счастью, именно для такой утомительной задачи можно использовать языки программирования. В повторениях (или циклах, как мы их называем) заключается истинная сила программирования.

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

Все примеры этого поста опубликованы здесь. Для лучшего обучения я рекомендую вам создать свой собственный Repl на repl.it и попробовать все шаги самостоятельно.

Выполнение одного и того же снова и снова: циклы

Допустим, ваша задача состояла в том, чтобы написать слова «Я буду использовать циклы для повторений» и вывести их на консоль 20 раз. Как бы вы это сделали? Конечно, вы могли бы написать 20 таких строк:

С помощью копирования и вставки это выполнимо. Но вы правильно догадались: есть более простой способ сделать это.

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

В нашем примере цикл for будет выглядеть так:

Намного приятнее, не так ли? Коротко и лаконично. 😊

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

Давайте разберем цикл for и разберемся во всех его частях.

for (...) {
  ...
}

Ключевое слово for сигнализирует программе: это цикл — сделайте это для … повторений.
Все, что находится внутри фигурных скобок {}, будет повторяться.

var i = 0;

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

Примечание. i начинается с 0, а не с 1. В программировании мы всегда начинаем считать с 0. Подробнее об этом мы поговорим чуть позже.

i < 20;

Это утверждение говорит: повторять до тех пор, пока i меньше 20.
Мы увидим, что это означает, когда посмотрим на следующее утверждение:

i++

Это означает: увеличить (увеличить) i на единицу. Это то же самое, что сказать i = i + 1.

📝 Для шпаргалки:
i++то же самое, что и i = i + 1.

Зная это, теперь мы можем еще раз взглянуть на полный оператор for:

for (var i = 0; i < 20; i++) { ...

Таким образом, все заявление говорит:

• Сначала создайте переменную i, начальное значение которой должно быть 0.
• Затем цикл должен повторяться до i < 20.
• И для каждой итерации i увеличивается на 1: i++.

Таким образом, в первой итерации i равно 0, во второй итерации - 1, в третьей итерации - 2 и так далее, и он останавливается, если условие i < 20 больше не выполняется. Значение: если i равно 20, выполнение прекращается.

Чтобы сделать это видимым, мы можем немного изменить журнал консоли, а также распечатать i:

Теперь это печатает:

I will use loops for repetitions 0
I will use loops for repetitions 1
I will use loops for repetitions 2
I will use loops for repetitions 3
I will use loops for repetitions 4
I will use loops for repetitions 5
I will use loops for repetitions 6
I will use loops for repetitions 7
I will use loops for repetitions 8
I will use loops for repetitions 9
I will use loops for repetitions 10
I will use loops for repetitions 11
I will use loops for repetitions 12
I will use loops for repetitions 13
I will use loops for repetitions 14
I will use loops for repetitions 15
I will use loops for repetitions 16
I will use loops for repetitions 17
I will use loops for repetitions 18
I will use loops for repetitions 19

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

💡 В программировании повторное выполнение в цикле называется итерацией.

Идите вперед и поиграйте с числами в вашей программе.

👩‍💻 В качестве упражнения попробуйте распечатать числа от 1 до 100. (Осторожно, здесь есть небольшая оговорка!) Решение можно посмотреть здесь.

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

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

Хранение данных в списке: массивы

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

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

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

Давайте посмотрим на другой пример. Мы хотим сохранить список имен, поэтому мы можем сделать это так:

Это создаст массив из 5 элементов: 5 строковых значений «Тереза», «Ева», «Джонас», «Хелдер» и «Клеменс». Массив сохраняется в переменной с именем names — теперь это имя массива, которое мы можем использовать для получения его содержимого.

Для получения одного конкретного имени нам нужно использовать имя массива и индекс, например:

Что такое индекс? Индекс — это позиция элемента в массиве.
Вы можете попробовать, что произойдет, если использовать его таким образом. Каков результат? (Это должно быть «Джонас»). Также попробуйте ввести другие числа и посмотреть, что произойдет. Вы понимаете, как это работает?

☝️ Осторожно: индексы начинаются с 0 !

Очень важно помнить одну вещь: индексы массивов начинаются с 0. Это означает, что первое равно 0, второе равно 1, третье равно 2 и так далее.

Вот как обстоят дела в мире программирования. 🤷‍♀️ Называется: нумерация с нуля, если хотите посмотреть. Это настолько свойственно непрограммистам, что является источником многих шуток и мемов, например:

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

Это должно дать вам такой результат:

Name 1: Teresa
Name 2: Eva
Name 3: Jonas
Name 4: Helder
Name 5: Clemens

Здесь вы видите, что для первого элемента мы используем индекс 0, для второго индекс 1 и так далее. Я уверен, что вы уже поняли. 😉

Что произойдет, если вы попытаетесь получить доступ к элементу массива в несуществующей позиции? Скажем, на позиции 19? Давайте попробуем!

Это дает нам это в качестве вывода:

undefined

Неудивительно, правда? В массиве всего 5 элементов, последний из которых имеет индекс 4. Таким образом, элемент с индексом 19 (20-й элемент) не определен.

Чтобы попрактиковаться и сделать это более понятным, давайте создадим массив целых чисел, который содержит числа 15, 3, 28, 2, 6, 17, 3, 29, 8, 9, 0, 10, 31, 5, 4.

💡Массивы могут содержать данные любого типа.
(Они также могут быть смешанными, но мы не будем сейчас это рассматривать.)

А теперь мы хотим вывести все значения.
Теперь мы знаем, как обращаться к элементам массива: по имени массива и скобкам [] с индексом внутри. Давай сделаем это!

Это должно дать нам такой вывод:

Number 1: 15
Number 2: 3
Number 3: 28
Number 4: 2
Number 5: 6
Number 6: 17
Number 7: 3
Number 8: 29
Number 9: 8
Number 10: 9
Number 11: 0
Number 12: 10
Number 13: 31
Number 14: 5
Number 15: 4

Честно говоря, я использую индекс для доступа к числу в массиве чисел, например numbers[index], и получаю число.

Но теперь у нас утомительная задача: у нас есть 15 строк кода, которые очень похожи. И вы совершенно правильно догадались: мы можем использовать здесь циклы, чтобы сделать это проще!

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

Как вы помните выше, циклы for выглядят так:

Здесь мы повторяем цикл 20 раз. Мы используем i в качестве нашего индекса и переходим от 0 к 19 (мы повторяем цикл до тех пор, пока выполняется условие i < 20) и увеличиваем i на единицу (i++) для каждой итерации.

Теперь мы можем использовать i в качестве индекса для доступа к массиву чисел, например numbers[i].
Давайте попробуем!

Итак, что именно мы здесь делаем?
У нас есть цикл for, в котором мы используем i как переменную для индекса.

В первой итерации i равно 0. Итак, console.log называется так: console.log(numbers[0]);
И numbers[0] дает нам 15.

В следующей итерации i будет 1. Это похоже на использование numbers[1]. И он печатает 3 - значение в позиции 1 (второе значение) массива.

В следующей итерации i будет 2, так что это похоже на использование numbers[2]. Это дает нам 28, потому что это элемент с индексом 2.

И так итерация за итерацией, пока не остановится после того, как i стало 19.
Цикл должен дать вам вывод, например:

15
3
28
2
6
17
3
29
8
9
0
10
31
5
4
undefined
undefined
undefined
undefined
undefined

Подождите, почему в конце пять раз печатается undefined? 🧐

Видите ли, мы сказали, что цикл должен повторяться до i < 20. Таким образом, он также вызывает numbers[15], numbers[16] и так далее до numbers[19]. А так как в нашем массиве всего 15 элементов (последний индекс равен 14), эти значения не определены.

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

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

Если вы поместите это в console.log(), это даст вам: 15. Потому что у нас есть 15 элементов в массиве. В отличие от индекса, этот счет начинается с 1, как вы привыкли считать. 😉

Помните: длину массива можно получить, используя имя массива, затем точку и length. Для другого нашего массива имен это будет names.length.

Так как же этот number.length поможет нам с нашим циклом?
Мы можем поместить его туда вместо 20:

Это дает нам вывод:

15
3
28
2
6
17
3
29
8
9
0
10
31
5
4

Это останавливается сразу после последнего элемента, потому что number.length — это предел, на котором мы хотим остановиться. Таким образом, у нас больше нет нежелательных неопределенных значений. 🎉

Это обычная практика для перебора массивов. Обязательно запишите это в свои заметки.

Этот способ перебора массива имеет еще одно преимущество: мы можем добавлять элементы в наш массив, и он все равно будет работать.
Попробуйте следующее:

Это добавит число 25 к массиву чисел в конце массива.

Вы используете имя массива, точку, а затем нажимаете скобки () и внутри вы помещаете элемент для добавления в массив: arrayname.push(element), вообще говоря.

Теперь наш элемент имеет новое значение с индексом 15: console.log(numbers[15]) теперь дает вам 25 вместо неопределенного. И если бы мы захотели снова перебрать наш массив, мы могли бы сделать это так же, как и раньше, без изменений:

Это должно дать нам вывод:

15
3
28
2
6
17
3
29
8
9
0
10
31
5
4
25

Прохладный! Он включал новый элемент с индексом 15. 😁

Делаем то же самое, только по-другому: циклы While

Существует также другой вид цикла, цикл while:

Цикл while представляет собой урезанную версию цикла for. Он выполняет все, что находится в фигурных скобках {}, пока выполняется условие, в данном случае counter < 12.

Программист должен выполнить работу по созданию переменной (counter) и увеличению переменной (counter++, вы помните: это то же самое, что сказать counter = counter + 1).

Циклы while обычно используются для разных вариантов использования и используются гораздо реже, чем циклы for. Пока вы можете придерживаться циклов for. Но с этим вы также узнаете, что такое цикл while, если увидите его.

Если вы достаточно смелы, вы можете попробовать заменить цикл for сверху (который проходит по списку чисел) циклом while. Ты можешь сделать это?

Если вы добрались до этого места: поздравляем! Теперь вы знаете, как использовать массивы и циклы. Это огромный шаг на пути к тому, чтобы стать программистом!

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

Чтобы начать работу в этом направлении, вы можете попрактиковаться в упражнении: создайте массив целых чисел, скажем, возраст 10 ваших ближайших друзей или членов семьи. Прокрутите этот массив и напечатайте каждый возраст с console.log(), но когда вы это сделаете, добавьте 😀, если число четное, и 🤨, если число нечетное.

Помните: узнать, является ли число четным (то есть делится ли оно на 2), можно с помощью оператора по модулю %.

Решение можно найти здесь.

Спасибо за чтение! Если вам понравился урок, дайте ему несколько хлопков. 👏 Если вы где-то застряли, зайдите в Slack Hamburg Coding School’s Slack и задайте свой вопрос. Мы помогаем друг другу там и отвечаем на все вопросы. ❤️
Если вы предпочитаете изучать программирование в классе с учителем, ознакомьтесь с нашим курсом Учимся программировать.