---
title: for
slug: Web/JavaScript/Reference/Statements/for
translation_of: Web/JavaScript/Reference/Statements/for
---
<div>
<div>{{jsSidebar("Statements")}}</div>
</div>

<h2 id="Summary" name="Summary">Введение</h2>

<p>Выражение<strong> for</strong> создаёт цикл, состоящий из 3 необязательных выражений в круглых скобках, разделённых точками с запятой.</p>

<h2 id="Syntax" name="Syntax">Синтаксис</h2>

<pre class="syntaxbox">for ([<em>инициализация</em>]; [<em>условие</em>]; [<em>финальное выражение</em>])<em>выражение</em>
</pre>

<dl>
 <dt><font face="Consolas, Liberation Mono, Courier, monospace">инициализация</font></dt>
 <dd>Выражение (в том числе выражения присвоения) или определение переменных. Обычно используется, чтобы инициализировать счётчик. Это выражение может опционально объявлять новые переменные с помощью ключевого слова <code>var</code>. Эти переменные видимы не только в цикле, т.е. в той же области области видимости, что и цикл <code>for</code>. Результат этого выражения отбрасывается.</dd>
 <dt><font face="Consolas, Liberation Mono, Courier, monospace">условие</font></dt>
 <dd>Выражение, выполняющееся на каждой интерации цикла. Если выражение истинно, цикл выполняется. Условие не является обязательным. Если его нет, условие всегда считается истиной. Если выражение ложно, выполнение переходит к первому выражению, следующему за <code>for.</code></dd>
 <dt><font face="Consolas, Liberation Mono, Courier, monospace">финальное выражение</font></dt>
 <dd>Выражение, выполняющееся в конце интерации цикла. Происходит до следующего выполнения условия. Обычно используется для обновления или увеличения переменной счётчика.</dd>
 <dt><font face="Consolas, Liberation Mono, Courier, monospace">выражение</font></dt>
 <dd>Выражение, которое выполняется, когда условие цикла истинно. Чтоб выполнить множество выражений в цикле, используйте <a href="/ru/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">блок</a> (<code>{ ... }</code>) для группировки этих выражений. Чтобы не выполнять никакого выражения в цикле, используйте <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустое выражение</a> (<code>;</code>).</dd>
</dl>

<h2 id="Examples" name="Examples">Примеры</h2>

<h3 id="Example.3A_Using_for" name="Example.3A_Using_for">Использование <code>for</code></h3>

<p>Следующий цикл <code>for</code> начинается объявлением переменной <code>i </code>и задания ей значения <code>0</code>. Затем проверяет, что <code>i</code> меньше девяти, выполняет выражения внутри цикла и увеличивает <code>i</code> на 1 каждый раз.</p>

<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
   console.log(i);
   // ещё какие-то выражения
}
</pre>

<h3 id="Необязательные_выражения_в_for">Необязательные выражения в  <code>for</code></h3>

<p>Все 3 выражения в цикле <code>for</code> не обязательны.</p>

<p>Например, в блоке инициализации не требуется определять переменные:</p>

<pre class="brush: js">var i = 0;
for (; i &lt; 9; i++) {
    console.log(i);
    // ещё выражения
}
</pre>

<p>Как и блок инициализации, блок условия не обязателен. Если пропустите это выражение, вы должны быть уверены, что прервете цикл где-то в теле, а не создадите бесконечный цикл.</p>

<pre class="brush: js">for (var i = 0;; i++) {
   console.log(i);
   if (i &gt; 3) break;
   // тут какой-то код
}</pre>

<p>Вы можете пропустить все 3 блока. Снова убедитесь, что используете <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a></code>, чтоб закончить цикл, а также изменить счётчик, так что условие для break было истинно в нужный момент.</p>

<pre class="brush: js">var i = 0;

for (;;) {
  if (i &gt; 3) break;
  console.log(i);
  i++;
}
</pre>

<h3 id="Example.3A_Using_for_without_the_statement_section" name="Example.3A_Using_for_without_the_statement_section">Использование <code>for</code> без блока выражений</h3>

<p>Следующий цикл <code>for</code> вычисляет смещение позиции узла в секции <em>[финальное выражение]</em>, и, следовательно, не требует использования выражения внутри цикла или <code><a href="/ru/docs/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">блока</a></code>, <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустое выражение</a> используется вместо этого.</p>

<pre class="brush: js">function showOffsetPos (sId) {
  var nLeft = 0, nTop = 0;

  for (var oItNode = document.getElementById(sId); // инициализация
       oItNode; // условие
       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // финальное выражение
       /* пустое выражение */ ;

  console.log("Смещение позиции элемента \"" + sId + "\":\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}

// Пример вызова:

showOffsetPos("content");

// Выводит:
// "Смещение позиции элемента "content":
// left: 0px;
// top: 153px;"</pre>

<div class="note"><strong>Замечание:</strong> В этом случае, когда вы не используете условие внутри цикла, <strong>точка с запятой ставится сразу после выражения цикла.</strong></div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Возможность</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Возможность</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Базовая поддержка</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Также можете просмотреть</h2>

<ul>
 <li>{{jsxref("Statements/break", "break")}}</li>
 <li>{{jsxref("Statements/continue", "continue")}}</li>
 <li>{{jsxref("Statements/empty", "empty")}}</li>
 <li>{{jsxref("Statements/while", "while")}}</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></code></li>
</ul>