unslug ru: move

1 files changed, 362 insertions, 0 deletions

diff --git a/files/ru/web/javascript/guide/loops_and_iteration/index.html b/files/ru/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..231bc70804
--- /dev/null
+++ b/files/ru/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,362 @@
+---
+title: Циклы и итерации
+slug: Web/JavaScript/Guide/Циклы_и_итерации
+tags:
+  - for
+  - операторы цикла
+  - циклы
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">Циклы - простой способ сделать какое-то действие несколько раз. Эта глава <a href="/ru/docs/Web/JavaScript/Guide">руководства JavaScript Guide</a> познакомит вас с различными операторами доступными в JavaScript.</p>
+
+<p>Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры "Иди 5 шагов на восток" может быть выражена в виде цикла:</p>
+
+<pre class="brush: js">var step;
+for (step = 0; step &lt; 5; step++) {
+  // Запускается 5 раз, с шагом от 0 до 4.
+  console.log('Идём 1 шаг на восток');
+}
+</pre>
+
+<p>Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз (не забывайте про нулевой раз повторения, отсчёт в массиве начинается с 0). Различные по строению циклы предлагают разные способы для определения начала и окончания цикла. Для различных задач программирования существуют свои операторы цикла, с помощью которых они решаются намного проще.</p>
+
+<p>Операторы предназначеные для организации циклов в  JavaScript:</p>
+
+<ul>
+ <li>{{anch("Цикл_for")}}</li>
+ <li>{{anch("Цикл_do...while")}}</li>
+ <li>{{anch("Цикл_while")}}</li>
+ <li>{{anch("Метка_(label)")}}</li>
+ <li>{{anch("break")}}</li>
+ <li>{{anch("continue")}}</li>
+ <li>{{anch("for...in")}}</li>
+ <li>{{anch("for...of")}}</li>
+</ul>
+
+<h2 id="Цикл_for">Цикл <code>for</code> </h2>
+
+<p>Цикл <strong><a href="/ru/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> </a> </strong>повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор <code>for</code> в JavaScript аналогичен оператору for в Java и C. Объявление оператора <code>for</code> выглядит следующим образом:</p>
+
+<pre class="syntaxbox">for ([начало]; [условие]; [шаг]) выражения
+</pre>
+
+<p>При его выполнении происходит следущее:</p>
+
+<ol>
+ <li>Выполняется выражение <code>начало</code>, если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.</li>
+ <li>Выполняется <code>условие</code>. Если <code>условие</code> истинно, то выполняются <code>выражения</code>. Если оно ложно, цикл <code>for</code> прерывается. Если же <code>условие</code> полностью пропущено, то оно считается истинным.</li>
+ <li>Выполняются <code>выражения</code>. Чтобы выполнить несколько выражений, используются блок-выражение  <code>{ ... }</code>  для группировки выражений.</li>
+ <li>Обновляется <code>шаг</code>, если он есть, а затем управление возвращается к шагу 2.</li>
+</ol>
+
+<h3 id="Пример"><strong>Пример</strong></h3>
+
+<p>В следующей функции есть цикл <code>for</code>, который считает количество выбранных жанров в списке прокрутки (элемент {{HTMLElement("select")}}, который позволяет выбрать несколько элементов). Цикл <code>for</code> объявляет переменную <code>i</code> и задаёт ей значение 0. Также он проверяет, что <code>i</code> меньше количества элементов в элементе <code>&lt;select&gt;</code>, выполняет оператор <code>if</code> и увеличивает <code>i</code> на один после каждого прохода цикла.</p>
+
+<pre class="brush: html">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="Как много выбрано?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Выбрано элементов: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Цикл_do...while">Цикл <code>do...while</code> </h2>
+
+<p>Цикл <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></code> повторяется пока заданное условие истинно. Оператор <code>do...while</code> имеет вид:</p>
+
+<pre class="syntaxbox">do
+  выражения
+while (условие);
+</pre>
+
+<p><code>выражения</code> выполняются пока <code>условие</code> истинно. Чтобы использовать несколько выражений, используйте блок-выражение  <code>{ ... }</code>, чтобы сгруппировать их. Если <code>условие</code> истинно, <code>выражения</code> выполнятся снова. В конце каждого прохода <code>условие</code> проверяется. Если <code>условие</code> ложно, выполнение приостанавливается и управление передаётся выражению после <code>do...while</code>.</p>
+
+<h3 id="Пример_2"><strong>Пример</strong></h3>
+
+<p>В следующем примере, цикл <code>do</code> выполнится минимум 1 раз и запускается снова, пока <code>i</code> меньше 5.</p>
+
+<pre class="brush: js">do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="Цикл_while">Цикл <code>while</code></h2>
+
+<p>Цикл <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/while">while</a></code> выполняет выражения пока условие истинно. Выглядит он так:</p>
+
+<pre class="syntaxbox">while (условие)
+  выражения
+</pre>
+
+<p>Если <code>условие</code> становится ложным, выражения в цикле перестают выполняться и управление переходит к выражению после цикла.</p>
+
+<p><code>Условие</code> проверяется на истинность до того, как выполняются <code>выражения</code> в цикле. Если <code>условие</code> истинно, выполняются <code>выражения</code>, а затем условие проверяется снова. Если <code>условие</code> ложно, выполнение приостанавливается и управление переходит к выражению после <code>while</code>.</p>
+
+<p>Чтобы использовать несколько выражений, используйте блок выражение <code>{ ... }</code>, чтобы сгруппировать их.</p>
+
+<h3 id="Пример_1"><strong>Пример 1</strong></h3>
+
+<p>Следующий цикл <code>while</code> работает, пока <code>n</code> меньше трёх:</p>
+
+<pre class="brush: js">var n = 0;
+var x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>С каждой итерацией, цикл увеличивает <code>n</code> и добавляет это значение к <code>x</code>. Поэтому, <code>x</code> и <code>n</code> получают следующие значения:</p>
+
+<ul>
+ <li>После первого прохода: <code>n</code> = 1 и <code>x</code> = 1</li>
+ <li>После второго: <code>n</code> = 2 и <code>x</code> = 3</li>
+ <li>После третьего прохода: <code>n</code> = 3 и <code>x</code> = 6</li>
+</ul>
+
+<p>После третьего прохода, условие <code>n &lt; 3</code> становится ложным, поэтому цикл прерывается.</p>
+
+<h3 id="Пример_2_2"><strong>Пример 2</strong></h3>
+
+<p>Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле <code>while</code> будут выполняться вечно, т.к. условие никогда не станет ложным:</p>
+
+<pre class="brush: js">while (true) {
+  console.log("Hello, world");
+}</pre>
+
+<h2 id="Метка_(label)">Метка (label)</h2>
+
+<p><a href="/ru/docs/Web/JavaScript/Reference/Statements/label">Метка</a> представляет собой оператор с индентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы <code>break</code> или <code>continue</code>, чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.</p>
+
+<p>Синтаксис метки следующий:</p>
+
+<pre class="syntaxbox">метка :
+   оператор
+</pre>
+
+<p>Значение <em>метки</em> может быть любым корректным JavaScript индентификатором, не являющимся зарезервированным словом. <code><em>Оператор</em></code><em>, </em>указанный вами после метки может быть любым выражением.</p>
+
+<h3 id="Пример_3"><strong>Пример</strong></h3>
+
+<p>В этом примере, метка <code>markLoop</code> обозначает цикл <code>while</code>.</p>
+
+<pre class="brush: js">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break"><code>break</code></h2>
+
+<p>Используйте оператор <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a></code>, чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.</p>
+
+<ul>
+ <li>Когда вы используете <code>break</code> без метки, он прерывает циклы <code>while</code>, <code>do-while</code> и <code>for</code> или сразу переключает управление к следующему выражению.</li>
+ <li>Когда вы используете <code>break</code> с меткой, он прерывает специально отмеченное выражение.</li>
+</ul>
+
+<p>Синтаксис оператора может быть таким:</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>Метка</em>;</code></li>
+</ol>
+
+<p>Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.</p>
+
+<h3 id="Пример_1_2"><strong>Пример</strong> <strong>1</strong></h3>
+
+<p>Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение - <code>theValue</code>:</p>
+
+<pre class="brush: js">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="Пример_2_Прерывание_метки"><strong>Пример 2: Прерывание метки</strong></h3>
+
+<pre class="brush: js">var x = 0;
+var z = 0
+labelCancelLoops: while (true) {
+  console.log("Внешний цикл: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Внутренний цикл: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue"><code>continue</code></h2>
+
+<p>Оператор <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> используется, чтобы шагнуть на шаг вперёд в циклах <code>while</code>, <code>do-while</code>, <code>for</code> или перейти к метке.</p>
+
+<ul>
+ <li>Когда вы используете <code>continue</code> без метки, он прерывает текущую итерацию циклов <code>while</code>, <code>do-while</code> и <code>for</code> и продолжает выполнение цикла со следующей итерации. В отличие от <code>break</code>, <code>continue</code> не прерывает выполнение цикла полностью. В цикле <code>while </code>он прыгает к условию. А в <code>for</code> увеличивает <code>шаг</code>.</li>
+ <li>Когда вы используете <code>continue</code> с меткой, он применяется к циклу с этой меткой.</li>
+</ul>
+
+<p>Синтаксис <code>continue</code> может выглядеть так:</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue <em>Метка</em></code><em><code>;</code></em></li>
+</ol>
+
+<h3 id="Пример_1_3"><strong>Пример 1</strong></h3>
+
+<p>Следующий пример показывает цикл <code>while</code> с оператором <code>continue</code>, который срабатывает, когда значение <code>i</code> равно 3. Таким образом, <code>n</code> получает значения 1, 3, 7 и 12.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Пример_2_3"><strong>Пример 2</strong></h3>
+
+<p>Выражение, отмеченное <em><code>checkiandj</code></em> содержит выражение отмеченное <em><code>checkj</code></em>. При встрече с <code>continue</code>, программа прерывает текущую итерацию <em><code>checkj</code></em> и начинает следующую итерацию. Каждый раз при встрече с <code>continue</code>, <em><code>checkj</code></em> переходит на следующую итерацию, пока условие возвращает <code>false</code>. Когда возвращается <code>false</code>, после вычисления остатка от деления <em><code>checkiandj</code></em>, <em><code>checkiandj</code></em> переходит на следующую итерацию, пока его условие возвращает <code>false</code>. Когда возвращается <code>false</code>, программа продолжает выполнение с выражения после <em><code>checkiandj</code></em>.</p>
+
+<p>Если у <code>continue</code> проставлена метка <em><code>checkiandj</code></em>, программа может продолжиться с начала метки <em><code>checkiandj</code></em>.</p>
+
+<pre class="brush: js">checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) != 0) {
+          continue checkj;
+        }
+        console.log(j + " чётное.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in"><code>for...in</code> </h2>
+
+<p>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл <code>for...in</code> выглядит так:</p>
+
+<pre class="syntaxbox">for (variable in object) {
+  выражения
+}
+</pre>
+
+<h3 id="Пример_4"><strong>Пример</strong></h3>
+
+<p>Следующая функция берёт своим аргументом объект и его имя. Затем проходит по всем свойствам объекта и возвращает строку, которая содержит имена свойств и их значения.</p>
+
+<pre class="brush: js">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>Для объекта <code>car</code> со свойствами <code>make</code> и <code>model</code>, <font face="Consolas, Liberation Mono, Courier, monospace"><em>результатом </em>будет</font>:</p>
+
+<pre class="brush: js">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="Пример_№2">Пример №2</h3>
+
+<p>Также, по ключу можно выводить значение:</p>
+
+<pre>let obj = {model: 'AUDI A8', year: '2019', color: 'brown'}
+
+for (key in obj) {
+  console.log(`${key} = ${obj[key]}`);
+}
+// model = AUDI A8
+// year = 2019
+// color = brown</pre>
+
+<h3 id="Массивы"><strong>Массивы</strong></h3>
+
+<p>Хотя, очень заманчиво использовать <strong>for...in</strong> как способ пройтись по всем элементам {{jsxref("Array")}}, этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for</a></code> для числовых индексов при взаимодействии с массивами, поскольку оператор <strong>for...in</strong> проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.</p>
+
+<h3 id="Пример_5">Пример</h3>
+
+<pre>let arr = ['AUDI A8', '2019', 'brown'];
+arr.cost = '$100.000';
+
+for (key in arr) {
+  console.log(`${key} = ${arr[key]}`);
+}
+
+// 0 = AUDI A8
+// 1 = 2019
+// 2 = brown
+// cost = $100.000
+</pre>
+
+<h2 id="for...of"><code>for...of</code></h2>
+
+<p>Оператор <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> создаёт цикл, проходящий по <a href="/ru/docs/Web/JavaScript/Guide/iterable">перечислимым объектам</a> (включая {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, объект <a href="/ru/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.</p>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
+  <em>выражения
+</em>}</pre>
+
+<p>Следующий пример показывает разницу между циклами <code>for...of</code> и <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/for...in" title="ru/docs/JavaScript/Reference/Statements/for...in">for...in</a></code>. Тогда как <code>for...in</code> проходит по именам свойств, <code>for...of</code> проходит по значениям свойств:</p>
+
+<pre class="brush:js">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // выводит "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // выводит "3", "5", "7"
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>