Учебное пособие по циклам JavaScript: цикл for, цикл while и т.д.

Учебное пособие по циклам JavaScript Программирование и разработка

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

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

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

Введение в циклы

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

Упрощенно: цикл — это структура программирования, которая повторяет последовательность инструкций до тех пор, пока не будет выполнено определенное условие.

Чтобы увидеть, насколько полезны циклы, давайте рассмотрим следующие фрагменты кода:

// program to serve customers until there are none left in the queue
let customersLeft = 10;
function serve() {
 // arbitrary code to fulfil customer’s order
 console.log(‘finished serving customer’);
}
serve();
serve();
serve();
serve();
serve();
serve();
serve();
serve();
serve();
serve();

Без использования цикла нам пришлось бы повторять вызов serve()несколько раз. Это становится неустойчивым, когда количество клиентов увеличивается до 1000.

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

// program to serve customers until there are none left in the queue
let queue = 10;
function serve() {
 // arbitrary code to fulfil customer’s order
 console.log(«finished serving customer»);
}
for (let index = 0; index < queue; index++) {
 serve(); // this would be executed 10 times
}

Обратите внимание, что мы все еще можем вызывать serve()функцию 10 раз. Кроме того, когда количество клиентов меняется, все, что нам нужно сделать, это обновить значение customersLeft.

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

Типы циклов в JavaScript

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

  • Состояние, которое может быть trueилиfalse
  • Программный блок, который выполняется, пока выполняется условие. true

Ниже показана схема цикла в JavaScript:

Ниже показана схема цикла в JavaScript

Цикл начинается с LoopTokenтокена, за которым следует условие в круглых скобках, и заканчивается набором инструкций, заключенных в скобки.

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

Читайте также:  Как настроить VS Code для разработки на React

Цикл for — это лишь один из доступных типов циклов. JavaScript поддерживает разные виды циклов :

  • for: повторяет код несколько раз
  • for / in: перебирает свойства объекта
  • while: перебирает блок кода, пока условиеtrue
  • for / of: перебирает значения итерируемого объекта
  • do / while: перебирает код, пока условиеtrue

for Loop

Это наиболее часто используемый цикл. Цикл for повторяет код несколько раз. Он имеет следующий синтаксис:

for (begin; condition; step) {
  // statement(s) to execute
}

Начальная часть выполняется один раз при входе в цикл. Условие проверяется один раз на каждой итерации цикла. Если это так false, цикл заканчивается. Если это так true, оператор (-ы) будут выполнены, а затем будет выполнена пошаговая часть.

Упрощенный:

  • Оператор инициализации выполняется перед запуском цикла.
  • Среднее условие определяет, будет ли цикл выполняться на следующей итерации.
  • Последний оператор выполняется каждый раз после выполнения цикла.

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

for (let i = 0; condition; i++) {
 // print a number
}

Nested for loops

Циклы могут содержать другие циклы. Рассмотрим следующий пример:

for(var i = 0; i < 5; i++) {
 console.log(«Outer Loop Iteration:», i);
 for(var j = 0; j < 5; j++) {
   console.log(«\tInner Loop Iteration:», j);
 }
}

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

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

while Loop

В операторе while, если заданное условие есть true, блок кода будет выполнен. Цикл while имеет следующий синтаксис:

while (condition) {
 // code to execute
}

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

var num = 0;
while(num <= 10) {
  if(num !== 10) {
   console.log(«The number is», num, «- less than 10»);
  } else {
   console.log(«The number is», num, «- the loop is now over»);
  }
  num++;
}

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

Мы должны увеличивать значение numв конце блока кода, чтобы условие цикла while в конечном итоге стало false.

do…while Loop

Цикл do… while аналогичен циклу while, но они циклически повторяют код, пока есть условие true. Он имеет следующий синтаксис:

do {
 // statement to be executed
} while (condition);

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

Читайте также:  Наука о данных за 5 минут: что такое One Hot Encoding?

while Loops и do…while Loops

Мы видели, что whileциклы и do…whileциклы похожи. Когда используется do…whileцикл, оператор (ы) выполняется по крайней мере один раз, прежде чем условие будет проверено истинностью / ложностью. Чтобы проиллюстрировать это, рассмотрим следующий фрагмент кода:

let count = 5;
do {
 console.log(«hello world!»);
 // will run at least once
 // because the condition check comes after the code statement
} while (count < 5);
while (count < 5) {
 console.log(«hello world»);
 // never runs because the condition is false
}

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

Во-первых, мы модифицируем предыдущую программу, обслуживающую клиентов в очереди:

// program to serve customers until there are none left in the queue
let queue = 10;
function serve() {
 // arbitrary code to fulfil customer’s order
 console.log(«finished serving customer»);
}
while (queue > 0) {
 serve(); // this will run infinitely
}

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

// program to serve customers until there are none left in the queue
let queue = 10;
function serve() {
 // arbitrary code to fulfil customer’s order
 console.log(«finished serving customer»);
}
while (queue > 0) {
  serve();
  queue—; // step/control
}
/* do…while loop */
// do {
//   serve();
//   queue—;
// } while (queue > 0);

Давайте проверим наши знания циклов while и do… while (и массивов JavaScript) с помощью упражнения. Мы хотим написать небольшую программу, которая будет считать до пяти в do/whileцикле. Проверьте решение, если вы застряли.

var count = // write your code here
do{
   // write your code here
}while (count < )
console.log(«Program has ended with count:», count);

Break and continue in loops

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

Цикл в следующем фрагменте кода завершится на пятой итерации цикла вместо десятой итерации (без оператора break):

let index = 0;
for (; index < 10; index++) {
 console.log(«Hello!»);
 if (index == 5) {
   // this will cause the program to skip the remaining iterations
   // and run the statement outside this loop
   break;
 }
}
console.log(«Loop stopped after » + index + » iterations»);

Если мы хотим пропустить только одну итерацию и продолжить цикл, мы можем использовать continue;оператор:

let index = 0;
for (; index < 10; index++) {
 if (index == 5) {
   continue;
   // this will be skipped
 }
 console.log(«This is iteration no. » + index);
}

How to use loops in practice

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

Отображение списка элементов в HTML

<!DOCTYPE html>
<html>
 <head>
   <meta name=»viewport» content=»width=device-width, initial-scale=1″ />
 </head>
 <body>
   <h1>To-do List</h1>
   <ul id=»list»></ul>
   <script type=»text/javascript»>
     const todoItems = [
       «go for a run»,
       «take out the trash»,
       «go grocery shopping»,
       «prepare pasta»,
       «take the car for a wash»,
     ];
     let list = document.getElementById(«list»);
     for (let index = 0; index < todoItems.length; index++) {
       const item = todoItems[index];
       const li = document.createElement(«li»);
       li.innerHTML = «<p>» + item + «</p>»;
       list.append(li);
     }
   </script>
 </body>
</html>

Implementing custom logic on an Array

const arr = [
 «a string»,
 2,
 «another string»,
 {
   text: «an object»,
 },
 [«a», «nested», «array»],
 «last string»,
];
const arrOfStrings = [];
for (let index = 0; index < arr.length; index++) {
 const element = arr[index];
 if (typeof element === «string») {
   arrOfStrings.push(element);
 }
}
console.log(arrOfStrings);
// outputs [ ‘a string’, ‘another string’, ‘last string’ ]
Оцените статью
bestprogrammer.ru
Добавить комментарий