Циклы javascript: Циклы while и for

let в цикле for — efim360.ru

У цикла for существует 3 производства:

Три производства цикла for по стандарту ECMAScript

Мы видим, что внутри круглых скобок существует 3 зоны, которые отделены точкой с запятой «;«.

Каждая зона имеет свой смысл. Но нас интересует первая зона.

В ней можно разместить:

1. не let и квадратная скобка [
2. var
3. LexicalDeclaration и Expression

 

Рассмотрим третий вариант производства, который может включать «LexicalDeclaration» и «Expression«.

Let and Const Declarations по стандарту ECMAScript

Оно в свою очередь состоит из «LetOrConst BindingList«.

Из стандарта:

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

Переменные создаются при создании экземпляра содержащей их записи среды, но к ним нельзя получить доступ каким-либо образом, пока не будет оценена LexicalBinding переменной. Переменной, определенной LexicalBinding с Initializer, присваивается значение AssignmentExpression её Initializer при оценке LexicalBinding, а не при создании переменной. Если LexicalBinding в объявлении let не имеет Initializer, переменной присваивается значение undefined при оценке LexicalBinding.

 

Примеры использования

Будем писать функции. Начнём с простого примера, чтобы понять «боль» и «печаль»:

function f1(){for(a=0; a<10; a++){console.log(a)}}

Вывод в консоли браузера:

Цикл for без let или const в JavaScript — переменная a прописалась свойством у глобального объекта window в браузере

Что здесь не так?

Мы объявили функцию. Мы её вызвали. Цикл успешно сделал 10 выводов. И вроде всё логично складывается. Инкремент тоже отрабатывает нормально. Но.

Но проблема в том, что переменная «a» записанная в параметрах цикла, прописалась в качестве ключа у глобального объекта window среды выполнения кода (в браузере). Это значит, что она видна отовсюду в нашей программе и её значение может изменить в любой момент какая-угодно функция. Рассчитывать на эту переменную больше нельзя так как в неё может попасть что угодно.

Где же прописалась наша переменная? Давайте смотреть на скрин:

Новый ключ a со значением 10 у глобального объекта window — JavaScript

 

А теперь давайте напишем ещё одну функцию с циклом, где также будем использовать нашу «a» как инкрементируемое значение, только в этот раз также запишем переменную «b«.

function f2(){for(b=0; b<3; a++, b++){console.log(a+b)}}

Смотрим снова в консоль

Вторая функция увидела глобальный ключ a у объекта window и применила его значение в работе своего цикла в JavaScript

И вот наша вторая функция уже вовсю эксплуатирует значение ключа «a«. И она не просто его получает, а ещё и меняет.

То есть эти две функции не работают изолированно друг от друга. Циклы в их телах не создают ограничения области действия для идентификаторов. Такой подход может однажды «выстрелить в ногу». Подсчитывать важные данные такими функция просто невозможно.

 

Как изолировать параметры цикла от других участков программы?

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

Давайте создадим функцию, похожую на первую, но в этот раз объявим переменную «a» прям в параметре цикла.

function f3(){for(let a=0; a<10; a++){console.log(a)}}

Вызываем и смотрим:

Изолировали параметр цикла for от внешнего кода и глобального объекта window — JavaScript

И вот сейчас всё работает как нужно. Третья функция не изменяет ключ «a» у глобального объекта window. Его значение по-прежнему 13. В свою очередь глобальный объект ничего не знает о локальной переменной цикла, которая была объявлена через ключевое слово let.

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

 

Несколько операторов let в блоке параметров цикла

Возникает резонный вопрос «А что если у нас несколько переменных должны участвовать в цикле? Как их сделать изолированными?»

Первое, что хочется придумать — это записать несколько операторов let через запятую до первого символа «;» из блока параметров цикла.

Давайте попробуем:

function f4(){for(let a=0, let b=0; a<10; a++){console.log(a)}}

Ошибка. В блоке параметров цикла for может быть прописан только один let — JavaScript

И у нас ничего не получается.

Текст ошибки:

Uncaught SyntaxError: let is disallowed as a lexically bound name

Перевод текста ошибки:

Неперехваченная синтаксическая ошибка: let запрещено как лексически связанное имя

 

Говоря простым языком, мы должны отделять команды при помощи символа точки с запятой — «;«. Нельзя через одну запятую написать слово (идентификатор привязки), которое зарезервировано языком JavaScript.

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

let, что противоречит перечисляемым идентификаторам привязки.

Понять это можно на примере. Абстрагируемся от цикла. В общем коде программы возможны 2 формы записи:

// ПЕРВАЯ форма записи let

let a;
let b;
let c;

Способ объявления переменных через let в несколько строк — JavaScript

Мы объявили 3 переменные (a, b и c) и не присвоили им никаких значений. Переменные доступны, но отвечают они undefined

Переменные (fj, gh, lk) небыли объявлены и поэтому мы получаем ошибку ссылки на них.

 

// ВТОРАЯ форма записи let

let a1, b1, c1;

Способ объявления переменных через let в одну строку через запятую — JavaScript

Переменные (a1, b1, c1) теперь есть в среде выполнения кода, а переменных (q1, q2, q3) нет.

 

Теперь вернёмся к нашему циклу. У него всё тоже самое. Когда мы напишем ключевое слово let, тогда он будет ожидать перечисления через запятую новых идентификаторов привязки, которые будут работать только внутри цикла. Это очень похоже на вторую форму записи объявлений переменных через let.

function f5(){for(let a=0, b=101, c=2002; a<10; a++, b++, c++){console.log(a, b, c)}}

Смотрим результат выполнения

Объявление трёх параметров цикла for через одно ключевое слово let — все они изолированы — JavaScript

Мы записали одно слово let и после него через запятую перечислили имена идентификаторов с их выражениями присваивания до первой точки с запятой «;«

Это говорит о том, что в нашем цикле сейчас существуют 3 независимые изолированные переменные, которые объявлены через

let. КАЖДЫЙ ОБЪЯВЛЕН ЧЕРЕЗ LET, хоть это и не заметно на первый взгляд.

Мы можем обратиться к нашим старым глобальным переменным «a» и «b» и убедиться, что их значения никак не изменились.

А самое важное то, что запись «b=101» НЕ ПЕРЕТЁРЛА значение у глобальной переменной «b«. Цикловая «b» стала равной 110, а глобальная «b» по-прежнему 3. Просто отсутствие let может первое время путать и вводить в заблуждение.

 

Информационные ссылки

Стандарт ECMAScript — https://tc39.es/ecma262/multipage/

Что быстрее: циклы for, for…of или forEach в JavaScript | by Jayanth babu

Фото Джима Лоика на Unsplash

Существуют разные способы перебора массивов в JavaScript, но выбрать правильный может быть непросто. Существует классический цикл JavaScript for, метод JavaScript forEach и цикл for…of , представленный в шестой редакции EcmaScript ( ES6 ), который позволяет программисту выполнять цикл над реальными итерируемыми объектами.

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

петли для итерации над массивами

1. для
2. для… из
3. Foreach

для ИТ -Итерации в течение множества, Let’s Cream’s Mate с 50000 elements для выполнения. мы можем создать массив, содержащий 50000 элементов, двумя способами.

цикл for

Самый простой тип итерации в JavaScript — это цикл for. Требуется три выражения; объявление переменной, выражение, которое будет оцениваться перед каждой итерацией, и выражение, которое будет оцениваться в конце каждой итерации.

JavaScript for loop повторяет элементы фиксированное количество раз . Его следует использовать, если известен номер итерации. Синтаксис цикла приведен ниже.

давайте рассчитаем время выполнения, используя операторы console.time() и console.timeEnd() в JavaScript. давайте посмотрим, как мы можем использовать эти утверждения.

для…петли

для...из statement creates a loop iterating over iterable objects, including built-in String , Array , array-like objects (e.g., arguments or NodeList ), TypedArray , Map and Установите в JavaScript

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

таким же образом проверим время выполнения цикла for. ..of

цикла forEach

предусмотрена функция для каждого элемента по порядку.

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

позволяет перебрать массив с помощью forEach и проверить время выполнения

Теперь пришло время проверить время выполнения для всех трех методов цикла. Выполнение javascript действительно зависит от различных факторов, таких как тип операционной системы, такой как Windows, и тип браузера, такого как Chrome, IE, Firefox.

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

Традиционный цикл для является самым быстрым, поэтому вы всегда должны использовать его, верно? Не так быстро — важна не только производительность. Редко когда вам понадобится зацикливать более 1 миллиона элементов во внешнем JS-приложении. Читаемость кода обычно важнее, поэтому по умолчанию используйте тот стиль, который подходит для вашего приложения.

Если вы предпочитаете писать функциональный код, то forEach идеально подходит, а for-of отлично подойдет в противном случае. Меньшее количество строк кода означает более короткое время разработки и меньшие накладные расходы на обслуживание — сначала оптимизируйте для удобства разработчиков, а затем для повышения производительности.

Спасибо за внимание. найти исходный код здесь.

циклов JavaScript — все, что вам нужно знать

СОДЕРЖАНИЕ

• ВВЕДЕНИЕ TO JAVASCRPT LOOPS
• для Loop
  • I ++ VS ++ I
• , в то время как Loop
• DO… В то время как LOOP
• для … в Loop
• DO… LOOP
• для … в LOOP
• DO… LOOP
• для… в LOOP
• DO… LOOP
• для … в LOOP
• для …
• для LOOP
• для LOOP
• для LOOP
• . Циклы
• Заключение: Циклы JavaScript

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

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

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

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

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

Как я уже говорил, все циклы JavaScript делают в основном одно и то же. Они выполняют определенную задачу X раз. Что отличается для некоторых из этих циклов, так это синтаксис. Некоторые из этих петель также используют другой механизм петли. Это может сделать некоторые циклы лучшим выбором в определенных ситуациях. Итак, давайте рассмотрим каждую петлю, чтобы вы знали, какую из них выбрать.

Цикл For

Цикл for существует уже давно. Это один из самых популярных циклов JavaScript, если не самый. Когда разработчикам JavaScript нужен цикл, 9Шлейф 0039 для обычно является одним из лучших вариантов. Синтаксис цикла

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

Синтаксис цикла для цикла состоит из нескольких частей. Во-первых, есть ключевое слово вместо , которое находится в начале цикла и строки. Далее идут круглые скобки или «голова», содержащие три выражения, разделенные точкой с запятой ( ; ): инициализировать выражение , выражение условия и увеличить выражение . Выражение приращения также называется «конечным выражением».

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

для определения счетчика со значением 0 . Это означает, что цикл начнется с «0». Вы можете использовать любое имя для этого счетчика.

Если вы хотите определить некоторые переменные, наряду со счетчиком, вы разделяете их, а также счетчик, запятыми: пусть счетчик = 0, пусть myVar = 5 . Вы можете использовать столько переменных, сколько хотите. Затем выражение условия указывает условие, при котором цикл должен выполняться или повторяться/повторяться.

Это условие работает как оператор if…else. Пока это условие оценивается как true , цикл for будет выполняться, если вы не завершите его изнутри. Вы можете использовать выражение условия , чтобы сказать, что цикл должен выполняться только шесть раз, то есть условие типа counter < 7 (если счетчик начинается с

0 ).

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

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

После главы вместо цикла , круглые скобки с выражениями, фигурными скобками. Код, который вы хотите, чтобы цикл выполнялся, находится между этими скобками. Это для теории. Давайте посмотрим на некоторые примеры кода.

 // Для синтаксиса цикла
// 1) ключевое слово "для"
// 2) затем начните с 3-х выражений внутри круглых скобок:
// инициализироватьВыражение; условиеВыражение; incrementExpression
// 3) фигурные скобки с кодом, который нужно выполнить
// если условие верно
// ПРИМЕЧАНИЕ. Не забудьте разделить
// каждое выражение с точкой с запятой
for (initializeExpression; ConditionExpression; incrementExpression) {
  // код для выполнения
}
// Простой цикл for для итерации от 1 до 5
// 1) "i" - счетчик, начальная точка цикла
// там написано, что цикл должен начинаться с 0
// 2) условие "i < 6" говорит о том, что цикл будет выполняться как вдоль
// так как счетчик "i" меньше 6 (< 6: "i" начинается с 0, а не с 1)
// 3) "i++" говорит, что счетчик "i" должен увеличиваться
// в конце каждой итерации
для (пусть я = 0; я < 6; я ++) {
  // регистрируем текущее значение счетчика "i"
  console.
  log(я)
}
// 0
// 1
// 2
// 3
// 4
// 5
// Простой цикл for для итерации от 5 до 1
// 1) "x" - счетчик, начальная точка цикла
// там написано, что цикл должен начинаться с 5
// 2) условие "x >= 0" говорит, что цикл будет выполняться как
// так как счетчик "x" больше или равен 0
// (>= 0: "x" начинается с 5, нам нужно 5 итераций, поэтому нужно включить 0)
// 3) "x--" говорит, что счетчик "x" должен уменьшаться
// в конце каждой итерации
для (пусть х = 5; х >= 0; х--) {
  // регистрируем текущее значение счетчика "x"
  console.log(x)
}
// 5
// 4
// 3
// 2
// 1
// 0
// Используем цикл for для перебора массива
// 1) "y" - счетчик, начальная точка цикла
// там написано, что цикл должен начинаться с 0
// 2) "arrLength" является переменной (необязательно)
// 3) условие "y < myArray.length" говорит, что цикл будет выполняться как
// так как счетчик "y" меньше длины массива
// меньше? массив начинается с индекса 0, массив с 1 элементом имеет длину 1, а не 0
// 4) "y++" говорит, что счетчик "y" должен увеличиваться
// в конце каждой итерации
const myArray = ['циклы', 'операторы', 'ключевые слова', 'переменные', 'область действия']
for (пусть y = 0; y   length; y++) {
  // регистрируем текущее значение счетчика "y"
  // а также элемент внутри myArray по текущему индексу
  console.log(y, мой массив [y])
}
// 0 'циклов'
// 1 'оператор'
// 2 'ключевых слова'
// 3 'переменных'
// 4 'область'
// Используйте цикл for для перебора массива и использования переменных
// 1) "c" - счетчик, начальная точка цикла
// там написано, что цикл должен начинаться с 0
// 2) "arrLength" является переменной
// который будет хранить длину "myArray"
// 3) условие "c < arrLength" говорит, что цикл будет выполняться как вдоль
// так как счетчик "c" меньше длины массива
// вместо "myArray.length" теперь можно использовать переменную "arrLength"
// 4) "c++" говорит, что счетчик "c" должен увеличиваться
// в конце каждой итерации
const myArray = ['циклы', 'операторы', 'ключевые слова', 'переменные', 'область действия']
for (пусть c = 0, пусть arrLength = myArray.length; c < arrLength; c++) {
  // регистрируем текущее значение счетчика "y"
  // а также элемент внутри myArray по текущему индексу
  console. log(с, мой массив [с])
}
// 0 'циклов'
// 1 'оператор'
// 2 'ключевых слова'
// 3 'переменные'
// 4 'область'
// Опускаем некоторые выражения №1: нет выражения инициализации
// Создаем переменную для выражения инициализации
пусть д = -5
// 1) Опустить выражение инициализации, НО добавить точку с запятой
// перед выражением условия как обычно
// 2) условие "d < 4" говорит, что цикл будет выполняться как вдоль
// так как счетчик "d" меньше 4
// 3) "d++" говорит, что счетчик "d" должен увеличиваться
// в конце каждой итерации
для (; d < 4; d++) {
  // Записываем текущее значение счетчика "d"
  console.log(д)
}
// -5
// -4
// -3
// -2
// -1
// 0
// 1
// 2
// 3
// Опускаем некоторые выражения № 2: нет выражения условия
// 1) "f" - счетчик, начальная точка цикла
// там написано, что цикл должен начинаться с 6
// 2) Опустить выражение условия, НО добавить точку с запятой
// в конце инициализации и перед выражением приращения как обычно
// 3) "f--" говорит, что счетчик "f" должен уменьшаться
// в конце каждой итерации
для (пусть f = 6; f--) {
  // Записываем текущее значение счетчика "f"
  console. log(f)
  // Завершить цикл, когда счетчик "f" достигает 0
  // Если вы не завершите цикл без условия
  // или с условием, которое никогда не наступит
  // это создаст бесконечный цикл, т.е. цикл будет работать вечно
  если (f === 0) сломать
}
// 6
// 5
// 4
// 3
// 2
// 1
// 0
// Опускаем некоторые выражения № 3: нет выражения приращения
// 1) "g" - счетчик, начальная точка цикла
// там написано, что цикл должен начинаться с 0
// 2) условие "g < 8000" говорит о том, что цикл будет выполняться как вдоль
// так как счетчик "g" меньше 8000
// 3) Опустить выражение приращения, НО добавить точку с запятой
// в конце условия как обычно
// ПРИМЕЧАНИЕ. Это также создаст бесконечный цикл
// потому что цикл не обновляет счетчик
// т.е. счетчик всегда будет меньше 8000
для (пусть g = 0; g < 8000;) {
  // Записываем текущее значение счетчика "g"
  console.log(г)
}
// 0
// 0
// 0
// 0
// 0
// 0
// 0
// ... бесконечный цикл
 

i++ vs ++i

Еще одна вещь о для циклов. Возможно, вы слышали, что существует разница между использованием i++ и ++i в качестве выражения приращения. Ну вроде. Некоторые разработчики JavaScript считают, что есть разница в производительности. Здесь ничего нет. В таких языках программирования, как C, существует разница в производительности при использовании i++ и ++i .

Это не относится к JavaScript. Это не имеет никакого значения в производительности, если вы используете i++ и ++i в циклах JavaScript, а именно для циклов. Единственная разница между i++ и ++i заключается в том, что i++ возвращает значение i перед его увеличением, а ++i возвращает значение i после его увеличения.

С точки зрения функциональности тоже нет разницы. Независимо от того, используете ли вы i++ или ++i , цикл for будет работать одинаково в обоих случаях. Итак, выбирая между i++ и ++i в основном дело личного вкуса. Это не улучшит и не сломает ваш код. То же самое относится к i += . Это не имеет значения.

 // Цикл for с "i++"
для (пусть я = 0; я < 4; я ++) {
  console.log(я)
}
// 0
// 1
// 2
// 3
// Цикл for с "++i"
для (пусть i = 0; i < 4; ++i) {
  console.log(я)
}
// 0
// 1
// 2
// 3
// Цикл for с "i += 1"
для (пусть я = 0; я < 4; я += 1) {
  console.log(я)
}
// 0
// 1
// 2
// 3
 

Пока цикл

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

Каждые в то время как цикл начинается с ключевого слова в то время как . За этим ключевым словом следует скобка, содержащая условие, при котором , в то время как цикл должен быть выполнен. Аналогично для цикла , цикл while выполняется до тех пор, пока указанное вами условие оценивается как true . Как только он оценивается как false , цикл while завершается.

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

 // Синтаксис цикла while
// 1) ключевое слово "пока"
// 2) затем скобка с условием
// 3) фигурные скобки с кодом
// что должно быть выполнено, если условие истинно
в то время как (какое-то условие) {
  // код для выполнения, если someCondition истинно
}
// Простой цикл while
// Объявить переменную с количеством итераций
пусть numOfIterations = 0
// Создаем цикл while
// Использовать "numOfIterations" в условии:
// Повторить, если "numOfIterations" меньше или равно 4
// Это означает, что цикл while будет выполняться 5 раз
в то время как (numOfIterations <= 4) {
  console. log('Пока...')
  // Увеличиваем значение "numOfIterations"
  // Необходимо изменить переменную "numOfIterations"
  // используется в условии, поэтому есть момент, когда время остановится
  ++числоИтераций
}
// 'В то время как...'
// 'В то время как...'
// 'В то время как...'
// 'В то время как...'
// 'В то время как...'
// В то время как цикл и итерация по массиву
// Объявить переменную с массивом имен
const arrOfNames = ['Сэнди', 'Тони', 'Тимоти', 'Эндрю']
// Объявить переменную с количеством итераций
пусть numOfIterations = 0
// Создаем цикл while
// Использовать "numOfIterations" и длину "arrOfNames" в условии:
// повторяем, если numOfIterations меньше или равно 4
в то время как (numOfIterations < arrOfNames.length) {
  // Имя журнала для индекса, соответствующего текущему значению "numOfIterations"
  console.log(arrOfNames[числоИтераций])
  // увеличить значение "numOfIterations"
  ++числоИтераций
}
// 'Сэнди'
// 'Тони'
// 'Тимоти'
// 'Эндрю'
 

Цикл Do…while

Третий член цикла JavaScript — это цикл do…while . Этот цикл очень похож на цикл и , который мы только что обсуждали. Есть два отличия. Во-первых, есть новое ключевое слово от до . После этого ключевого слова следует блок кода цикла while. Затем есть ключевое слово , в то время как и условие, заключенное в круглые скобки.

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

Если условие while оценивается как true , цикл запустится снова и выполнит блок кода после do . Такое поведение делает цикл do...while хорошим выбором, если вам нужно выполнить некоторый код хотя бы один раз, независимо от условия. Давайте посмотрим на некоторые примеры.

 // Синтаксис Do...while
делать {
  // код для выполнения
} пока (условие)
// Простой цикл do...while
// Этот цикл запустится и выполнит код,
// один раз, даже если условие ложно с самого начала
// Объявить переменную "myCounter"
пусть мойСчетчик = 0
// Создаем цикл do...while
делать {
  // Записываем значение переменной "myCounter"
  console.log(мойСчетчик)
} while (myCounter < 0) // запускаем, если "myCounter" меньше 0
// 0
 

Цикл For…in

Четвертый член цикла JavaScript — для... в цикле . Этот цикл обычно используется для просмотра свойств объектов. Синтаксис находится где-то между для и для . Он начинается с для ключевого слова . Затем следует круглая скобка, содержащая переменную, ключевое слово в и имя объекта, который вы хотите перебрать.

Во время каждой итерации одно свойство из указанного вами объекта присваивается переменной и выполняется код внутри блока. Этот цикл продолжается до тех пор, пока все свойства объекта не будут «обработаны».

 // For...in синтаксис
for (myVariable в myObj) {
  // код для выполнения
}
// Простой for...in
// Создаем объект с некоторыми данными
постоянный пользователь = {
  имя: 'Джони',
  фамилия: Зейн,
  образование: «колледж»,
  работа: 'программист'
}
// Создаем цикл for...in
// 1) "prop" - это переменная каждого свойства
// будет присваиваться во время каждой итерации
// 2) "пользователь" - это имя объекта, который мы хотим пройти в цикле
for (пусть поддержка в пользователе) {
  console.log(`ключ: ${prop}; значение: ${user[prop]}.`)
}
// 'ключ: firstName; значение: Джонни.
// 'ключ: lastName; значение: Зейн.
// 'ключ: образование; значение: колледж.
// 'ключ: задание; значение: программист.'
 

Цикл for…of

Цикл for…of — это последний цикл JavaScript, о котором мы поговорим в этом руководстве. for...of выглядит и работает почти так же, как for...in . Между этими двумя циклами есть два основных различия. Первое отличие состоит в том, что for. ..of использует из вместо в ключевом слове в скобках.

Второе отличие состоит в том, что цикл for...of предназначен для перебора итерируемых объектов. Важно отметить, что «итерируемый объект» — это не то же самое, что «объекты». Объекты — это объекты, «вещи» со свойствами, пары ключ/значение. Итерируемые объекты — это массивы, карты, наборы, arguments объект внутри функций и методов, строк и т. д.

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

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

 // Синтаксис цикла for...of
for (myVariable of myArray) {
  // код для выполнения
}
// Простой цикл for...of №1: итерация по массиву
// Создаем объект с некоторыми данными
константные языки = ['JavaScript', 'C++', 'Java', 'Python', 'Perl']
// Создаем цикл for...of
// 1) "item" - это переменная каждого элемента
// будет присваиваться во время каждой итерации
// 2) "языки" - имя итерируемого объекта, теперь массив,
// мы хотим выполнить цикл
for (пусть пункт языков) {
  console.log(`Текущий элемент: ${item}.`)
}
// 'Текущий элемент: JavaScript.'
// 'Текущий элемент: C++.'
// 'Текущий элемент: Java. '
// 'Текущий элемент: Python.'
// 'Текущий элемент: Perl.'
// Простой цикл for...of №2: перебор строки
const myWord = 'Верблюд'
for (let char of myWord) {
  console.log(символ)
}
// 'С'
// 'а'
// 'м'
// 'е'
// 'л'
 

Бесконечные циклы

Когда дело доходит до циклов JavaScript, всегда есть вероятность создания бесконечного цикла. Проще говоря, бесконечный цикл — это цикл, который никогда не заканчивается. Это происходит, когда условие, используемое в цикле, всегда дает true , а не false . Единственный способ избежать этого — уделять большое внимание каждый раз, когда вы работаете с циклами JavaScript.

Особенно это касается циклов и . Цикл while позволяет очень легко забыть, что условие рано или поздно оценивается как 9.0039 false и цикл остановится. Итак, обращайте внимание на код, который вы пишете, и следите за опечатками. Или уменьшите вероятность возникновения бесконечных циклов, заменив цикл while другими циклами JavaScript.

 // НЕВЕРНО: отсутствует обновление переменной, используемой в условии
// Это создаст бесконечный цикл
пусть numOfIterations = 0
// Создаем цикл while
в то время как (numOfIterations < 10) {
 // Регистрируем текущее значение "numOfIterations"
 console.log(количество итераций)
 /* <= проблема */
}
// ПРАВИЛЬНО: обновить переменную, используемую в условии
// Бесконечный цикл
пусть numOfIterations = 0
// Создаем цикл while
в то время как (numOfIterations < 10) {
 // Регистрируем текущее значение "numOfIterations"
 console.log(количество итераций)
 // Обновить "количество итераций"
 numOfIterations++ /* <= исправлено */
}
// НЕВЕРНО: неправильное выражение приращения (i-- вместо i++)
// Это создаст бесконечный цикл
for (пусть i = 0; i < 10; i-- /* <= задача */) {
 // Записать текущее значение "i"
 console.log(я)
}
// ПРАВИЛЬНО: используйте правильное выражение приращения,
// исходя из желаемого результата
for (пусть i = 0; i < 10; i++ /* <= фиксировано */) {
 // Записать текущее значение "i"
 console.