diff options
Diffstat (limited to 'files/ru/web/javascript/reference/statements')
31 files changed, 5762 insertions, 0 deletions
diff --git a/files/ru/web/javascript/reference/statements/async_function/index.html b/files/ru/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..df0368c62a --- /dev/null +++ b/files/ru/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,179 @@ +--- +title: async function +slug: Web/JavaScript/Reference/Statements/async_function +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Объявление <code style="font-style: normal; font-weight: normal;"><strong>async function</strong></code> определяет <em>асинхронную функцию</em>, которая возвращает объект {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</div> + +<div class="noinclude"> +<p>Вы также можете определить async-функции, используя {{jsxref("Operators/async_function", "выражение async function")}}.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Имя функции.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Имя аргумента, который будет передан в функцию.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Выражение, содержащее тело функции.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>После вызова функция <code>async</code> возвращает {{jsxref("Promise")}}. Когда результат был получен, <code>Promise</code> завершается, возвращая полученное значение. Когда функция <code>async </code>выбрасывает исключение, <code>Promise</code> ответит отказом с выброшенным (<code>throws</code>) значением.</p> + +<p>Функция async может содержать выражение {{jsxref("Operators/await", "await")}}, которое приостанавливает выполнение функции async и ожидает ответа от переданного <code>Promise</code>, затем возобновляя выполнение функции <code>async</code> и возвращая полученное значение.</p> + +<p>Ключевое слово <code>await</code> допустимо только в асинхронных функциях. В другом контексте вы получите ошибку <code>SyntaxError</code>.</p> + +<div class="note"> +<p>Цель функций async/await упростить использование promises синхронно и воспроизвести некоторое действие над группой <code>Promises</code>. Точно так же как <code>Promises</code> подобны структурированным callback-ам, async/await подобна комбинации генераторов и promises.</p> +</div> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<pre class="brush: js notranslate">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function add1(x) { + const a = await resolveAfter2Seconds(20); + const b = await resolveAfter2Seconds(30); + return x + a + b; +} + +add1(10).then(v => { + console.log(v); // prints 60 after 4 seconds. +}); + +async function add2(x) { + const a = resolveAfter2Seconds(20); + const b = resolveAfter2Seconds(30); + return x + await a + await b; +} + +add2(10).then(v => { + console.log(v); // prints 60 after 2 seconds. +}); +</pre> + +<div class="warning"> +<h4 id="Не_путайте_await_и_Promise.all">Не путайте await и Promise.all</h4> + +<p>Функция <code>add1</code> приостанавливается на 2 секунды для первого <code>await</code> и еще на 2 для второго. Второй таймер создается только после срабатывания первого. В функции <code>add2</code> создаются оба и оба же переходят в состояние <code>await</code>. В результате функция <code>add2</code> завершится скорее через две, чем через четыре секунды, поскольку таймеры работают одновременно. Однако запускаются они все же не паралелльно, а друг за другом - такая конструкция не означает автоматического использования <code>Promise.all</code>. Если два или более Promise должны разрешаться параллельно, следует использовать <code>Promise.all</code>.</p> +</div> + +<h3 id="Когда_функция_async_выбрасывает_исключение">Когда функция <code>async </code>выбрасывает исключение</h3> + +<pre class="brush: js notranslate">async function throwsValue() { + throw new Error('oops'); +} +throwsValue() + .then((resolve) => { + console.log("resolve:" + resolve); + }, + (reject) => { + console.log("reject:" + reject); + }); +//prints "reject:Error: oops" +//or +throwsValue() + .then((resolve) => { + console.log("resolve:" + resolve); + }) + .catch((reject) => { + console.log("reject:" + reject); + }); +//prints "reject:Error: oops" +</pre> + +<h3 id="Перепись_цепочки_promise_с_использованием_функции_async">Перепись цепочки promise с использованием функции <code>async</code></h3> + +<p>API, которое возвращает {{jsxref("Promise")}}, будет возвращать значение в цепочке, тем самым разбивая функцию на много частей. Рассматривая следующий код:</p> + +<pre class="brush: js notranslate">function getProcessedData(url) { + return downloadData(url) // returns a promise + .catch(e => { + return downloadFallbackData(url) // returns a promise + }) + .then(v => { + return processDataInWorker(v); // returns a promise + }); +} +</pre> + +<p>он может быть переписан с одним использованием функции <code>async</code>:</p> + +<pre class="brush: js notranslate">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + return processDataInWorker(v); +} +</pre> + +<p>Заметьте, что пример выше не содержит <code>await</code> на <code>return</code>, потому что возвращаемое значение функции <code>async</code> неявно обернуто в {{jsxref("Promise.resolve")}}.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div> +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправить нам pull request.</div> + +<p>{{Compat("javascript.statements.async_function")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/break/index.html b/files/ru/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..dfb5840659 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/break/index.html @@ -0,0 +1,140 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оператор break</strong> прерывает выполнение текущего цикла, переключателя {{jsxref("Statements/switch", "switch")}}, или метки ({{jsxref("Statements/label", "label")}}) блочного выражения и переносит выполнение программы к оператору, следующему за прерванным.</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>break [<em>label</em>];</code></pre> + +<dl> + <dt><code>label</code></dt> + <dd>Опционально. Идентификатор связанной метки. Если прерываемое выражение не цикл или {{jsxref("Statements/switch", "switch")}}, метка является обязательной.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Инструкция <code>break</code> включает необязательную метку для возможности выхода из блочного выражения. При таком использовании <code>break</code> должен находиться внутри отмеченного блока, который соответствует метке. Отмеченная инструкция может быть любой {{jsxref("Statements/block", "блочной")}} инструкцией; она не обязательно должна являться циклом.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующая функция использует инструкцию <code>break</code> для выхода из цикла {{jsxref("Statements/while", "while")}}, когда <code>i</code> станет равно 3, и возвращает значение 3 * <code>x</code>.</p> + +<pre class="brush:js;highlight:[6];">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + return i * x; +}</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>ECMAScript 1-е Издание.</td> + <td>Стандарт</td> + <td>Изначальное определение. Версия без метки.</td> + </tr> + <tr> + <td>ECMAScript 3-е Издание.</td> + <td>Стандарт</td> + <td>Добавлена поддержка метки.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ES6')}}</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/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/class/index.html b/files/ru/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..3aab01ee9a --- /dev/null +++ b/files/ru/web/javascript/reference/statements/class/index.html @@ -0,0 +1,183 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Class declaration</strong> создает новый класс с данным именем на основе прототипного наследования.</p> + +<div class="noinclude"> +<p>Можно так же определить класс, используя {{jsxref("Operators/class", "class expression", "", 1)}}. Но в отличае от class expression, class declaration не позволяет снова объявить уже существующий класс, это <strong>приведёт к ошибке типа</strong>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js notranslate">class <em>name</em> [extends] { + // тело класса +} +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Как и class expression, тело class declaration будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}. Свойство конструктора является опциональным.</p> + +<p>Class declaration не {{Glossary("Hoisting", "поднимается")}} (в отличие от <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">декларируемых функций</a>).</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_class_declaration">Простой class declaration</h3> + +<p>В следующем примере сначала определяется класс с именем Polygon, затем он наследуется для создания класса Square. Заметьте, что super(), используемый в конструкторе, может быть использован только в конструкторе и должен быть вызван до того, как будет использовано ключевое слово this.</p> + +<pre class="brush: js notranslate">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<div class="warning"> +<h3 id="Попытка_объявить_класс_дважды">Попытка объявить класс дважды</h3> + +<p>Переопределение класса с помощью class declaration вызовет ошибку типа.</p> + +<pre class="brush: js notranslate">class Foo {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared +</pre> + +<p>Та же ошибка будет вызвана, если класс был определен перед использованием class declaration.</p> + +<pre class="brush: js notranslate">var Foo = class {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared + +</pre> +</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-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_брузерами">Поддержка брузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function"><code>function</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/const/index.html b/files/ru/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..351580e6dc --- /dev/null +++ b/files/ru/web/javascript/reference/statements/const/index.html @@ -0,0 +1,135 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - ECMAScript6 + - JavaScript + - const + - Константы +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Значение констант не может быть изменено новым присваиванием, а также не может быть переопределено. Константы (<code>const</code>) подчиняются области видимости уровня блока так же, как переменные, объявленные с использованием ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>.</div> + +<div></div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Имя константы. Подчиняется тем же правилам, что и {{Glossary("identifier", "идентификаторы")}} обычных переменных.</dd> + <dt><code>valueN</code></dt> + <dd>Значение константы. Может быть любым из тех типов, которые могут быть для переменных, включая функцию.</dd> +</dl> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Это объявление создаёт константу, чья область действия может быть как глобальной, так и локальной внутри блока, в котором она объявлена. Глобальные константы не становятся свойствами объекта window, в отличие от <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code>-переменных. Инициализация константы обязательна; необходимо указать значение одновременно с объявлением (смысл в том, что потом это значение изменить уже нельзя).</p> + +<p><code><strong>const</strong></code> создаёт константу (новую именованную ссылку на область памяти), доступную только для чтения. Это не означает, что указываемое значение неизменно, но это означает, что идентификатор не может быть переназначен. Например, если константа указывает на объект, то сам объект может быть изменён.</p> + +<p>Все соображения по поводу <a href="/ru/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">временных мёртвых зон</a>, применимы и к <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> и к <code>const</code>.</p> + +<p>Имена констант не могут совпадать с именами функций или переменных той же области видимости.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Ниже описаны примеры, демонстрирующие поведение <strong><code>const</code>. </strong>Попробуйте их выполнить в <a href="/ru/docs/Tools/Черновик">простом JavaScript-редакторе</a> или в консоли браузера.</p> + +<pre class="brush:js">// Примечание: Идентификаторы констант могут быть объявлены как в верхнем, +// так и в нижнем регистре. Но правилом хорошего тона является использование +// верхнего регистра. + +// определим MY_FAV как константу и присвоим ей значение 7 +const MY_FAV = 7; + +// данное присваивание выдаст ошибку - Uncaught TypeError: Assignment to constant variable. +MY_FAV = 20; + +// напечатает 7 +console.log("my favorite number is: " + MY_FAV); + +// попробуем переопределить константу, будет брошено исключение - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// имя MY_FAV зарезервированно константой выше, данная операция +// выкинет исключение +var MY_FAV = 20; + +// здесь также будет ошибка +let MY_FAV = 20; + +// Важно отметить свойства области видимости уровня блока +if (MY_FAV === 7) { + // Всё нормально. Создать константу или переменную MY_FAV можно. + // (работает так же как и let при объявлении в блоке переменных, которые не const) + const MY_FAV = 20; + + // MY_FAV теперь 20 + console.log("my favorite number is " + MY_FAV); + + // это попадёт в глобальный контекст и выдаст ошибку + var MY_FAV = 20; +} + +// MY_FAV все ещё имеет значение 7 +console.log("my favorite number is " + MY_FAV); + +// Выдаст ошибку, потому что константа не инициализирована - Uncaught SyntaxError: Missing initializer in const declaration +const FOO; + +// const также работает с объектами +const MY_OBJECT = {"key": "value"}; + +// Попытка переопределить ссылку на объект вызовет исключение - Uncaught TypeError: Assignment to constant variable. +MY_OBJECT = {"OTHER_KEY": "value"}; + +// но, свойства объекта (ключи) можно изменять +MY_OBJECT.key = "otherValue"; // Используйте <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze()</a> для того, чтобы сделать объект неизменяемым + +// То же самое применимо к массивам +const MY_ARRAY = []; +// Например, можно добавлять элементы в массив +MY_ARRAY.push("A"); // ["A"] +// Но менять ссылку на объект массива нельзя. Это вызовет исключение - Uncaught TypeError: Assignment to constant variable +MY_ARRAY = ["B"] +</pre> + +<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('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первоначальное определение</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Нет изменений</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("javascript.statements.const")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="/ru/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Константы в справочнике JavaScript</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/continue/index.html b/files/ru/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..5cb41da72a --- /dev/null +++ b/files/ru/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,200 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Сводка">Сводка</h2> + +<p>Инструкция <strong>continue</strong> прерывает выполнение текущей итерации текущего или отмеченного цикла, и продолжает его выполнение на следующей итерации.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">continue [ label ];</pre> + +<dl> + <dt><code>label</code></dt> + <dd>Идентификатор, являющийся меткой (<code>label</code>) инструкции.</dd> +</dl> + +<h2 id="Description" name="Description">Описание</h2> + +<p>По сравнению с инструкцией {{jsxref("Statements/break", "break")}}, <code>continue</code> прерывает выполнение цикла не полностью, вместо этого:</p> + +<ul> + <li>В цикле {{jsxref("Statements/while", "while")}} оно переносит поток выполнения к условию.</li> +</ul> + +<ul> + <li>В цикле {{jsxref("Statements/for", "for")}} оно переносит поток выполнения к финальному выражению в описании цикла.</li> +</ul> + +<p>Инструкция <code>continue</code> может использоваться вместе с необязательной меткой, которая будет начинать следующую итерацию отмеченного цикла, а не текущего. В этом случае, <code>continue</code> должен находиться внутри отмеченного блока, который соответствует метке.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Example_Using_continue_with_while" name="Example:_Using_continue_with_while">Использование <code>continue</code> с циклом <code>while</code></h3> + +<p>Пример показывает использование цикла {{jsxref("Statements/while", "while")}} вместе с инструкцией <code>continue, которая выполняется, когда</code> <code>i</code> станет равно 3-м. Таким образом, <code>n</code> принимает значения 1, 3, 7 и 12.</p> + +<pre class="brush: js">i = 0; +n = 0; +while (i < 5) { + i++; + if (i === 3) { + continue; + } + n += i; +} +</pre> + +<h3 id="Использование_continue_вместе_с_меткой">Использование <code>continue</code> вместе с меткой</h3> + +<p>В примере цикл, отмеченный <code>checkiandj</code>, содержит внутри себя цикл, отмеченный <code>checkj</code>. Если встретится инструкция <code>continue</code>, выполнение кода продолжится в начале блока кода <code>checkj</code>. При каждом вызове <code>continue цикл</code> <code>checkj</code> будет начинать новую итерацию, пока условие не начнёт возвращать <code>false</code>. Когда это случится, продолжится выполнение оставшейся части цикла <code>checkiandj</code>.</p> + +<p>Если бы <code>continue</code> имело метку <code>checkiandj</code>, программа продолжала бы свою работу с начала цикла <code>checkiandj</code>.</p> + +<p>Смотрите также {{jsxref("Statements/label", "label")}}.</p> + +<pre class="brush: js">var i = 0, + j = 8; + +checkiandj: while (i < 4) { + console.log("i: " + i); + i += 1; + + checkj: while (j > 4) { + console.log("j: "+ j); + j -= 1; + if ((j % 2) == 0) + continue checkj; + console.log(j + " является нечётным."); + } + console.log("i = " + i); + console.log("j = " + j); +} +</pre> + +<p>Вывод:</p> + +<pre class="brush: js">"i: 0" + +// начало checkj +"j: 8" +"7 является нечётным." +"j: 7" +"j: 6" +"5 является нечётным." +"j: 5" +// конец checkj + +"i = 1" +"j = 4" + +"i: 1" +"i = 2" +"j = 4" + +"i: 2" +"i = 3" +"j = 4" + +"i: 3" +"i = 4" +"j = 4" +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>ECMAScript 1-е Издание.</td> + <td>Стандарт</td> + <td>Изначальное определение. Версия без метки.</td> + </tr> + <tr> + <td>ECMAScript 3-е Издание.</td> + <td>Стандарт</td> + <td>Добавлена поддержка метки.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ES6')}}</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/label", "label")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/debugger/index.html b/files/ru/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..f6f1c58674 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,124 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +tags: + - JavaScript + - Отладка +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Выражение <strong>debugger </strong>открывает доступ к любому доступному в конкретном окружении отладочному функционалу, например к установке точек останова (т.н. брейкпоинтов). Если функционал отладки в среде выполнения недоступен, данное выражение не будет иметь никакого эффекта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Примеры">Примеры</h2> + +<p>Следующий пример показывает код, содержащий выражение <strong>debugger. </strong>Это позволяет вызвать функционал отладки (если таковой может быть использован) при вызове функции.</p> + +<pre class="brush:js">function potentiallyBuggyCode() { + debugger; + // чтобы протестировать работу отладчика, поместите здесь код, заведомо содержащий ошибку +}</pre> + +<p>При вызове отладчика выполнение скрипта приостановится в том месте, где находится выражение <strong>debugger</strong>, что равноценно<strong> </strong>действию установленных в скрипте точек останова.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<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('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Исходное определение</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger 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="См._также">См. также</h2> + +<ul> + <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li> + <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/default/index.html b/files/ru/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..5a6438e9c7 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/default/index.html @@ -0,0 +1,116 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Switch + - export +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>В JavaScript ключевое слово <strong>default </strong>используется в двух случаях: внутри конструкции {{jsxref("Statements/switch", "switch")}} или с конструкцией {{jsxref("Statements/export", "export")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>В конструкции {{jsxref("Statements/switch", "switch")}}:</p> + +<pre class="syntaxbox">switch (expression) { + case value1: + // Выражение выполнится, когда значение expression соответствует value1 + [break;] + default: + // Выражение выполнится, когда ни одно из значений не будет соответствовать значению expression + [break;] +}</pre> + +<p>С конструкцией {{jsxref("Statements/export", "export")}}:</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="Описание">Описание</h2> + +<p>Для получения дополнительной информации смотрите:</p> + +<ul> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_default_в_switch">Использование <code>default</code> в <code>switch</code></h3> + +<p>В следующем примере, если <code>expr</code> имеет значение "Апельсины" или "Яблоки", то программа сопоставит это значение с "Апельсины" или с "Яблоки", а затем выполнит соответствующее выражение. В других случаях поможет ключевое слово <strong>default,</strong> выполня связанное выражение.</p> + +<pre class="brush: js">switch (expr) { + case 'Апельсины': + console.log('Апельсины стоят $0.59 за фунт.'); + break; + case 'Яблоки': + console.log('Яблоки стоят $0.32 за фунт.'); + break; + default: + console.log(`Извините, у нас закончились ${expr}.`); +}</pre> + +<h3 id="Использование_default_с_export">Использование <code>default</code> с<font face="Open Sans, arial, sans-serif"> </font><code>export</code></h3> + +<p>При необходимости экспорта единственного значения или резервирования (fallback) значения для модуля, можно воспользоваться<strong> </strong>экспортом по-умолчанию: </p> + +<pre class="brush: js">// модуль "my-module.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>Тогда, в другом файле JavaScript, становится возможным просто импортировать экспортируемое по-умолчанию значение:</p> + +<pre class="brush: js">// модуль "my-module.js" +import myFunction from 'my-module'; +console.log(myFunction(3)); // 27 +</pre> + +<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-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/do...while/index.html b/files/ru/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..f6707b4b04 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,94 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Выражение <strong><code>do...while</code></strong> создает цикл, который выполняет указанное выражение до тех пор, пока условие не станет ложным. Условие проверяется после выполнения выражения, то есть выражение выполнится как минимум один раз.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">do + <em>выражение</em> +while (<em>условие</em>); +</pre> + +<dl> + <dt><code>выражение</code></dt> + <dd>Выражение, которое выполняется как минимум один раз и выполняется на каждом шаге цикла, пока условие истинно. Выражение может содержать несколько строк, для этого необходимо сгруппировать код в {{jsxref("Statements/block", "блок")}} (<code>{ ... }</code>).</dd> +</dl> + +<dl> + <dt><code>условие</code></dt> + <dd>Выражение, которое вычисляется после каждого шага цикла. Если <code>условие</code> истинно, то <code>выражение</code> выполняется еще раз. Когда <code>условие</code> ложно, выполняется выражение, следующее после <code>do...while</code>.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_do...while">Использование <code>do...while</code></h3> + +<p>В примере, цикл <code>do...while</code> выполняется до тех пор, пока <code>i</code> не перестанет быть меньше 5.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="example"></div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var result = ''; +var i = 0; +do { + i += 1; + result += i + ' '; +} while (i > 0 && i < 5); // Немотря на то, что i == 0, цикл всё равно продолжится, так как начинается без теста +document.getElementById('example').innerHTML = result;</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Примеры') }}</p> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Изначальное определение. Реализовано в JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Использование ; теперь необязательно</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> + +<p>{{Compat("javascript.statements.do_while")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/empty/index.html b/files/ru/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..89956bf163 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,148 @@ +--- +title: Пустая инструкция +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - 'Statement, инструкция, пустая инструкция' +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Пустая инструкция</strong> используется, когда инструкция не нужна, хотя синтаксис JavaScript будет предполагать её.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Пустая инструкция - точка с запятой (;) оповещает о том, что ни одно выражение не будет выполняться, даже если синтаксис JavaScript ожидает этого.</p> + +<p>Противоположное поведение, где вы хотите использовать несколько заявлений, но JavaScript позволяет только одно, можно сделать используя <a href="/ru/docs/Web/JavaScript/Reference/Statements/block"> блок</a>; он комбинирует несколько инструкций в одно.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Пустая инструкция используется в выражениях циклов. Смотрите следующий пример с пустым телом цикла:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Приравняет все значения массива к 0 +for (i = 0; i < arr.length; arr[i++] = 0) /* выражения */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Заметьте:</strong> Это хорошая идея: комментировать намеренное использование пустых инструкций, т.к. не очевидно отличить их от нормальной точки с запятой. В следующем примере использование, вероятно, ненамеренное:</p> + +<pre class="brush: js">if (condition); // Внимание, этот if ничего не делает! + killTheUniverse() // Это всегда выполняется!!! +</pre> + +<p>Другой пример: <a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> без фигурных скобок (<code>{}</code>). Если <code>three</code> истинно, ничего не пройзойдет, <code>four</code> не важна, и функция <code>launchRocket()</code> тоже не запустится.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // nothing here +else if (four) + doFour(); +else + launchRocket();</pre> + +<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('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty 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="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/block", "Блок")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/export/index.html b/files/ru/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..4eca1d3d1b --- /dev/null +++ b/files/ru/web/javascript/reference/statements/export/index.html @@ -0,0 +1,131 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +tags: + - ECMAScript6 + - JavaScript + - Statement + - export + - Инструкция + - Модули +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Инструкция <strong>export </strong>используется для экспорта функций, объектов или примитивов из файла (или модуля).</p> + +<div class="note"> +<p><strong>Примечание:</strong> Эта функциональность не реализована в браузерах на данный момент, но она реализована во многих транспилерах, таких как <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> or <a href="https://github.com/rollup/rollup">Rollup</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // или var +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // или var, const + +export default <em>выражение</em>; +export default function (…) { … } // или class, function* +export default function name1(…) { … } // или class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Идентификатор для экспорта (чтобы он мог быть импортирован с помощью {{jsxref("Statements/import", "import")}} в другом файле (скрипте)).</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Существует два типа экспорта, каждый из которых описан ниже:</p> + +<ul> + <li>Именованный экспорт: + <pre class="brush: js">export { myFunction }; // экспорт ранее объявленной функции +export const foo = Math.sqrt(2); // экспорт константы</pre> + </li> + <li>Дефолтный экспорт (экспорт по умолчанию) (один на скрипт): + <pre class="brush: js">export default function() {} // или '<em>export default class {}</em>' +// тут не ставится точка с запятой</pre> + </li> +</ul> + +<p>Именованная форма более применима для экспорта нескольких величин. Во время импорта, можно будет использовать одно и то же имя, чтобы обратиться к соответствующему экспортируемому значению.</p> + +<p>Касательно экспорта по умолчанию (default), он может быть только один для каждого отдельного модуля (файла). Дефолтный экспорт может представлять собой функцию, класс, объект или что-то другое. Это значение следует рассматривать как "основное", так как его будет проще всего импортировать.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_именованного_экспорта">Использование именованного экспорта</h3> + +<p>Мы могли бы использовать следующий код в модуле:</p> + +<pre class="brush: js">// модуль"my-module.js" +function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +export { cube, foo }; +</pre> + +<p>Таким образом в другом скрипте при помощи импорта (см. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>) мы могли бы получить следующее:</p> + +<pre class="brush: js">import { cube, foo } from 'my-module'; +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888</pre> + +<h3 id="Использование_export_default">Использование export default</h3> + +<p>Если мы хотим экспортировать единственное значение или иметь резервное значение (fallback) для данного модуля, мы можем использовать <code>export default</code>.</p> + +<pre class="brush: js">// модуль"my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>Затем, в другом скрипте можно импортировать это значение по умолчанию таким образом:</p> + +<pre class="brush: js">import cube from 'my-module'; +console.log(cube(3)); // 27 +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/for-await...of/index.html b/files/ru/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..72200e4004 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,139 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Statements/for-await...of +tags: + - JavaScript + - async + - Асинхронность + - ДжаваСкрипт +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Выражение <strong><code>for await...of</code> </strong>создаёт цикл, проходящий через асинхронные итерируемые объекты, а также синхронные итерируемые сущности, включающие: встроенные {{jsxref("String")}}, {{jsxref("Array")}}, <code>Array</code>-подобные объекты (например., {{jsxref("Functions/arguments", "arguments")}} или {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а также определяемые пользователем асинхронные/синхронные сущности. Он вызывает пользовательский итерационный хук с инструкциями, которые должны быть выполнены для значения каждого отдельного свойства объекта.</p> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пуллреквест.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>На каждой итерации значение другого свойства присваивается <em>variable</em>. <em>variable</em> может быть объявлена с помощью ключевых слов <code>const</code>, <code>let</code>, or <code>var</code>.</dd> + <dt><code>iterable</code></dt> + <dd>Объект, чьи итерируемые свойства будут повторяться.</dd> +</dl> + +<h3 id="Итерирование_по_асинхронным_переменным"><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным переменным</span></h3> + +<p>Вы также можете перебрать объект, который явно реализует асинхронный итерируемый протокол.</p> + +<pre class="brush:js">var asyncIterable = { + [Symbol.asyncIterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return Promise.resolve({ value: this.i++, done: false }); + } + + return Promise.resolve({ done: true }); + } + }; + } +}; + +(async function() { + for await (let num of asyncIterable) { + console.log(num); + } +})(); + +// 0 +// 1 +// 2 +</pre> + +<h3 id="Итерирование_по_асинхронным_генераторам."><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным генераторам.</span></h3> + +<p>Поскольку асинхронные генераторы реализуют асинхронный протокол Iterator, по ним можно пройти циклом с помощью <code>for await... of</code></p> + +<pre class="brush: js">async function* asyncGenerator() { + var i = 0; + while (i < 3) { + yield i++; + } +} + +(async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2</pre> + +<p>Для более конкретного примера перебора асинхронного генератора с помощью <code>for await... of</code>, рассмотрим перебор данных из API. В этом примере сначала создается асинхронный итератор для потока данных, а затем он используется для определения размера ответа от API.</p> + +<pre class="brush: js">async function* streamAsyncIterator(stream) { + const reader = stream.getReader(); + try { + while (true) { + const { done, value } = await reader.read(); + if (done) { + return; + } + yield value; + } + } finally { + reader.releaseLock(); + } +} +// Fetches data from url and calculates response size using the async generator. +async function getResponseSize(url) { + const response = await fetch(url); + // Will hold the size of the response, in bytes. + let responseSize = 0; + // The for-await-of loop. Async iterates over each portion of the response. + for await (const chunk of streamAsyncIterator(response.body)) { + // Incrementing the total response length. + responseSize += chunk.length; + } + + console.log(`Response Size: ${responseSize} bytes`); + // expected output: "Response Size: 1071472" + return responseSize; +} +getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте пуллреквест. <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{Compat("javascript.statements.for_await_of")}}</span></div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/for...of")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/for...in/index.html b/files/ru/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..6cca45033b --- /dev/null +++ b/files/ru/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,197 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Выражение + - Цикл +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code><font face="Open Sans, Arial, sans-serif">Цикл </font>for...in</code></strong> проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">for (<var>variable</var> in <var>object</var>) {<em>...</em> +}</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Другое (очередное) имя свойства назначается переменной на каждой итерации.</dd> + <dt><code>object</code></dt> + <dd>Объект, по чьим свойствам мы проходим</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Цикл <code>for...in</code> проходит только по перечисляемым свойствам. Объекты, созданные встроенными конструкторами, такими как <code>Array</code> и <code>Object</code> имеют неперечисляемые свойства от <code>Object.prototype</code> и <code>String.prototype</code>, например, от {{jsxref("String")}}-это {{jsxref("String.indexOf", "indexOf()")}}, а от {{jsxref("Object")}} - метод {{jsxref("Object.toString", "toString()")}}. Цикл пройдёт по всем перечисляемым свойствам объекта, а также тем, что он унаследует от конструктора прототипа (свойства объекта в цепи прототипа).</p> + +<h3 id="Удаление_добавление_и_модификация_свойств">Удаление, добавление и модификация свойств</h3> + +<p>Цикл <code>for...in</code> проходит по свойствам в произвольном порядке (см. оператор {{jsxref("Operators/delete", "delete")}} для того, чтобы узнать почему порядок прохода может отличаться в зависимости от браузера). Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удаленное до того, как до него дошёл цикл, не будет участвовать в нём. Свойства добавленные в объекты в цикле могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, изменное после проведения изменений, а удалённое после удаления.</p> + +<h3 id="Проход_по_массиву_и_for...in"><code>Проход по массиву и for...in</code></h3> + +<div class="note"> +<p><strong>Замечание:</strong> <code>for...in</code> не следует использовать для {{jsxref("Array")}}, где важен порядок индексов.</p> +</div> + +<p>Индексы массива - это перечисляемые свойства с целочисленными именами, в остальном они аналогичны свойствам объектов. Нет гарантии, что <code>for...in</code> будет возвращать индексы в конкретном порядке. Цикл <code>for...in</code> возвращает все перечисляемые свойства, включая имеющие нецелочислиненные имена и наследуемые.</p> + +<p>Так как порядок прохода зависит от реализации, проход по массиву может не произойти в правильном порядке. Следовательно лучше с числовыми индексами использовать циклы {{jsxref("Statements/for", "for")}}, {{jsxref("Array.prototype.forEach()")}} или {{jsxref("Statements/for...of", "for...of")}}, когда проходим по массивам, где важен порядок доступа к свойствам.</p> + +<h3 id="Проход_только_через_собственные_свойства.">Проход только через собственные свойства.</h3> + +<p>Если вы хотите рассматривать только свойства самого объекта, а не его прототипов, используйте {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}}, {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} или {{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}}. Кроме того, если вы знаете, что не будет вмешательства в код извне, вы можете расширить встроенные прототипы методом проверки.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Следующее выражение берёт аргументом объект. Затем проходит по всем перечислимым свойствам объекта и возвращает строку содержащую имена свойств и их значения.</p> + +<pre class="brush: js">var obj = {a:1, b:2, c:3}; + +for (var prop in obj) { + console.log("obj." + prop + " = " + obj[prop]); +} + +// Выведет: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<p>Следующая функция иллюстрирует использование {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: наследуемые свойства не отображаются</p> + +<pre class="brush: js">var triangle = {a:1, b:2, c:3}; + +function ColoredTriangle() { + this.color = "red"; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (var prop in obj) { + if( obj.hasOwnProperty( prop ) ) { + console.log("obj." + prop + " = " + obj[prop]); + } +} + +// Выведет: +// "obj.color = red" +</pre> + +<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-in-and-for-of-statements', 'for...in statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in 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="Поддержка_инициализатор_переменных">Поддержка: инициализатор переменных</h2> + +<p>До SpiderMonkey 40 {{geckoRelease(40)}}, можно было инициализировать переменные (<code>i=0</code>) в цикле <code>for...in</code>:</p> + +<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3}; +for(var i=0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Это нестандартное поведение игнорируется в версии 40 и более поздних, оно бросит предупреждение {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") в консоль ({{bug(748550)}} и {{bug(1164741)}}).</p> + +<p>Другие движки, такие как v8 (Chrome), Chakra (IE/Edge) и JSC (WebKit/Safari) также собираются удалить это нестандартное поведение.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} - похожий цикл, проходящий по значениям свойств</li> + <li>{{jsxref("Statements/for_each...in", "for each in")}} - похожее выражение, но перебирает значения свойств, а не их имена (устарело)</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Генераторы</a> (использующие синтаксис <code>for...in</code>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перечислимость и владение свойствами</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/for...of/index.html b/files/ru/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..0074719d06 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,302 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript6 + - JavaScript + - Оператор + - Экспериментальный +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Summary" name="Summary">Сводка</h2> + +<p>Оператор <code>for...of</code> выполняет цикл обхода <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">итерируемых объектов</a> (включая {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, объект <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">аргументов</a> и подобных), вызывая на каждом шаге итерации операторы для каждого значения из различных свойств объекта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>iterable</em>) { + <em>statement</em> +} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>На каждом шаге итерации <code><em>variable</em></code> присваивается значение нового свойства объекта <em><code>iterable</code></em>. Переменная <em><code>variable</code></em> может быть также объявлена с помощью <code>const</code>, <code>let</code> или <code>var</code>.</dd> + <dt><code>iterable</code></dt> + <dd>Объект, перечисляемые свойства которого обходятся во время выполнения цикла.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Обход_jsxrefArray">Обход {{jsxref("Array")}}</h3> + +<pre class="notranslate"><code>let iterable = [10, 20, 30]; + +for (let value of iterable) { + value += 1; + console.log(value); +} +// 11 +// 21 +// 31</code></pre> + +<p>Можно также использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> вместо <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, если не нужно переназначать переменные внутри блока.</p> + +<pre class="notranslate"><code>let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30</code></pre> + +<h3 id="Обход_jsxrefString">Обход {{jsxref("String")}}</h3> + +<pre class="notranslate"><code>let iterable = 'boo'; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o"</code></pre> + +<h3 id="Обход_jsxrefTypedArray">Обход {{jsxref("TypedArray")}}</h3> + +<pre class="notranslate"><code>let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255</code></pre> + +<h3 id="Обход_jsxrefMap">Обход {{jsxref("Map")}}</h3> + +<pre class="notranslate"><code>let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// ['a', 1] +// ['b', 2] +// ['c', 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</code></pre> + +<h3 id="Обход_jsxrefSet">Обход {{jsxref("Set")}}</h3> + +<pre class="notranslate"><code>let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</code></pre> + +<h3 id="Обход_объекта_jsxrefarguments">Обход объекта {{jsxref("arguments")}} </h3> + +<pre class="notranslate"><code>(function() { + for (let argument of arguments) { + console.log(argument); + } +})(1, 2, 3); + +// 1 +// 2 +// 3</code></pre> + +<h3 id="Обход_DOM_коллекций">Обход DOM коллекций</h3> + +<p>Обход DOM коллекций наподобие {{domxref("NodeList")}}: следующий пример добавляет класс <code>read</code> параграфам, являющимся непосредственными потомками статей:</p> + +<pre class="notranslate"><code>// Примечание: работает только на платформах, где +// реализован NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll('article > p'); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add('read'); +}</code></pre> + +<h3 id="Закрытие_итераторов">Закрытие итераторов</h3> + +<p>В циклах <code>for...of</code> аварийный выход осуществляется через <code>break</code>, <code>throw</code> или <code>return</code>. Во всех вариантах итератор завершается.</p> + +<pre class="notranslate"><code>function* foo(){ + yield 1; + yield 2; + yield 3; +}; + +for (let o of foo()) { + console.log(o); + break; // итератор закрывается, возврат +}</code> +</pre> + +<h3 id="Обход_генераторов">Обход генераторов</h3> + +<p>Вы можете выполнять обход <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">генераторов</a>, вот пример:</p> + +<pre class="brush:js notranslate">function* fibonacci() { // функция-генератор + let [prev, curr] = [0, 1]; + for (;;) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + // ограничивает последовательность на 1000 + if (n > 1000) + break; + console.log(n); +} +</pre> + +<h4 id="Не_пытайтесь_повторно_использовать_генератор">Не пытайтесь повторно использовать генератор</h4> + +<p>Генераторы нельзя использовать дважды, даже если цикл <code>for...of </code> завершится аварийно, например, через оператор {{jsxref("Statements/break", "break")}} . При выходе из цикла генератор завершается, и любые попытки получить из него значение обречены.</p> + +<pre class="brush: js example-bad notranslate"><code>var gen = (function *(){ + yield 1; + yield 2; + yield 3; +})(); +for (let o of gen) { + console.log(o); + break; // Завешение обхода +} + +// Генератор нельзя повторно обойти, следующее не имеет смысла! +for (let o of gen) { + console.log(o); // Не будет вызван +}</code></pre> + +<h3 id="Обход_итерируемых_объектов">Обход итерируемых объектов</h3> + +<p>Кроме того, можно сделать обход объекта, явно реализующего <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p> + +<pre class="notranslate"><code>var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2</code></pre> + +<h3 id="Различия_между_for...of_и_for...in">Различия между <code>for...of</code> и <code>for...in</code></h3> + +<p>Оба оператора, и <code>for...in</code> и <code>for...of</code> производят обход объектов . Разница в том, как они это делают.</p> + +<p>Для {{jsxref("Statements/for...in", "for...in")}} обход <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" title="перечисляемые свойства">перечисляемых свойств</a> объекта осуществляется в произвольном порядке.</p> + +<p>Для <code>for...of</code> обход происходит в соответствии с тем, какой порядок определен в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">итерируемом объекте</a>.</p> + +<p>Следующий пример показывает различия в работе циклов <code>for...of</code> и <code>for...in</code> при обходе {{jsxref("Array")}}.</p> + +<pre class="notranslate"><code>Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +let iterable = [3, 5, 7]; +iterable.foo = 'hello'; + +for (let i in iterable) { + console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // выведет 0, 1, 2, "foo" + } +} + +for (let i of iterable) { + console.log(i); // выведет 3, 5, 7 +}</code></pre> + +<p>Разберемся шаг за шагом в вышеописанном коде.</p> + +<pre class="notranslate"><code>Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +let iterable = [3, 5, 7]; +iterable.foo = 'hello';</code></pre> + +<p>Каждый объект унаследует метод <code>objCustom</code> и каждый массив {{jsxref("Array")}} унаследует метод <code>arrCustom</code> благодаря созданию их в {{jsxref("Object.prototype")}} и {{jsxref("Array.prototype")}}. Объект <code>iterable</code> унаследует методы <code>objCustom</code> и <code>arrCustom</code> из-за <a href="/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">наследования через прототип</a>.</p> + +<pre class="notranslate"><code>for (let i in iterable) { + console.log(i); // выведет 0, 1, 2, "foo", "arrCustom", "objCustom" +}</code></pre> + +<p>Цикл выводит только <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перечисляемые свойства</a> объекта <code>iterable</code>, в порядке их создания. Он не выводит <strong>значения</strong> <code>3</code>, <code>5</code>, <code>7</code> и <code>hello</code> поскольку они <strong>не являются</strong> перечисляемыми, фактически они вообще не являются свойствами, они являютя <strong>значениями</strong>. Выводятся же <strong>имена свойств и методов</strong>, например <code>arrCustom</code> и <code>objCustom</code>. Если вы еще не совсем поняли, по каким свойствам осуществляется обход, вот дополнительное объяснение того, как работает {{jsxref("Statements/for...in", "array iteration and for...in", "#Array_iteration_and_for...in")}} .</p> + +<pre class="notranslate"><code>for (let i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // выведет 0, 1, 2, "foo" + } +}</code></pre> + +<p>Цикл аналогичен предыдущему, но использует {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для проверки того, собственное ли это свойство объекта или унаследованое. Выводятся только собственные свойства. Имена <code>0</code>, <code>1</code>, <code>2</code> и <code>foo</code> принадлежат только экземпляру объекта (<strong>не унаследованы</strong>). Методы <code>arrCustom</code> и <code>objCustom</code> не выводятся, поскольку они <strong>унаследованы</strong>.</p> + +<pre class="notranslate"><code>for (let i of iterable) { + console.log(i); // выведет 3, 5, 7 +}</code></pre> + +<p>Этот цикл обходит <code>iterable</code> и выводит те значения <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators$edit#%D0%98%D1%82%D0%B5%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D1%8B%D0%B5_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B">итерируемого объекта</a>,<strong> </strong>которые определены в способе его перебора, т.е. не свойства объекта, а значения массива <code>3</code>, <code>5</code>, <code>7</code> .</p> + +<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('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Изначальное опеределение.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.statements.for_of")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/for/index.html b/files/ru/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..40945dffda --- /dev/null +++ b/files/ru/web/javascript/reference/statements/for/index.html @@ -0,0 +1,194 @@ +--- +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 < 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 < 9; i++) { + console.log(i); + // ещё выражения +} +</pre> + +<p>Как и блок инициализации, блок условия не обязателен. Если пропустите это выражение, вы должны быть уверены, что прервете цикл где-то в теле, а не создадите бесконечный цикл.</p> + +<pre class="brush: js">for (var i = 0;; i++) { + console.log(i); + if (i > 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 > 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> diff --git a/files/ru/web/javascript/reference/statements/for_each...in/index.html b/files/ru/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..c609f436c0 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,126 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p>Конструкция <code>for each...in</code> заявлена как "deprecated", как часть стандарта ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>). Поддержка E4X была удалена. Вместо <code>for each...in</code> рассмотрите использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>. (Пожалуйста обратите внимание: {{ bug("791343")}}.)<br> + <br> + <strong>Firefox теперь предупреждает об использовании <code>for each...in</code> и <code>for each...in</code> удаляется из ночных сборок. Пожалуйста, посмотрите <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Warning: JavaScript 1.6's for-each-in loops are deprecated</a> для помощи в миграции.</strong></p> +</div> + +<p><strong>Выражение</strong> <code><strong>for each...in</strong></code> выполняет перебор свойств указанного объекта. Для каждого свойства выполняется указанный оператор.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">for each (<em>variable</em> in <em>object</em>) { + <em>statement</em> +}</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Variable to iterate over property values, optionally declared with the <code>var</code> keyword. This variable is local to the function, not to the loop.</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>Object for which the properties are iterated.</dd> +</dl> + +<dl> + <dt><code>statement</code></dt> + <dd>A statement to execute for each property. To execute multiple statements within the loop, use a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block">block</a> statement (<code>{ ... }</code>) to group those statements.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Some built-in properties are not iterated over. These include all built-in methods of objects, e.g. <code>String</code>'s <code>indexOf</code> method. However, all user-defined properties are iterated over.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_for_each...in">Using <code>for each...in</code></h3> + +<p><strong>Warning:</strong> Never use a loop like this on arrays. Only use it on objects. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> for more details.</p> + +<p>The following snippet iterates over an object's properties, calculating their sum:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of a current ECMA-262 specification. Implemented in JavaScript 1.6 and deprecated.</p> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox_specific_note">Firefox specific note</h2> + +<ul> + <li><code>for each...in</code> удалён только из Nightly Firefox 53</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> - аналогичный оператор по перебору <em>имён</em> свойств.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> - аналогичный оператор, перебирающий <em>значения</em> свойств, но может быть использован только для перебираемых (iteratable) типов, so not for generic objects</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></code></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/function/index.html b/files/ru/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..37ccac9a29 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/function/index.html @@ -0,0 +1,125 @@ +--- +title: function +slug: Web/JavaScript/Reference/Statements/function +tags: + - JavaScript + - Функция +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Объявление функции</strong> определяет функцию с указанными аргументами.</p> + +<p>Также вы можете определять функции через конструктор {{jsxref("Function")}} или {{jsxref("Operators/function", "функциональное выражение")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) { + [<em>statements</em>] +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Имя функции.</dd> + <dt><code>paramN</code></dt> + <dd>Имя аргумента, переданного в функцию. Максимальное количество аргументов, которое может принять функция, может варьироваться в зависимости от движков.</dd> + <dt><code>statements</code></dt> + <dd>Инструкции, которые составляют тело функции.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Функция, созданная через объявление функции, является объектом <code>Function</code> и обладает всеми свойствами, методами и поведением объектов такого типа. Смотрите {{jsxref("Function")}} для подробной информации о функциях.</p> + +<p>Также функцию можно создать с помощью выражения (см. {{jsxref("Operators/function", "функциональное выражение")}}).</p> + +<p>По умолчанию функции возвращают <code>undefined</code>. Чтобы вернуть другое значение, функция должна содержать инструкцию {{jsxref("Statements/return", "return")}}, которая указывает, какое значение возвращать.</p> + +<h3 id="Функции_создаваемые_по_условию">Функции, создаваемые по условию</h3> + +<p>Функции могут объявлены условно, иначе говоря, объявление функции может содержаться внутри условного оператора. Большинство браузеров, отличных от Mozilla, трактуют подобные условные объявления безотносительно условия, и создадут функцию, вне зависимости от истинностного значения условия; смотрите <a href="http://kangax.github.io/nfe/#function-statements">статью</a> об этом. Поэтому такое использование не рекомендуется, для условного создания функций используйте функциональные выражения.</p> + +<h3 id="Поднимание_объявленной_функции">Поднимание объявленной функции</h3> + +<p>Объявление функции в JavaScript поднимает определение функции. Вы можете использовать функцию до того, как вы её объявили:</p> + +<pre class="brush: js">hoisted(); // выводит "foo" + +function hoisted() { + console.log("foo"); +} +</pre> + +<p>Заметьте, что {{jsxref("Operators/function", "функциональные выражения")}} не поднимаются:</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted не является функцией + +var notHoisted = function() { + console.log("bar"); +}; +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_function">Использование <code>function</code></h3> + +<p>Следующий код объявляет функцию, возврающую итоговое количество продаж, сложенное из количества продаж продуктов <code>a</code>, <code>b</code> и <code>c</code>.</p> + +<pre class="brush: js">function calc_sales(units_a, units_b, units_c) { + return units_a*79 + units_b * 129 + units_c * 699; +} +</pre> + +<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('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение. Реализовано в JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("javascript.statements.function")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Функции и область видимости")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "Функциональное выражение")}}</li> + <li>{{jsxref("Statements/function*", "Оператор function*")}}</li> + <li>{{jsxref("Operators/function*", "Выражение function*")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Стрелочные функции")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/function_star_/index.html b/files/ru/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..69567963bb --- /dev/null +++ b/files/ru/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,202 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript6 + - JavaScript + - Итератор + - Функция + - Экспериментальный +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Summary" name="Summary">Сводка</h2> + +<p><code><strong>function*</strong></code> (ключевое слово <code>function</code> со звёздочкой) определяет <em>функцию-генератор</em>.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre>function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { <em>statements</em> } +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Имя функции.</dd> + <dt><code>param</code></dt> + <dd>Именованные аргументы функции (параметры). Функция-генератор может иметь 255 аргументов.</dd> + <dt><code>statements</code></dt> + <dd>Инструкции составляющие тело функции.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Генераторы являются функциями с возможностью выхода и последующего входа. Их контекст исполнения (значения переменных) сохраняется при последующих входах.</p> + +<p>Когда вызывается функция-генератор, её тело исполняется не сразу; вместо этого возвращается объект-<a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">итератор</a>. При вызове метода <code>next() </code>итератора тело функции-генератора исполняется до первого встреченного оператора <a href="/ru/docs/Web/JavaScript/Reference/Operators/yield"><code><strong>yield</strong></code></a>, который определяет возвращаемое значение или делегирует дальнейшее выполнение другому генератору при помощи <code><strong>yield*</strong> anotherGenerator()</code>. Метод <code>next()</code> возвращает объект со свойством <code>value</code>, содержащим отданное значение, и свойством <code>done</code>, которое указывает, что генератор уже отдал своё последнее значение. Вызов метода <code>next()</code> с аргументом прекращает выполнение функции-генератора, и заменяет инструкцию yield на которой было приостановлено выполнение на аргумент переданный в <code>next().</code></p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while (index < 3) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // undefined +// ...</pre> + +<h3 id="Пример_с_yield*">Пример с yield*</h3> + +<pre class="brush: js" dir="rtl">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i) { + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20</pre> + +<h3 id="Передача_аргументов_в_генератор">Передача аргументов в генератор</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span><span class="operator token">*</span> <span class="function token">logGenerator</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">yield</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">yield</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">yield</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> gen <span class="operator token">=</span> <span class="function token">logGenerator</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// первый вызов next выполняется от начала функции</span> +<span class="comment token">// и до первого оператора yield</span> +gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="string token">'pretzel'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// pretzel</span> +gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="string token">'california'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// california</span> +gen<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="string token">'mayonnaise'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// mayonnaise</span></code></pre> + +<h3 id="Инструкция_return_в_генераторе">Инструкция return в генераторе</h3> + +<pre class="brush: js">function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "unreachable"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true }</pre> + +<h3 id="Генераторы_не_могут_быть_инстанцированы_(not_constructable)">Генераторы не могут быть инстанцированы (not constructable)</h3> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="keyword token">function</span><span class="operator token">*</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span> +<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">f</span><span class="punctuation token">;</span> <span class="comment token">// throws "TypeError: f is not a constructor"</span></code></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td><a href="http://wiki.ecmascript.org/doku.php?id=harmony:generators">Предложение Harmony</a></td> + <td>Черновик</td> + <td>Начало работы над стандартом.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'Генераторы')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Изначальное определение в стандарте ECMA.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>39</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>yes (when?)</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Генераторы_и_итераторы_до_версии_Firefox_26">Генераторы и итераторы до версии Firefox 26</h3> + +<p>В старых версиях Firefox была реализована иная версия генераторов. В ней генераторы определялись обычным ключевым словом <code>function</code> (без звёздочки) и имели некоторые другие отличия.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">Протокол итераторов</a></li> + <li>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Operators/yield">yield</a></li> + <li>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">function</a></li> + <li>Другие ресурсы: + <ul> + <li>Компилятор <a href="http://facebook.github.io/regenerator/">Regenerator</a> из ES2015 в ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/if...else/index.html b/files/ru/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..1f9d474145 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,213 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - Выражение + - Условие +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Инструкция if</strong> выполняет инструкцию, если указанное условие выполняется (истинно). Если условие не выполняется (ложно), то может быть выполнена другая инструкция.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">if (<em>условие</em>) + <em>инструкция1</em> +[else + <em>инструкция2</em>] +</pre> + +<dl> + <dt><code>условие</code></dt> + <dd><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">Выражение</a>, которое является либо истинным, либо ложным.</dd> +</dl> + +<dl> + <dt><code>инструкция1</code></dt> + <dd>Инструкция, выполняемая в случае, если значение <code>"условиe"</code> истинно (<code>true</code>). Может быть любой инструкцией в том числе и вложенным <code>if</code>. Для группировки нескольких инструкций используется блок (<code>{...}</code>), Когда никакого действия не требуется, может использоваться <a href="/ru/docs/Web/JavaScript/Reference/Statements/Empty">пустая</a> инструкция.</dd> +</dl> + +<dl> + <dt><code>инструкция2</code></dt> + <dd>Инструкция, выполняемая в случае, если значение <code>"условиe"</code> ложно (<code>false</code>). Может быть любой инструкцией, в том числе и вложенным <code>if</code>. Инструкции тоже можно группировать в блок.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Несколько команд if ... else могут быть вложены для создания условия <code>else if</code>. Обратите внимание, что в JavaScript нет ключевого слова <code>elseif</code> (в одно слово).</p> + +<pre class="eval">if (<em>условие1</em>) + <em>инструкция1</em> +else if (<em>условие2</em>) + <em>инструкция2</em> +else if (<em>условие3</em>) + <em>инструкция3</em> +... +else + <em>инструкцияN</em> + +</pre> + +<p>Чтобы увидеть, как это работает, ниже представлен пример правильного вложения с отступами:</p> + +<pre class="eval">if (<em>условие1</em>) + <em>инструкция1</em> +else + if (<em>условие2</em>) + <em>инструкция2</em> + else + if (<em>условие3</em>) +... +</pre> + +<p>Чтобы выполнить несколько инструкций в условии, используйте блочный оператор ({...}) для группирования этих инструкций. В общем, хорошей практикой всегда является использование блочных операторов, особенно в коде, включающем вложенные операторы <code>if</code>:</p> + +<pre class="eval">if (<em>условие</em>) { + <em>инструкции1</em> +} else { + <em>инструкции2</em> +} +</pre> + +<p>Не путайте примитивные логические значения <code>true</code> и <code>false</code> с правдивостью или ложностью булева объекта. Любое значение, которое не <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> или пустая строка (""), и любой объект, включая объект Boolean, значение которого является ложным, считается правдивым при использовании в качестве условия. Например:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // это условие истинно +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_if...else">Использование <code>if...else</code></h3> + +<pre class="brush: js">if (cipher_char === from_char) { + result = result + to_char; + x++; +} else { + result = result + clear_char; +} +</pre> + +<h3 id="Использование_else_if">Использование <code>else if</code></h3> + +<p>Обратите внимание, что в JavaScript нет синтаксиса <code>elseif</code>. Однако вы можете записать его с пробелом между <code>else</code> и <code>if</code>:</p> + +<pre class="brush: js">if (x > 5) { + +} else if (x > 50) { + +} else { + +}</pre> + +<h3 id="Присваивание_в_условном_выражении">Присваивание в условном выражении</h3> + +<p>Целесообразно не использовать простые присваивания в условном выражении, потому что при взгляде на код присваивание можно путать с равенством. Например, не используйте следующий код:</p> + +<pre class="brush: js">if (x = y) { + /* сделать что-то */ +} +</pre> + +<p>Если вам нужно использовать присваивание в условном выражении, обычной практикой является размещение дополнительных скобок вокруг присваивания. Например:</p> + +<pre class="brush: js">if ((x = y)) { + /* сделать что-то */ +} +</pre> + +<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('ESDraft', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.5', 'if 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="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/import.meta/index.html b/files/ru/web/javascript/reference/statements/import.meta/index.html new file mode 100644 index 0000000000..ac60a71494 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/import.meta/index.html @@ -0,0 +1,68 @@ +--- +title: import.meta +slug: Web/JavaScript/Reference/Statements/import.meta +tags: + - Модули +translation_of: Web/JavaScript/Reference/Statements/import.meta +--- +<div>{{JSSidebar("Statements")}}</div> + +<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Объект </span></font><strong>import.meta</strong></code> это мета-свойство, указывающее мета-данные JavaScript модуля в зависимости от контекста. Он содержит информацию о модуле, например, URL модуля.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">import.meta</pre> + +<h2 id="Описание">Описание</h2> + +<p>Объект <code>import.meta</code> состоит из ключевого слова {{JSxRef("Statements/import","import")}}, точки и свойства с именем <code>meta</code>. Обычно выражение <code>import.</code> служит для доступа к свойству, но здесь <code>import.</code>, в действительности, не является объектом.</p> + +<p>Объект <code>import.meta</code> создан по реализации ECMAScript с прототипом объекта {{JSxRef("null")}}. Этот объект расширяем, и его свойства являются записываемыми, настраиваемыми и перечисляемыми.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Допустим, есть модуль <code>my-module.js</code></p> + +<pre class="brush: html"><script type="module" src="my-module.js"></script> +</pre> + +<p>вы можете получить доступ к мета-информации об этом модуле, используя объект <code>import.meta</code>.</p> + +<pre class="brush: js;">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre> + +<p>Это возвращает объект со свойством <code>url</code> показывающее базовый URL этого модуля. Это может быть либо URL с которого скрипт был получен (для внешних скриптов), либо базовый URL содержащего его документа (для внутренних скриптов).</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>Предложен <code><a href="https://github.com/tc39/proposal-import-meta/#importmeta">import.meta</a></code></td> + <td>Stage 3</td> + <td>Первичное определение</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Определяет свойства <code>import.meta</code> в HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + + + +<p>{{Compat("javascript.statements.import_meta")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{JSxRef("Statements/import", "import")}}</li> + <li>{{JSxRef("Statements/export", "export")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/import/index.html b/files/ru/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..bc4a369f52 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/import/index.html @@ -0,0 +1,271 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - import + - Инструкция + - Модули + - динамический импорт + - импорт +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Инструкция <strong>import</strong> используется для импорта ссылок на значения, экспортированные из внешнего модуля. Импортированные модули находятся в {{JSxRef ("Strict_mode", "строгом режиме")}} независимо от того, объявляете ли вы их как таковые или нет. Для работы инструкции во встроенных скриптах нужно прописать у тэга script <code>type="module"</code>.</p> + +<p>Существует также function-like динамический <code>import()</code>, который не требует скриптов с типом "<code>module</code>".</p> + +<p>Обратная совместимость может быть обеспечена с помощью атрибута <code>nomodule</code> тега <a href="/ru/docs/Web/HTML/Element/script">script</a>.</p> + +<p>Динамический импорт полезен в ситуациях, когда вы хотите загрузить модуль условно или по требованию. Статическая форма предпочтительна для загрузки начальных зависимостей и может быть более полезна для инструментов статического анализа и <a href="/en-US/docs/Glossary/Tree_shaking">tree shaking</a>.</p> + +<div class="note"> +<p><strong>Внимание:</strong> На данный момент эта функциональность <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">только начинает поддерживаться</a> браузерами. Полноценная реализация присутствует во многих транспайлерах, таких как TypeScript и <a href="http://babeljs.io/">Babel</a>, а также в сборщиках, например, в <a href="https://github.com/rollup/rollup">Rollup</a> и <a href="https://webpack.js.org/">Webpack</a>.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>export </em>} from "<em>module-name</em>"; +import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>export1 , export2</em> } from "<em>module-name</em>"; +import { <em>export1 , export2</em> as <em>alias2</em> , <em>[…]</em> } from "<em>module-name</em>"; +import <em>defaultExport</em>, { <em>export</em> [ , <em>[…]</em> ] } from "<em>module-name</em>"; +import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>"; +import "<em>module-name</em>"; +import("/module-name.js").then(module => {…}) // Динамический импорт +</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>Имя объекта, который будет ссылаться на значение экспорта по умолчанию (дефолтный экспорт) из модуля.</dd> + <dt><code>module-name</code></dt> + <dd>Имя модуля для импорта. Это зачастую относительный или абсолютный путь к <code>.js</code> файлу модуля без указания расширения <code>.js</code>. Некоторые сборщики могут разрешать или даже требовать использования расширения; проверяйте своё рабочее окружение. Допускаются только строки с одиночными или двойными кавычками.</dd> + <dt><code>name</code></dt> + <dd>Имя локального обьекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения.</dd> +</dl> + +<dl> + <dt><code>export, exportN</code></dt> + <dd>Имена значений, которые будут импортированы.</dd> +</dl> + +<dl> + <dt><code>alias, aliasN</code></dt> + <dd>Имена, которые будут ссылаться на импортируемые значения.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Параметр <code>name</code> это имя локального обьекта, который будет использован как своего рода пространство имен, ссылающееся на импортируемые значения. Параметры <code>export</code> определяют отдельные именованные значения, в то время как <code>import * as name</code> импортирует все значения. Примеры ниже объясняют синтаксис.</p> + +<h3 id="Импорт_всего_содержимого_модуля">Импорт всего содержимого модуля</h3> + +<p>Этот код вставляет объект <code>myModule</code> в текущую область видимости, содержащую все экспортированные значения из модуля, находящегося в файле <code>/modules/my-module.js</code>.</p> + +<pre class="brush: js">import * as <em>myModule</em> from '/modules/my-module.js';</pre> + +<p>В данном случае, доступ к импортируемым значениям можно осуществить с использованием имени модуля (в данном случае "myModule") в качестве пространства имен. Например, если импортируемый выше модуль включает в себя экспорт метода <code>doAllTheAmazingThings()</code>, вы можете вызвать его так:</p> + +<pre class="brush: js">myModule.doAllTheAmazingThings();</pre> + +<h3 id="Импорт_единичного_значения_из_модуля">Импорт единичного значения из модуля</h3> + +<p>Определенное ранее значение, названное <code>myExport,</code> которое было экспортировано из модуля <code>my-module</code> либо неявно (если модуль был экспортирован целиком), либо явно (с использованием инструкции {{jsxref("Statements/export", "export")}}), позволяет вставить <code>myExport</code> в текущую область видимости.</p> + +<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre> + +<h3 id="Импорт_нескольких_единичных_значений">Импорт нескольких единичных значений</h3> + +<p>Этот код вставляет оба значения <code>foo</code> и <code>bar</code> в текущую область видимости.</p> + +<pre class="brush: js">import {foo, bar} from '/modules/my-module.js';</pre> + +<h3 id="Импорт_значений_с_использованием_более_удобных_имен">Импорт значений с использованием более удобных имен</h3> + +<p>Вы можете переименовать значения, когда импортируете их. Например, этот код вставляет <code>shortName</code> в текующую область видимости.</p> + +<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName} + from '/modules/my-module.js';</pre> + +<h3 id="Переименование_нескольких_значений_в_одном_импорте">Переименование нескольких значений в одном импорте</h3> + +<p>Код, который импортирует несколько значений из модуля, используя более удобные имена.</p> + +<pre class="brush: js">import { + reallyReallyLongModuleExportName as shortName, + anotherLongModuleName as short +} from '/modules/my-module.js';</pre> + +<h3 id="Импорт_модуля_для_использования_его_побочного_эффекта">Импорт модуля для использования его побочного эффекта</h3> + +<p>Импорт всего модуля только для использования побочного эффекта от его вызова, не импортируя что-либо. Это запускает глобальный код модуля, но в действительности не импортирует никаких значений.</p> + +<pre class="brush: js">import '/modules/my-module.js'; +</pre> + +<h3 id="Импорт_значения_по_умолчанию">Импорт значения по умолчанию</h3> + +<p>Есть возможность задать дефолтный {{jsxref("Statements/export", "export")}} (будь то объект, функция, класс или др.). Инструкция <code>import</code> затем может быть использована для импорта таких значений.</p> + +<p>Простейшая версия прямого импорта значения по умолчанию:</p> + +<pre class="brush: js">import myDefault from '/modules/my-module.js'; +</pre> + +<p>Возможно также использование такого синтаксиса с другими вариантами из перечисленных выше (импорт пространства имен или именованный импорт). В таком случае, импорт значения по умолчанию должен быть определён первым. Для примера:</p> + +<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js'; +// myModule использовано как пространство имен</pre> + +<p>или</p> + +<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js'; +// именованный импорт конкретных значений</pre> + +<h3 id="Импорт_переменных">Импорт переменных</h3> + +<p>Если вы импортируете переменные, то в данной области видимости они ведут себя как константы.</p> + +<p>Такой код выведет ошибку:</p> + +<h5 id="my-module.js">my-module.js</h5> + +<pre class="brush: js">export let a = 2; +export let b = 3; +</pre> + +<h5 id="main.js">main.js</h5> + +<pre class="brush: js">import {a, b} from '/modules/my-module.js'; +a = 5; +b = 6; +// Uncaught TypeError: Assignment to constant variable.</pre> + +<p>Для импорта можно воспользоваться объектом в котором хранятся эти переменные.</p> + +<p>Такой код будет рабочим:</p> + +<h5 id="my-module.js_2">my-module.js</h5> + +<pre class="brush: js">export let obj = {a:2, b:4}; +</pre> + +<h5 id="main.js_2">main.js</h5> + +<pre class="brush: js">import {obj} from '/modules/my-module.js'; + +obj.a = 1; +obj.b = 4;</pre> + +<p>Учитывая, что <code>import</code> хранит именно ссылки на значения, экспортированные из внешнего модуля, то это можно использовать как замыкания.</p> + +<h3 id="Динамический_импорт">Динамический импорт</h3> + +<p>Ключевое слово <code>import</code> можно использовать как функцию для динамического импорта модулей. Вызов <code>import()</code> возвращает Promise.</p> + +<pre class="brush: js">import('/modules/my-module.js') + .then(module => { + // Делаем что-нибудь с модулем + }) +</pre> + +<p>Как следствие возврата Promise, с динамическим импортом можно использовать ключевое слово <code>await</code></p> + +<pre class="brush: js">let module = await import('/modules/my-module.js');</pre> + +<p>Обратите внимание, что несмотря на то, что динамический импорт выглядит как вызов функции, он им по сути не является, т.е. не наследует от <code>Function.prototype</code> и, как следствие, его невозможно использовать вместе с методами <code>.call</code>, <code>.apply</code> и <code>.bind </code></p> + +<h2 id="Примеры">Примеры</h2> + +<p>Импорт из вспомогательного модуля для помощи в обработке запроса AJAX JSON.</p> + +<h3 id="Модуль_file.js">Модуль: file.js</h3> + +<pre class="brush: js; highlight: [14]">function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open('GET', url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +} +</pre> + +<h3 id="Основной_код_main.js">Основной код: main.js</h3> + +<pre class="brush: js">import { getUsefulContents } from '/modules/file.js'; + +getUsefulContents('http://www.example.com', + data => { doSomethingUseful(data); });</pre> + +<h3 id="Динамический_импорт_2">Динамический импорт</h3> + +<p>Этот пример показывает, как можно загрузить на страницу дополнительный модуль в зависимости от действий пользователя (в данном случае, по клику на кнопку), а затем использовать функции из загруженного модуля. Промисы - это не единственный способ использовать динамический импорт. Функция <code>import()</code> также может использоваться совместно с <code>await</code>.</p> + +<pre class="brush: js">const main = document.querySelector("main"); +for (const link of document.querySelectorAll("nav > a")) { + link.addEventListener("click", e => { + e.preventDefault(); + + import('/modules/my-module.js') + .then(module => { + module.loadPageInto(main); + }) + .catch(err => { + main.textContent = err.message; + }); + }); +}</pre> + +<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('ES2015', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Начальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ES2020', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES2020')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a class="external" href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/index.html b/files/ru/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..11c44fdf08 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/index.html @@ -0,0 +1,162 @@ +--- +title: Инструкции и объявления +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Reference + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div> + {{jsSidebar("Statements")}}</div> +<p>Приложения на JavaScript состоят из инструкций с соответствующим синтаксисом. Одна инструкция может состоять из нескольких строк. На одной строке может находиться несколько инструкций, если они разделены точкой с запятой. Они являются не ключевыми словами, а группами ключевых слов.</p> +<h2 id="Statements_and_declarations_by_category" name="Statements_and_declarations_by_category">Инструкции и объявления по категориям</h2> +<p>Алфавитный список смотрите в боковой панели слева.</p> +<h3 id="Control_flow" name="Control_flow">Управление потоком выполнения</h3> +<dl> + <dt> + {{jsxref("Statements/block", "Блок", "", 1)}}</dt> + <dd> + Блок используется для группировки нуля и более инструкций. Блок отделяется парой фигурных скобок.</dd> + <dt> + {{jsxref("Statements/break", "break")}}</dt> + <dd> + Прерывает текущую инструкцию цикла, ветвления или инструкцию с меткой и передаёт управление на инструкцию, следующую за прерываемой.</dd> + <dt> + {{jsxref("Statements/continue", "continue")}}</dt> + <dd> + Прерывает выполнение инструкции в текущей итерации текущего цикла или цикла с меткой и продолжает выполнение цикла со следующей итерации.</dd> + <dt> + {{jsxref("Statements/Empty", "Пустая инструкция", "", 1)}}</dt> + <dd> + Пустая инструкция используется тогда, когда никакой инструкции быть не должно, а по синтаксису JavaScript она требуется.</dd> + <dt> + {{jsxref("Statements/if...else", "if...else")}}</dt> + <dd> + Выполняет инструкцию, если указанное условие является истинным. Если условие ложно, выполняет другую инструкцию.</dd> + <dt> + {{jsxref("Statements/switch", "switch")}}</dt> + <dd> + Вычисляет выражение, сопоставляет вычисленное значение с выражением выбора и выполняет инструкции, ассоциированные с этим выбором.</dd> + <dt> + {{jsxref("Statements/throw", "throw")}}</dt> + <dd> + Выбрасывает пользовательское исключение.</dd> + <dt> + {{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd> + Помечает блок инструкций и определяет реакцию на возникновение исключения внутри помеченного блока инструкций.</dd> +</dl> +<h3 id="Declarations" name="Declarations">Объявления</h3> +<dl> + <dt> + {{jsxref("Statements/var", "var")}}</dt> + <dd> + Объявляет переменную, необязательно инициализирует её значением.</dd> + <dt> + {{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd> + Объявляет локальную переменную в области видимости блока, необязательно инициализирует её значением.</dd> + <dt> + {{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd> + Объявляет именованную константу только для чтения.</dd> +</dl> +<h3 id="Functions" name="Functions">Функции</h3> +<dl> + <dt> + {{jsxref("Statements/function", "function")}}</dt> + <dd> + Объявляет функцию с указанными параметрами.</dd> + <dt> + {{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd> + Функции-генераторы, упрощающие написание <a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">итераторов</a>.</dd> + <dt> + {{jsxref("Statements/return", "return")}}</dt> + <dd> + Определяет значение, возвращаемое из функции.</dd> + <dt> + {{experimental_inline}} {{jsxref("Statements/yield", "yield")}}</dt> + <dd> + Смотрите статьи <a href="/ru/docs/Web/JavaScript/New_in_JavaScript/1.7">Что нового в JavaScript 1.7</a> и <a href="/ru/docs/JavaScript/Guide/Iterators_and_Generators">Итераторы и генераторы</a>.</dd> +</dl> +<h3 id="Iterations" name="Iterations">Итерации</h3> +<dl> + <dt> + {{jsxref("Statements/do...while", "do...while")}}</dt> + <dd> + Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно <code>false</code>. Условие вычисляется после выполнения инструкции, так что указанная инструкция выполнится хотя бы один раз.</dd> + <dt> + {{jsxref("Statements/for", "for")}}</dt> + <dd> + Создаёт цикл, состоящий из трёх необязательных выражений, заключённых в круглые скобки и разделённым точками с запятой с последующей инструкцией, выполняющейся в цикле.</dd> + <dt> + {{deprecated_inline}} {{non-standard_inline}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd> + Проходит указанной переменной по всем значениям свойств объекта. Выполняет инструкции для каждого уникального свойства.</dd> + <dt> + {{jsxref("Statements/for...in", "for...in")}}</dt> + <dd> + В случайном порядке проходит по перечислимым свойствам объекта. Выполняет инструкции для каждого уникального свойства.</dd> + <dt> + {{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd> + Проходит по итерируемым объектам (включающим в себя {{jsxref("Global_Objects/Array", "массивы", "", 1)}}, массивоподобные объекты и <a href="/ru/docs/JavaScript/Guide/Iterators_and_Generators">итераторы с генераторами</a>), выполняя пользовательский хук с инструкциями, исполняющимися для значения каждого уникального свойства.</dd> + <dt> + {{jsxref("Statements/while", "while")}}</dt> + <dd> + Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно <code>true</code>. Условие вычисляется перед выполнением инструкции..</dd> +</dl> +<h3 id="Others" name="Others">Прочее</h3> +<dl> + <dt> + {{jsxref("Statements/debugger", "debugger")}}</dt> + <dd> + Вызывает любую доступную функциональность отладки. Если функциональность отладки не доступна, эта инструкция ничего не делает.</dd> + <dt> + {{obsolete_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd> + Используется для экспорта подписанным скриптом свойств, функций и объектов в другие подписанные или неподписанные скрипты. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.</dd> + <dt> + {{obsolete_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd> + Используется для импорта скриптом свойств, функций и объектов из подписанного скрипта, который предоставил эту информацию. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.</dd> + <dt> + {{jsxref("Statements/label", "label")}}</dt> + <dd> + Предоставляет инструкцию с идентификатором, на который вы можете сослаться с помощью инструкций <code>break</code> или <code>continue</code>.</dd> + <dt> + {{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd> + Расширяет цепочку областей видимости инструкции.</dd> +</dl> +<h2 id="Specifications" name="Specifications">Спецификации</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>ECMAScript 1-е издание.</td> + <td>Стандарт</td> + <td>Изначальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Инструкции')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'Язык ECMAScript: инструкции и объявления')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Новое в этой спецификации: {{jsxref("Statements/function*", "function*")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/for...of", "for...of")}}, {{jsxref("Statements/yield", "yield")}}.</td> + </tr> + </tbody> +</table> +<h2 id="See_also" name="See_also">Смотрите также</h2> +<ul> + <li>{{jsxref("Operators", "Операторы", "", 1)}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/label/index.html b/files/ru/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..129afe8d3f --- /dev/null +++ b/files/ru/web/javascript/reference/statements/label/index.html @@ -0,0 +1,179 @@ +--- +title: label +slug: Web/JavaScript/Reference/Statements/label +tags: + - JavaScript + - Statement + - Метка +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Инструкция метки (<strong>label</strong>) используется вместе с {{jsxref("Statements/break", "break")}} или {{jsxref("Statements/continue", "continue")}} для альтернативного выхода из цикла. Оно добавляется перед блочным выражением в качестве ссылки, которая может быть использована в дальнейшем.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</p> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Помеченные циклы используются очень редко. Обычно вместо этого используют вызов функций.</p> +</div> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>label</em> : + <em>statement</em> +</pre> + +<dl> + <dt><code>label</code></dt> + <dd>Любой идентификатор JavaScript, который не является ключевым словом.</dd> + <dt><code>statement</code></dt> + <dd>Инструкция. <code>break</code> может быть использован с любой отмеченной инструкцией, а <code>continue</code> только с метками около начала цикла.</dd> +</dl> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Вы можете применять метки для обозначения циклов, чтобы затем при помощи <code>break</code> или <code>continue</code> выходить из цикла или продолжать его работу с новой итерации.</p> + +<p>В JavaScript <em>нет</em> оператора <code>goto</code>, вы можете использовать только метки с <code>break</code> или <code>continue</code>.</p> + +<p>В <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">строгом режиме</a> вы не можете использовать "<code>let</code>" как имя метки. Это генерирует ошибку {{jsxref("SyntaxError")}} (let is a reserved identifier).</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Использование_метки_с_continue_с_циклом_for">Использование метки с <code>continue</code> с циклом <code>for</code></h3> + +<pre class="brush: js">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //Первый цикл, обозначенный меткой "loop1" + loop2: + for (j = 0; j < 3; j++) { //Второй цикл, обозначенный меткой "loop2" + if (i == 1 && j == 1) { + continue loop1; + } + console.log("i = " + i + ", j = " + j); + } +} + +// Вывод: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// "i = 2, j = 0" +// "i = 2, j = 1" +// "i = 2, j = 2" +// Обратите внимание на пропуск "i = 1, j = 1" и "i = 1, j = 2" +</pre> + +<h3 id="Example_2" name="Example_2">Другой пример использования метки с <code>continue</code></h3> + +<p>На входе массив элементов и массив функций для проверки, в примере вычисляется количество элементов массива, которые проходят все тесты.</p> + +<pre class="brush: js"><code>var itemsPassed = 0; +var i, j; + +top: +for (i = 0; i < items.length; i++) { + for (j = 0; j < tests.length; j++) { + if (!tests[j].pass(items[i])) { + continue top; + } + } + + itemsPassed++; +}</code></pre> + +<h3 id="Использование_меток_с_break" style="line-height: 24px; font-size: 1.71428571428571rem;">Использование меток с <code>break</code></h3> + +<pre class="brush: js" style="font-size: 14px;">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //Первый цикл, обозначенный меткой "loop1" + loop2: + for (j = 0; j < 3; j++) { //Второй цикл, обозначенный меткой "loop2" + if (i == 1 && j == 1) { + break loop1; + } + console.log("i = " + i + ", j = " + j); + } +} + +// Вывод: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// Обратите внимание на аналогичный пример с continue</pre> + +<h3 id="Example_3" name="Example_3">Другой пример использования меток с <code>break</code></h3> + +<p>Дан массив элементов и массив с функциями для проверки, в примере определяется, проходят ли все элементы первого массива все тесты из второго массива.</p> + +<pre class="brush: js">var allPass = true; +var i, j; + +top: +for (i = 0; items.length; i++) + for (j = 0; j < tests.length; i++) + if (!tests[j].pass(items[i])){ + allPass = false; + break top; + }</pre> + +<h3 id="Помеченные_объявления_функция">Помеченные объявления функция</h3> + +<p>Начиная с ECMAScript 2015, помеченные объявления функция являются стандартными для нестрогого режима.</p> + +<pre class="brush: js">L: function F() {}</pre> + +<p>Однако, в <a href="/ru/docs/Web/JavaScript/Reference/Strict_mode">строгом режиме</a> генерируется ошибка {jsxref("SyntaxError")}}:</p> + +<p>In <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> code, however, this will throw a {{jsxref("SyntaxError")}}:</p> + +<pre class="brush: js"><code>'use strict'; +L: function F() {} +// SyntaxError: functions cannot be labelled</code></pre> + +<p><a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">Функции-генераторы</a> не могут быть помечены ни в том, ни в другом режиме:</p> + +<pre class="brush: js"><code>L: function* F() {} +// SyntaxError: generator functions cannot be labelled</code></pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>ECMAScript 3-е Издание.</td> + <td>Стандарт</td> + <td>Изначальное определение. Реализован в JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.statements.label")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/let/index.html b/files/ru/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..ac3e59d716 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/let/index.html @@ -0,0 +1,414 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>Директива <code><strong>let</strong></code> объявляет переменную с блочной областью видимости с возможностью инициализировать её значением.</div> + +<div></div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]; +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> + <dd>Имя переменной. Может использоваться любой допустимый идентификатор.</dd> + <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt> + <dd>Значение переменной. Любое допустимое выражение.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Директива <code><strong>let</strong></code><strong> </strong>позволяет объявить локальную переменную с областью видимости, ограниченной текущим блоком кода . В отличие от ключевого слова <a href="/en-US/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var"><code>var</code></a>, которое объявляет переменную глобально или локально во всей функции, независимо от области блока.</p> + +<p>Объяснение, почему было выбрано название "<strong>let</strong>" можно найти <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">здесь</a>.</p> + +<h3 id="Правила_области_видимости_2">Правила области видимости</h3> + +<p>Областью видимости переменных, объявленных ключевым словом <code>let</code>, является блок, в котором они объявлены, и все его подблоки. В этом работа директива <code>let</code> схожа с работой директивы <code>var</code>. Основная разница заключается в том, что областью видимости переменной, объявленной директивой <code>var</code>, является вся функция, в которой она объявлена:</p> + +<pre class="brush:js">function varTest() { + var x = 1; + if (true) { + var x = 2; // та же переменная! + console.log(x); // 2 + } + console.log(x); // 2 +} + +function letTest() { + let x = 1; + if (true) { + let x = 2; // другая переменная + console.log(x); // 2 + } + console.log(x); // 1 +} +</pre> + +<h3 id="sect1"></h3> + +<h3 id="Чище_код_во_вложенных_функциях">Чище код во вложенных функциях</h3> + +<p><code>let</code> иногда делает код чище при использовании вложенных функций.</p> + +<pre class="brush: js">var list = document.getElementById("list"); + +for (let i = 1; i <= 5; i++) { + let item = document.createElement('li'); + item.appendChild(document.createTextNode('Item ' + i)); + + item.onclick = function(ev) { + console.log('Item ' + i + ' is clicked.'); + }; + list.appendChild(item); +} + +// чтобы получить такой же эффект с использованием 'var' +// необходимо создать новый контекст +// используя замыкание, чтобы сохранить значение неизменённым +for (var i = 1; i <= 5; i++) { + var item = document.createElement("li"); + item.appendChild(document.createTextNode("Item " + i)); + + (function(i){ + item.onclick = function(ev) { + console.log('Item ' + i + ' is clicked.'); + }; + })(i); + list.appendChild(item); +}</pre> + +<p>Пример выше будет выполнен как и ожидается, так как пять экземпляров внутренней функции (анонимной) будут ссылаться на пять разных экземпляров переменной <code>i</code>. Пример будет выполнен неверно, если заменить директиву <code>let</code> на <code>var,</code> или удалить переменную <code>i</code> из параметров вложенной функции и использовать внешнюю переменную <code>i</code> во внутренней функции.</p> + +<p id="Правила_области_видимости">На верхнем уровне скриптов и функций <code>let, в отличии от var, не создает свойства на глобальном объекте</code>. Например:</p> + +<pre class="brush:js">var x = 'global_x'; +let y = 'global_y'; +console.log(this.x); // 'global_x' +console.log(this.y); // undefined +</pre> + +<p>В выводе программы будет отображено слово "global_x" для <code>this.x</code>, но <code>undefined</code> для <code>this.y</code>.</p> + +<h3 id="Эмуляция_приватных_членов">Эмуляция приватных членов</h3> + +<p>При взаимодействии с <a href="https://developer.mozilla.org/en-US/docs/Glossary/Constructor">конструкторами</a> можно использовать выражение <strong><code>let</code></strong> чтобы открыть доступ к одному или нескольким приватным членам через использование <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures">замыканий</a>:</p> + +<pre class="brush: js">var SomeConstructor; + +{ + let privateScope = {}; + + SomeConstructor = function SomeConstructor() { + this.someProperty = 'foo'; + privateScope.hiddenProperty = 'bar'; + } + + SomeConstructor.prototype.showPublic = function() { + console.log(this.someProperty); // foo + } + + SomeConstructor.prototype.showPrivate = function() { + console.log(privateScope.hiddenProperty); // bar + } + +} + +var myInstance = new SomeConstructor(); + +myInstance.showPublic(); +myInstance.showPrivate(); + +console.log(privateScope.hiddenProperty); // error</pre> + +<p>Эта техника позволяет получить только "статичное" приватное состояние - в примере выше, все экземпляры полученные из конструктора <code>SomeConstructor</code> будут ссылаться на одну и ту же область видимости <code>privateScope</code>.</p> + +<h3 id="Временные_мертвые_зоны_и_ошибки_при_использовании_let">Временные мертвые зоны и ошибки при использовании <code>let</code></h3> + +<p>Повторное объявление той же переменной в том же блоке или функции приведет к выбросу исключения <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>.</p> + +<pre class="brush: js">if (x) { + let foo; + let foo; // SyntaxError thrown. +}</pre> + +<p>В стандарте ECMAScript 2015 переменные, объявленные директивой let, переносятся в начало блока. Но если вы сошлетесь в блоке на переменную, до того как она объявлена директивой let, то это приведет к выбросу исключения <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a></code>, потому что переменная находится во "временной мертвой зоне" с начала блока и до места ее объявления. (В отличии от переменной, объявленной через <code>var</code>, которая просто будет содержать значение <code>undefined</code>)</p> + +<pre class="brush: js"><code>function do_something() { + console.log(bar); // undefined + console.log(foo); // ReferenceError: foo is not defined + var bar = 1; + let foo = 2; +}</code></pre> + +<p>Вы можете столкнуться с ошибкой в операторах блока <code><a href="/en-US/docs/JavaScript/Reference/Statements/switch" title="switch">switch</a></code>, так как он имеет только один подблок.</p> + +<pre class="brush: js">switch (x) { + case 0: + let foo; + break; + + case 1: + let foo; // Выброс SyntaxError из-за повторного объявления переменной + break; +}</pre> + +<h3 id="Использование_let_в_циклах_for"><code>Использование let в циклах</code> <code>for</code></h3> + +<p>Вы можете использовать ключевое слово <code>let</code> для привязки переменных к локальной области видимости цикла <code>for</code>. Разница с использованием <code>var</code> в заголовке цикла <code>for</code>, заключается в том, что переменные объявленные <code>var</code>, будут видны во всей функции, в которой находится этот цикл.</p> + +<pre class="brush:js">var i=0; +for ( let i=i ; i < 10 ; i++ ) { + console.log(i); +} +</pre> + +<h3 id="Правила_области_видимости_3">Правила области видимости</h3> + +<pre class="brush: js">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>statement</var> +</pre> + +<p>В этом примере <var>expr2</var>, <var>expr3, statement </var> заключены в неявный блок, который содержит блок локальных переменных, объявленых конструкцией <code>let <em>expr1</em></code>. Пример приведен выше.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="let_vs_var"><code>let</code> vs <code>var</code></h3> + +<p>Когда let используется внутри блока, то область видимости переменной ограничивается этим блоком. Напомним, что отличие заключается в том, что областью видимости переменных, объявленных диретивой var, является вся функция, в которой они были объявлены.</p> + +<pre class="brush: js">var a = 5; +var b = 10; + +if (a === 5) { + let a = 4; // The scope is inside the if-block + var b = 1; // The scope is inside the function + + console.log(a); // 4 + console.log(b); // 1 +} + +console.log(a); // 5 +console.log(b); // 1</pre> + +<h3 id="let_в_циклах"><code>let</code> в циклах</h3> + +<p>Вы можете использовать ключевое слово <code>let</code> для привязки переменных к локальной области видимости цикла <code>for</code>, вместо того что бы использовать глобальные переменные (объявленные с помощью <code>var</code>).</p> + +<pre class="brush: js">for (let i = 0; i<10; i++) { + console.log(i); // 0, 1, 2, 3, 4 ... 9 +} + +console.log(i); // i is not defined</pre> + +<h2 id="Нестандартизированные_расширения_let">Нестандартизированные расширения <code>let</code></h2> + +<h3 id="let_блок"><code>let</code> блок</h3> + +<div class="warning"> +<p><code>Поддержка let</code> блоков была убрана в Gecko 44 {{bug(1023609)}}.</p> +</div> + +<p><strong>let блок</strong> предоставляет способ, ассоциировать значения с перемеными внутри области видимости этого блока, без влияния на значения переменных с теми же именами вне этого блока.</p> + +<h4 id="Синтаксис_2">Синтаксис</h4> + +<pre class="brush: js">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) block; +</pre> + +<h4 id="Описание_2">Описание</h4> + +<p><strong><code>let</code> </strong>блок предоставляет локальную область видимости для переменных. Работа его заключается в привязке нуля или более переменных к области видимости этого блока кода, другими словами, он является блоком операторов. Отметим, что область видимости переменных, объявленных директивой <code>var</code>, в <strong>блоке <code>let</code></strong>, будет той же самой, что и если бы эти переменные были объявленны вне <strong>блока <code>let</code></strong>, иными словами областью видимости таких переменных по-прежнему является функция. Скобки в<strong> блоке </strong><code><strong>let</strong></code> являются обязательными. Опускание их приведет к синтаксической ошибке.</p> + +<h4 id="Пример">Пример</h4> + +<pre class="brush:js">var x = 5; +var y = 0; + +let (x = x+10, y = 12) { + console.log(x+y); // 27 +} + +console.log(x + y); // 5 +</pre> + +<p>Правила для этого блока кода аналогичны как и для любого другого блока кода в JavaScript. Он может содержать свои локальные переменные, объявленные <code>let</code>.</p> + +<h4 id="Правила_области_видимости_4">Правила области видимости</h4> + +<p>Областью видимости переменных, объявленных директивой <code>let</code>, в <strong>блоке </strong><code><strong>let</strong></code> является сам блок и все подблоки в нем, если они не содержат объявлений переменных с теми же именами. </p> + +<h3 id="let_выражения"><code>let</code> выражения</h3> + +<div class="warning"> +<p><code>Поддержка let выражений</code> была убрана в Gecko 41 {{bug(1023609)}}.</p> +</div> + +<p><strong><code>let выражение</code></strong> позволяет объявить переменные с областью видимости ограниченной одним выражением.</p> + +<h4 id="Синтаксис_3">Синтаксис</h4> + +<pre class="syntaxbox">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre> + +<h4 id="Пример_2">Пример</h4> + +<p>Вы можете использовать let для объявления переменных, областью видимости которых является только одно выражение:</p> + +<pre class="brush: js">var a = 5; +let(a = 6) console.log(a); // 6 +console.log(a); // 5</pre> + +<h4 id="Правила_области_видимости_5">Правила области видимости</h4> + +<p>В данном <strong><code>let</code> выражении</strong>:</p> + +<pre class="brush: js">let (<var>decls</var>) <var>expr</var> +</pre> + +<p><em><code>expr</code> </em>оборачивается в неявный блок.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Первоначальное определение. Не описывает let выражения или let блоки.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td> + <td>11</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Temporal dead zone</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("35") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>let</code> expression {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>let</code> block {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatUnknown}}</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Temporal dead zone</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("35") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>let</code> expression {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>let</code> block {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="sect2"></h3> + +<h3 id="Особенности_Firefox">Особенности Firefox</h3> + +<ul> + <li>До SpiderMonkey 46 {{geckoRelease(46)}} выбрасывал {{jsxref("TypeError")}} на повторное объявление, вместо {{jsxref("SyntaxError")}} ({{bug(1198833)}}).</li> + <li>До SpiderMonkey 44 {{geckoRelease(44)}}, <code>let</code> был доступен только для блоков кода обернутых в HTML <code><script type="application/javascript;version=1.7"></code>block (or higher version) и имел другую сематнику.</li> + <li>Поддержка в {{domxref("Worker")}} код спрятан за <code>dom.workers.latestJSVersion</code> флагом ({{bug(487070)}}). Без версии <code>let</code>, флаг будет удален в будущем ({{bug(1219523)}}).</li> + <li>Соблюдение стандарта ES2015 для <code>let</code> в SpIderMonkey отслеживатся в {{bug(950547)}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/return/index.html b/files/ru/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..107173c310 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/return/index.html @@ -0,0 +1,156 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong><code>return</code> </strong>завершает выполнение текущей функции и возвращает её значение.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> + +<p class="hidden">Исходный код данного интерактивного примера хранится в репозитории на GitHub. Если вы хотите поучаствовать в проекте интерактивных примеров, пожалуйства, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение ваших изменений.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">return [[выражение]]; </pre> + +<dl> + <dt><code><font face="Consolas, Liberation Mono, Courier, monospace">выражение</font></code></dt> + <dd>Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается <code>undefined</code>.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>При вызове оператора <code>return</code> в функции её выполнение прекращается. Указанное значение возвращается в место вызова функции. Например, приведенная ниже функция возвращает возведенное в квадрат значение своего аргумента, <code>x</code> (где <code>x</code> – это число):</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +var demo = square(3); +// значение demo будет равняться 9 +</pre> + +<p>Если возвращаемое значение не указано, вместо него возращается <code>undefined</code>.</p> + +<p>Следующие выражения всегда прерывают выполнение функции:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="Автоматическая_расстановка_точек_с_запятыми">Автоматическая расстановка точек с запятыми</h3> + +<p>На выражение <code>return</code> влияет <a href="/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматическая расстановка точек с запятыми (ASI)</a>. Разрыв строки не допускается между ключевым словом <code>return</code> и выражением.</p> + +<pre class="brush: js">return +a + b;</pre> + +<p class="brush: js">трансформируется ASI в:</p> + +<pre class="brush: js">return; +a + b;</pre> + +<p class="brush: js">В консоли появится предупреждение "unreachable code after return statement".</p> + +<div class="note">Начиная с Gecko 40 {{geckoRelease(40)}}, предупреждение в консоли появляется, если обнаружен недостижимый код после <code>return</code>.</div> + +<p>Для того, чтобы избежать данной проблемы (предотвратить ASI), можно использовать скобки:</p> + +<pre class="brush: js">return ( + a + b; +);</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Прерывание_функции">Прерывание функции</h3> + +<p><font face="Open Sans, Arial, sans-serif">Функция немедленно останавливается в точке, где вызывается </font><code>return</code>.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // бесконечный цикл + console.log(count + "A"); // до 5 + if (count === 5) { + return; + } + console.log(count + "B"); // до 4 + } + console.log(count + "C"); // никогда не появляется +} + +counter(); + +// Выводит: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="Возвращение_функции">Возвращение функции</h3> + +<p>Смотрите также статью о <a href="/ru/docs/Web/JavaScript/Closures">замыканиях</a>.</p> + +<pre class="brush: js">function magic(x) { + return function calc(x) { return x * 42 }; +} + +var answer = magic(); +answer(1337); // 56154 +</pre> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на данной странице сгенерирована из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, получите их из репозитория <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на включение ваших изменений.</div> + +<p>{{Compat("javascript.statements.return")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Functions" title="En/Core_JavaScript_1.5_Reference/Functions">Функции</a></li> + <li><a href="/ru/docs/Web/JavaScript/Closures">Замыкания</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/switch/index.html b/files/ru/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..5d0ead0986 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,184 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Сводка">Сводка</h2> + +<p><strong>Инструкция switch</strong> сравнивает выражение со случаями, перечисленными <font face="Courier New, Andale Mono, monospace">внутри неё</font>, а затем выполняет соответствующие инструкции.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">switch (expression) { + case value1: + //Здесь выполняются инструкции, если результат выражения равен value1 + [break;] + case value2: + //Инструкции, соответствующие value2 + [break;] + ... + case valueN: + //Инструкции, соответствующие значению valueN + //statementsN + [break;] + default: + //Здесь находятся инструкции, которые выполняются при отсутствии соответствующего значения + //statements_def + [break;] +}</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Выражение, значение которого сравнивается со всеми случаями.</dd> + <dt><code>case valueN</code></dt> + <dd>Случай, который проверяется на соответствие выражению (<code>expression</code>).</dd> + <dt><code>statementsN</code></dt> + <dd>Инструкции, которые выполняются, если <code>expression</code> соответствуют случаю.</dd> + <dt><code>statements_def</code></dt> + <dd>Инструкции, выполняемые если <code>expression</code> не соответствует ни одному случаю.</dd> +</dl> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Если выражение соответствует какому-то случаю, то выполняются инструкции этого случая. Если несколько случаев соответствуют значению, только первый случай будет использован.</p> + +<p>Сначала программа пытается найти подходящий случай, значение которого равно значению искомого выражения (используется <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">строгое сравнение</a>, <code>===)</code> и затем выполняет инструкции, соответствующие случаю. Если подходящего случая нет, ищется случай по умолчанию (<code>default</code>), который не является обязательным. Если случая по умолчанию нет, выполнение продолжается на инструкции, следующей сразу после <code>switch</code>. По соглашению, случай <code>default</code> описывается последним, но это не является строгим правилом.</p> + +<p>Опциональная инструкция <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> выполняет выход из блока <code>switch</code>. Она может располагаться в каждом из случаев, но не является обязательной. Если её нет, то выполняется следующая инструкция из блока <code>switch</code>.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Example_Using_switch" name="Example:_Using_switch">Пример: Использование <code>switch</code></h3> + +<p>В этом примере, если <code>expr</code> равно "Bananas", программа находит случай "Bananas" и выполняет соответствующие инструкции. При выполнении инструкции <code>break</code>, выполнение продолжится за пределами <code>switch</code>. Если бы <code>break</code> не было, то выполнились бы инструкции случая "Cherries".</p> + +<pre class="brush: js">switch (expr) { + case "Oranges": + console.log("Oranges are $0.59 a pound."); + break; + case "Apples": + console.log("Apples are $0.32 a pound."); + break; + case "Bananas": + console.log("Bananas are $0.48 a pound."); + break; + case "Cherries": + console.log("Cherries are $3.00 a pound."); + break; + case "Mangoes": + case "Papayas": + console.log("Mangoes and papayas are $2.79 a pound."); + break; + default: + console.log("Sorry, we are out of " + expr + "."); +} + +console.log("Is there anything else you'd like?"); +</pre> + +<h3 id="What_happens_if_I_forgot_a_break" name="What_happens_if_I_forgot_a_break">Пример: Что случится, если не использовать break?</h3> + +<p>Если вы не использовали инструкцию <code>break</code>, то будут выполнены инструкции следующего случая. И проверка на соответствие выражению не будет выполняться.</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('negative 1'); + break; + case 0: // foo равно 0, случай соответствует выражению и эти инструкции будут выполнены + console.log(0) + // ПРИМЕЧАНИЕ: здесь могла находиться забытая инструкция break + case 1: // В случае 'case 0:' не было break, инструкции данного случая также будут выполнены + console.log(1); + break; // В конце расположен break, поэтому выполнение не перейдёт к случаю 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Methods_for_Multi-criteria_Case" name="Methods_for_Multi-criteria_Case">Пример: Использование нескольких значений для одного случая</h3> + +<p>Если вы хотите использовать один набор инструкций для соответствия нескольким случаям, можно использовать два способа. Первый способ является рекомендуемым, а второй - скорее трюком. Оба способа вызовут предупреждение с текстом "yes", если значение <code>foo</code> равно 0, 1, 2 или 3.</p> + +<p>Исходники этих способов здесь:</p> + +<ol> + <li><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></li> + <li><a href="http://stackoverflow.com/questions/21808543/multple-cripteria-single-case-switch-statement">Multiple Criteria Single Case Switch Statement (Stack Overflow)</a></li> +</ol> + +<h4 id="Первый_способ">Первый способ</h4> + +<p>В первом способе используется то, что выполнение инструкции <code>switch</code> продолжится, если не использовать инструкцию <code>break</code>. Подробнее в примере "Что случится, если не использовать break?"</p> + +<pre class="brush: js">var foo = 1; +switch (foo) { + case 0: + case 1: + case 2: + case 3: + alert('yes'); + break; + default: + alert('not'); +}</pre> + +<h4 id="Второй_способ">Второй способ</h4> + +<p>Другой способ, менее стандартный; во второй строке, где вы ожидали увидеть <code>switch(foo)</code>, расположено постоянное значение <code>true</code>, и в случаях используются выражения вместо констант:</p> + +<pre class="brush: js">var foo = 1; +switch (true) { // Постоянное значение true вместо foo + case foo >= 0 && foo <= 3: + alert('yes'); + break; + default: + alert('not'); +}</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>ECMAScript 3-е Издание.</td> + <td>Стандарт</td> + <td>Изначальное определение.<br> + Реализован в JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.11', 'Инструкция switch')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'Инструкция switch')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("javascript.statements.switch")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else" lang="ru"><code>if...else</code></a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/throw/index.html b/files/ru/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..7417c2f055 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,240 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Основная_информация"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited hps">Основная информация</span></span></h2> + +<p><strong>Инструкция <code>throw</code></strong> позволяет генерировать исключения, определяемые пользователем. При этом выполнение текущей функции будет остановлено (инструкции после <code>throw</code> не будут выполнены), и управление будет передано в первый блок <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> в стеке вызовов. Если <code>catch</code> блоков среди вызванных функций нет, выполнение программы будет остановлено.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">throw <em>выражение</em>; </pre> + +<dl> + <dt><code>выражение</code></dt> + <dd>Определяемое пользователем исключение.</dd> +</dl> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Используйте инструкцию throw для генерирования исключения. Когда вы генерируете исключение (throw), <em>выражение</em> задает значение исключения. Каждое из следующих throw создает исключение:</p> + +<pre class="brush: js">throw "Error2"; // генерирует исключение, значением которого является строка +throw 42; // генерирует исключение, значением которого является число 42 +throw true; // генерирует исключение, значением которого является логическое значение true</pre> + +<p>Также стоит отметить, что на инструкцию <code>throw</code> влияет <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматическая вставка точки с запятой (ASI)</a>. Поэтому не допускаются разрывы строк между инструкцией <code>throw</code> и <code>выражением</code>.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<h3 id="Example:_Throw_an_object" name="Example:_Throw_an_object">Пример: Генерирование объекта в качестве исключения</h3> + +<p>Можно указать объект в качестве исключения. Затем можно получить ссылку на этот объект и доступ ко всем его свойствам в блоке catch. Следующий пример создает объект ошибки, который имеет тип UserException, и используется для генерации исключения.</p> + +<pre class="brush: js">function UserException(message) { + this.message = message; + this.name = "Исключение, определенное пользователем"; +} +function getMonthName(mo) { + mo = mo-1; // Нужно скорректировать номер месяца согласно индексам массива (1=Jan, 12=Dec) + var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", + "Aug", "Sep", "Oct", "Nov", "Dec"]; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException("Неверно указан номер месяца"); + } +} + +try { + // statements to try + var myMonth = 15; // 15 находится вне границ массива, что приведет к исключению + var monthName = getMonthName(myMonth); +} catch (e) { + monthName = "неизвестен"; + logMyErrors(e.message, e.name); // передаем исключение в обработчик ошибок +} +</pre> + +<h3 id="Example:_Another_example_of_throwing_an_object" name="Example:_Another_example_of_throwing_an_object">Пример: Другой пример генерации объекта в виде исключения</h3> + +<p>Следующий пример проверяет, является ли строка, переданная в функцию, почтовым индексом США. Если индекс имеет недопустимый формат, будет сгенерировано исключение посредством создания объекта, имеющего тип <code>ZipCodeFormatException</code>.</p> + +<pre class="brush: js">/* + * Создает объект ZipCode. + * + * Допустимые форматы почтового индекса: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * Если агрумент, переданный в констуктор ZipCode не совпадает + * ни с одним из этих форматов, будет брошено исключение. + */ + +function ZipCode(zip) { + zip = new String(zip); + var pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // значение почтового индекса должно быть первым совпадением в строке + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = "Почтовый индекс имеет недопустимый формат"; + this.toString = function() { + return this.value + this.message + }; +} + +/* + * Это может быть скрипт, который проверяет значение адреса + * для США. + */ + +var ZIPCODE_INVALID = -1; +var ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // вернет 95060 +b = verifyZipCode(9560); // вернет -1 +c = verifyZipCode("a"); // вернет -1 +d = verifyZipCode("95060"); // вернет 95060 +e = verifyZipCode("95060 1234"); // вернет 95060 1234 +</pre> + +<h3 id="Example:_Rethrow_an_exception" name="Example:_Rethrow_an_exception">Пример: Повторный выброс исключения</h3> + +<p>Можно использовать throw для повторного выброса исключения после того, как оно было поймано. В следующем примере ловится исключение с числовым значением и делается повторный выброс, если его значение больше 50. Повторно выброшенное исключение передается далее в вызывающую функцию или до верхнего уровня, который видит пользователь.</p> + +<pre class="brush: js">try { + throw n; // бросаем исключение с числовым значением +} catch (e) { + if (e <= 50) { + // инструкции для обработки исключений со значениями в диапазоне 1-50 + } else { + // необработанное исключение, делаем повторный выброс + throw e; + } +} +</pre> + +<h2 id="Спецификации"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited hps">Спецификации</span></span></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.<br> + Implemented in JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Поддерживаемые_браузеры"><span class="short_text" id="result_box" lang="ru"><span class="alt-edited hps">Поддерживаемые браузеры</span></span></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</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>Feature</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>Basic support</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"><span class="short_text" id="result_box" lang="ru"><span class="hps">Смотрите также</span></span></h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/try...catch/index.html b/files/ru/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..3609136b03 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,422 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +tags: + - JavaScript + - Исключение + - Ошибка +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Конструкция <code>try...catch</code> пытается выполнить инструкции в блоке <code>try</code>, и, в случае ошибки, выполняет блок <code>catch</code>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">try { + <em>try_statements</em> +} +[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // не стандартно + <em>catch_statements_1</em> +}] +... +[catch (<em>exception_var_2</em>) { + <em>catch_statements_2</em> +}] +[finally { + <em>finally_statements</em> +}] +</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>Инструкции для выполнения.</dd> +</dl> + +<dl> + <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt> + <dd> + <p>Инструкции, которые будут выполнены, если произойдёт ошибка в блоке <code><font face="Consolas, Liberation Mono, Courier, monospace">try</font></code>.</p> + </dd> +</dl> + +<dl> + <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> + <dd>Идентификатор для хранения объекта ошибки, который впоследствии используется в блоке <code>catch</code></dd> +</dl> + +<dl> + <dt><code>condition_1</code></dt> + <dd>Условное выражение.</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>Инструкции, которые выполняются после завершения блока <code>try</code>. Выполнение происходит в независимости от того, произошла ошибка или нет.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Конструкция <code>try</code> содержит блок <code>try</code>, в котором находится одна или несколько инструкций (Блок (<code>{}</code> ) обязательно должен присутствовать, даже если выполняется всего одна инуструкция), и хотя бы один блок <code>catch</code> или <code>finally</code>. Таким образом, есть три основные формы конструкции <code>try</code>:</p> + +<ol> + <li><code>try {...} catch {...}</code></li> + <li><code>try {...} finally {...}</code></li> + <li><code>try {...} catch {...} finally {...}</code></li> +</ol> + +<p>Блок <code>catch</code> содержит инструкции, которые будут выполнены, если в блоке <code>try</code> произошла ошибка. Если любая инструкция в блоке <code>try</code> выбрасывает исключение, то управление сразу же переходит в блок <code>catch</code>. Если в блок <code>try</code> не было выброшено исключение, то блок <code>catch</code> не выполняется.</p> + +<p>Блок <code>finally</code> выполнится после выполнения блоков <code>try</code> и <code>catch</code>, но перед инструкциями, следующими за конструкцией <code>try...catch</code>. Он выполняется всегда, в независимости от того, было исключение или нет.</p> + +<p>Вы можете использовать вложенные конструкции <code>try</code>. Если внутренняя конструкция <code>try</code> не имеет блока <code>catch</code> (такое может быть при её использовании в виде <code>try {...} finaly {...}</code>, потому что <code>try {...}</code> не может быть без блоков <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">catch</span></font> или <code>finally</code>), будет вызван <code>сatch</code> внешней конструкции <code>try</code>.</p> + +<p>Конструкция <code>try</code> также используется для обработки исключений JavaScript (то есть, выброшенных внутренними функциями языка или парсером). Загляните в <a href="/ru-RU/docs/Web/JavaScript/Guide">JavaScript руководство</a> для дополнительной информации о JavaScript исключениях.</p> + +<h3 id="Безусловный_блок_catch">Безусловный блок catch</h3> + +<p>При использовании блока <code>catch</code>, он вызывается для любого исключения в блоке <code>try</code>. Например, когда в следующем коде происходит ошибка, управление переходит к блоку <code>catch</code>.</p> + +<pre class="brush: js">try { + throw 'myException'; // создание исключения +} +catch (e) { + // инструкции для обработки ошибок + logMyErrors(e); // передать объект исключения обработчику ошибок +} +</pre> + +<p>Блок <code>catch</code> задает идентификатор (<code>e</code> в примере выше) который содержит объект исключения (в примере выше — значение, переданное оператору <code>throw</code>). Область видимости этого объекта ограничивается блоком <code>catch</code>.</p> + +<h3 id="Условный_блок_catch">Условный блок <code>catch</code></h3> + +<p>"Условные блоки <code>catch</code>" можно создавать, используя <code>try...catch</code> с <code>if...else if...else</code>, как здесь:</p> + +<pre class="brush: js">try { + myroutine(); // может выбрасывать три вида исключений +} catch (e) { + if (e instanceof TypeError) { + // обработка исключения TypeError + } else if (e instanceof RangeError) { + // обработка исключения RangeError + } else if (e instanceof EvalError) { + // обработка исключения EvalError + } else { + // обработка остальных исключений + logMyErrors(e); // передать обработчику ошибок + } +}</pre> + +<p>Частый сценарий использованя — обработать известные исключения, а при неизвестных ошибках, пробросить их дальше:</p> + +<pre class="brush: js">try { + myRoutine(); +} catch(e) { + if (e instanceof RangeError) { + // обработка известного исключения, с которым + // понятно, что делать + } else { + throw e; // пробросить неизвестные ошибки + } +} +</pre> + +<div class="blockIndicator note"> +<p><strong>Обратите внимание</strong>: Firefox раньше поддерживал краткую запись условных блоков <code>catch</code>:</p> + +<pre>try { + myroutine(); // может выбрасывать три вида исключения +} catch (e if e instanceof TypeError) { + // обработка исключений TypeError +} catch (e if e instanceof RangeError) { + // обработка исключений RangeError +} catch (e if e instanceof EvalError) { + // обработка исключений EvalError +} catch (e) { + // обработка остальных исключения + logMyErrors(e); +} +</pre> + +<p>Однако, такой синтаксис никогда не был частью спецификации ECMAScript и был удалён из Firefox после версии 59. Сейчас он не поддерживается ни в одном браузере.</p> +</div> + +<h3 id="Идентификатор_исключения">Идентификатор исключения</h3> + +<p>Когда в блоке <code>try</code> выбрасывается исключение, <code>exception_var</code> (т. е. <code>e</code> в конструкции <code>catch (e)</code>) содержит значение исключения. Его можно использовать, чтобы получить больше информации об выброшенном исключении. Идентификатор доступен только в <a href="https://wiki.developer.mozilla.org/docs/Glossary/Scope">области видимости</a> блока <code>catch</code>.</p> + +<pre class="brush: js">try { + if (!firstValidation()) { + throw 1; + } + if (!secondValidation()) { + throw 2; + } +} catch (e) { + // Выводит 1 или 2 (если не произошло никакх других ошибок) + console.log(e); +}</pre> + +<h3 id="Блок_finally">Блок finally</h3> + +<p>Блок <code>finally</code> содержит код который будет запущен после кода в блоках <code>try</code> и <code>catch</code>. Обратите внимание, что код в блоке <code>finally</code> запускается в независимости от того, было ли выброшено исключение или нет. Также код в блоке <code>finally</code> будет запущен вне зависимости от того, присутствует блок <code>catch</code> или нет. Блок <code>finally</code> можно использовать для того, чтобы скрипт безопасно завершил работу в случае ошибки. Например, если необходимо освободить память и ресурсы которые использовал скрипт.</p> + +<p>Наличие специального блока, связанного с ошибкой, который выполняется вне зависимости от наличия исключительной ситуации, может показаться странным, но эта конструкция на самом деле весьма полезна. Рассмотрим пример кода:</p> + +<pre class="brush: js">function expensiveCalculations() { + // Сложные вычисления +} + +function maybeThrowError() { + // Функция, которая может выбросить исключение + if(Math.random() > 0.5) throw new Error() +} + +try { + // Теперь при прокрутке страницы будут происходить + // сложные вычисления, что сильно скажется на + // производительности + window.addEventListener('scroll', expensiveCalculations) + maybeThrowError() +} catch { + // Если функция maybeThrowError выбросит исключения, + // управление сразу перейдёт в блок catch и + // сложные вычисления продолжат выполняться до + // перезагрузки страницы + maybeThrowError() +} +window.removeEventListener('scroll', expensiveCalculations)</pre> + +<p>В этом примере, если функция <code>maybeThrowError</code> выбросит исключение внутри блока <code>try</code>, управление перейдёт в блок <code>catch</code>. Если и в блоке <code>catch</code> эта функция тоже выбросит исключение, то выполнение кода прервётся, и обработчик события не будет снят, пока пользователь не перезагрузит страницу, что плохо скажется на скорости работы. Для того, чтобы избежать таких ситуаций, следует использовать блок <code>finally</code>:</p> + +<pre class="brush: js">try { + window.addEventListener('scroll', expensiveCalculations) + maybeThrowError() +} catch { + maybeThrowError() +} finally { + window.removeEventListener('scroll', expensiveCalculations) +} + +</pre> + +<p>Другой пример: работа с файлами. В следующем фрагменте кода показывается, как скрипт открывает файл и записывает в него какие-то данные (в серверном окружении JavaScript имеет доступ к файловой системе). Во время записи может произойти ошибка. Но после открытия файл очень важно закрыть, потому что незакрытый файл может привести к утечкам памяти. В таких случях используется блок <code>finally</code>:</p> + +<pre class="brush: js">openMyFile(); +try { + // Сделать что-то с файлом + writeMyFile(theData); +} +finally { + closeMyFile(); // Закрыть файл, что бы ни произошло +} +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Вложенные_блоки_try">Вложенные блоки try</h3> + +<p>Для начала давайте посмотрим что делает этот код:</p> + +<pre class="brush: js">try { + try { + throw new Error('упс'); + } + finally { + console.log('finally'); + } +} +catch (e) { + console.error('внешний блок catch', e.message); +} + +// Вывод: +// "finally" +// "внешний блок catch" "упс" +</pre> + +<p>Теперь отловим исключение во внутреннем блоке <code>try</code>, добавив к нему блок <code>catch</code>:</p> + +<pre class="brush: js">try { + try { + throw new Error('упс'); + } + catch (e) { + console.error('внутренний блок catch', e.message); + } + finally { + console.log('finally'); + } +} +catch (e) { + console.error('внешний блок catch', e.message); +} + +// Output: +// "внутренний блок catch" "упс" +// "finally" +</pre> + +<p>Наконец, пробросим ошибку</p> + +<pre class="brush: js">try { + try { + throw new Error('упс'); + } + catch (e) { + console.error('внутренний блок catch', e.message); + throw e; + } + finally { + console.log('finally'); + } +} +catch (e) { + console.error('внешний блок catch', e.message); +} + +// Вывод: +// "внутренний блок catch" "oops" +// "finally" +// "внешний блок catch" "oops" +</pre> + +<p>Любое исключение будет передано только в ближайший блок <code>catch</code>, если он не пробросит его дальше. Все исключения, выброшенными внутренними блоками (потому что код в блоке <code>catch</code> также может выбросить исключение), будут пойманы внешними.</p> + +<h3 id="Возвращение_значения_из_блока_finally">Возвращение значения из блока finally</h3> + +<p>Если блок <code>finally</code> возвращает какое-либо значение, оно становится значением, которое возвращает вся конструкция <code>try...catch...finally</code>, вне зависимости от любых инструкций <code>return</code> в блоках <code>try</code> и <code>catch</code>. Также игнорируются исключения, выброшенные блоком <code>catch</code>.</p> + +<pre class="brush: js">try { + try { + throw new Error('упс'); + } + catch (e) { + console.error('внутренний блок catch', e.message); + throw e; + } + finally { + console.log('finally'); + return; + } +} +catch (e) { + console.error('внешний блок catch', e.message); +} + +// Output: +// "внутренний блок catch" "упс" +// "finally" +</pre> + +<p>"упс" не доходит до внешнего блока из-за инструкции <code>return</code> в блоке <code>finally</code>. То же самое произойдёт с любым значением, возвращаемым из блока <code>catch</code>.</p> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Изначальная редакция. Реализовано в JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Not part of the current ECMA-262 standard: Multiple catch clauses and conditional clauses (SpiderMonkey extension, JavaScript 1.5).</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("6")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Conditional clauses<br> + (non-standard)</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Conditional clauses<br> + (non-standard)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/var/index.html b/files/ru/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..fa1df166fc --- /dev/null +++ b/files/ru/web/javascript/reference/statements/var/index.html @@ -0,0 +1,221 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong>var </strong>объявляет переменную, инициализируя ее, при необходимости.</p> + +<p>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>Имя переменной. Может использоваться любой допустимый идентификатор.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd>Значение переменной. Любое допустимое выражение. По-умолчанию значение <em>undefined.</em></dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Объявление переменной всегда обрабатывается до выполнения кода, где бы она ни находилась. Область видимости переменной, объявленной через <code>var</code>, это её текущий <em>контекст выполнения</em>.<em> </em>Который может ограничиваться функцией или быть глобальным, для переменных, объявленных за пределами функции.</p> + +<p>Присвоение значения необъявленной переменной подразумевает, что она будет создана как глобальная переменная (переменная становится свойством глобального объекта) после выполнения присваивания значения. Различия между объявленной и необъявленной переменными следующие:</p> + +<p>1. Объявленные переменные ограничены контекстом выполнения, в котором они были объявлены. Необъявленные переменные всегда глобальны.</p> + +<pre class="brush: js">function x() { + y = 1; // возбудит ReferenceError в "строгом режиме" + var z = 2; +} + +x(); + +console.log(y); // выведет "1" +console.log(z); // возбудит ReferenceError: z не определён вне x +</pre> + +<p>2. Объявленные переменные инициализируются до выполнения любого кода. Необъявленные переменные не существуют до тех пор, пока к ним не выполнено присваивание.</p> + +<pre class="brush: js">console.log(a); // Возбудит ReferenceError. +console.log('still going...'); // Не выполнится.</pre> + +<pre class="brush: js">var a; +console.log(a); // Выведет "undefined" или "", в зависимости от браузера. +console.log('still going...'); // Выведет "still going...".</pre> + +<p>3. Объявленные переменные, независимо от контекста выполнения, являются ненастраиваемыми свойствами. Необъявленные переменные это настраиваемые свойства (т.е. их можно удалять).</p> + +<pre class="brush: js">var a = 1; +b = 2; + +delete this.a; // Возбудит TypeError в "строгом режиме". В "нестрогом режиме" будет ошибка без уведомления. +delete this.b; + +console.log(a, b); // Возбудит ReferenceError. +// Свойство 'b' было удалено и больше не существует.</pre> + +<p>Из-за перечисленных различий, использование необъявленных переменных может привести к непредсказуемым последствиям. <strong>Рекомендовано всегда объявлять переменные, вне зависимости, находятся они внутри функции или в глобальном контексте.</strong> Присваивание значения необъявленной переменной в <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">строгом режиме</a> ECMAScript 5 возбуждает ошибку.</p> + +<h3 id="Поднятие_переменных">Поднятие переменных</h3> + +<p>Объявление переменных (как и любые другие объявления) обрабатываются до выполнения кода. Где бы не находилось объявление, это равнозначно тому, что переменную объявили в самом начале кода. Это значит, что переменная становится доступной до того, как она объявлена. Такое поведение называется "поднятием" (в некоторых источниках "всплытием").</p> + +<pre class="brush: js">bla = 2 +var bla; +// ... + +// читается как: + +var bla; +bla = 2; +</pre> + +<p>Поэтому объявление переменных рекомендовано выносить в начало их области видимости (в начало глобального кода или в начало функции). Это даёт понять какие переменные принадлежат функции (т.е. являются локальными), а какие обрабатываются в цепи областей видимости (т.е. являются глобальными).</p> + +<p>Важно отметить, что подъем будет влиять на объявление переменной, но не на инициализацию ее значения. Значение присваивается при выполнении оператора присваивания:</p> + +<pre class="brush: js">function do_something() { + console.log(bar); // выведет undefined + var bar = 111; + console.log(bar); // выведет 111 +} + +// ...неявно понимается как: + +function do_something() { + var bar; + console.log(bar); // выведет undefined + bar = 111; + console.log(bar); // выведет 111 +}</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Объявление_и_инициализация_двух_переменных">Объявление и инициализация двух переменных</h3> + +<pre class="brush: js">var a = 0, b = 0; +</pre> + +<h3 id="Присвоение_двум_переменным_одного_строкового_значения">Присвоение двум переменным одного строкового значения</h3> + +<pre class="brush: js">var a = "A"; +var b = a; + +// Равнозначно: + +var a, b = a = "A"; +</pre> + +<p>Следите за порядком присвоения значений переменным</p> + +<pre class="brush: js">var x = y, y = 'A'; +console.log(x + y); // undefinedA +</pre> + +<p>В примере, <code>x</code> и <code>y</code> объявлены до выполнение кода, присвоение выполняется позже. Когда происходит присваивание "<code>x = y</code>", <code>y</code> уже существует со значением '<code>undefined</code>', так что ошибка <code>ReferenceError</code> не генерируется. И переменной <code>x</code> присваивается неопределённое значение. Потом переменной <code>y</code> присваивается значение 'A'. Получается, что после выполнения первой строки кода <code>x === undefined && y === 'A'</code>, отсюда и результат.</p> + +<h3 id="Инициализация_нескольких_переменных">Инициализация нескольких переменных</h3> + +<pre class="brush: js">var x = 0; + +function f(){ + var x = y = 1; // x - объявляется локально. y - глобально! +} +f(); + +console.log(x, y); // 0, 1 +// значение x взято из глобальной переменной, как и ожидалось +// значение переменной y доступно глобально</pre> + +<p>Такой же пример, но в строгом режими:</p> + +<pre class="brush: js">'use strict'; + +var x = 0; +function f() { + var x = y = 1; // Throws a ReferenceError in strict mode. +} +f(); + +console.log(x, y);</pre> + +<h3 id="Неявные_глобальные_переменные_и_внешняя_область_видимости">Неявные глобальные переменные и внешняя область видимости</h3> + +<p>Переменные могут ссылаться на переменные внешней области видимости функции, и это может выглядеть неявно:</p> + +<pre class="brush: js">var x = 0; // x объявлена глобально, затем присваивается значение 0 + +console.log(typeof z); // undefined, пока еще z не существет + +function a() { // когда функция a вызванна, + var y = 2; // y объявляется локально в функции a, затем присваивается 2 + + console.log(x, y); // 0 2 + + function b() { // когда функция b вызванна + x = 3; // присваивается 3 существующей глобальной x + y = 4; // присваивается 4 существующей внешней y + z = 5; // создается новая глобальная переменная z и присваивается значение 5. + } // (Порождает ReferenceError в strict mode(<em>строгом</em> режиме).) + + b(); // вызов b создает z как глобальную переменную + console.log(x, y, z); // 3 4 5 +} + +a(); // вызов a также вызывает b +console.log(x, z); // 3 5 +console.log(typeof y); // undefined, так как y это локальная переменная для функции a</pre> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Начальное определение. Имплементировано в JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<div id="compat-mobile">{{Compat("javascript.statements.var")}}</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/let", "let")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> + <li><a class="external" href="http://blog.safeshepherd.com/23/how-one-missing-var-ruined-our-launch/">How One Missing `var` Ruined our Launch</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/while/index.html b/files/ru/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..1baf54a1f4 --- /dev/null +++ b/files/ru/web/javascript/reference/statements/while/index.html @@ -0,0 +1,143 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - JavaScript + - Оператор + - Цикл +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оператор while</strong> создает цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется перед исполнением тела цикла.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">while (<em>условие</em>) { + <em>инструкция</em> +}</pre> + +<dl> + <dt><code>условие</code></dt> + <dd>Выражение, логическое значение которого проверяется каждый раз перед заходом в цикл. Если значение истинно, то исполняется <code>инструкция</code>. Когда значение становится ложным, выполняется код, следующий за циклом <code>while</code>.</dd> + <dt><code>инструкция</code></dt> + <dd>Инструкция, которая исполняется каждый раз, пока истинно условие. Чтобы выполнить несколько инструкций в цикле, используйте <a href="/ru/docs/Web/JavaScript/Reference/Statements/block">блочный</a> оператор (<code>{ ... }</code>) для их группировки.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<p>Следующий цикл <code>while</code> исполняется, пока <code>n</code> не превышает трёх.</p> + +<pre class="brush:js">var n = 0; +var x = 0; + +while (n < 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</code> < 3 больше не является истинным, поэтому цикл завершается.</p> + +<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('ESDraft', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.1', 'while 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="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/with/index.html b/files/ru/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..7eb5d5d66a --- /dev/null +++ b/files/ru/web/javascript/reference/statements/with/index.html @@ -0,0 +1,177 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +translation_of: Web/JavaScript/Reference/Statements/with +--- +<div class="warning">Использование оператора <code>with не рекомендуемо, т.к. он может быть источником запутанных багов и проблем совместимости</code>. Детальная информация в параграфе "Ambiguity Contra" раздела "Description".</div> + +<div>{{jsSidebar("Statements")}}</div> + +<p>Инструкция <strong>with</strong> расширяет цепочку областей видимости для инструкции.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">with (expression) + s<em>tatement</em> +</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Добавляет данный exrpession в цепочку областей видимости используемое когда исследуется statement. Рекомендуется использовать круглые скобки вокруг выражения.</dd> + <dt><code>statement</code></dt> + <dd>Любое выражение. Чтобы использовать несколько выражений, используйте оператор <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> statement ({ ... }), чтобы сгруппировать их.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>JavaScript ищет unqualified имя, исследуя цепочку областей видимости, связанную с выполнением скрипта или функции, сожержащих это unqualified имя. Оператор 'with' добавляет данный объект в начало цепочки областей видимости в ходе исследования тела его оператора. Если unqualified имя используемое в теле соответствует свойству в цепочке областей видимости, тогда имя привязывается к свойству и объекту, содержащему это свойство. В противном случае возвращаетя {{jsxref("ReferenceError")}}.</p> + +<div class="note">Использование оператора <code>with не рекомендуется</code>, и недопустимо в строгом режиме (<a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>) ECMAScript 5 . Рекомендуемой альтернативой может стать связывание объекта, чьи свойства Вы хотели получить, с коротким именем переменной.</div> + +<h3 id="Performance_pro_contra">Performance pro & contra</h3> + +<p><strong>Pro:</strong> Оператор <strong>with</strong> может помочь уменьшить размер файла, уменьшив необходимость повторять длинную ссылку на объект без снижения производительности. Изменение цепочки контекста, необходимое для 'with', не требует больших вычислительных затрат. Использование 'with' избавит интерпретатор от разбора повторных ссылок на объекты. Однако, обратите внимание, что во многих случаях это преимущество может быть достигнуто с помощью временной переменной для хранения ссылки на нужный объект.</p> + +<p><strong>Contra:</strong> Оператор <strong>with</strong> заставляет указанный объект быть найденным сначала среди всех имен поиска. Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «<strong>with</strong>. Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.</p> + +<h3 id="Ambiguity_contra">Ambiguity contra</h3> + +<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p> + +<pre class="brush: js">function f(x, o) { + with (o) { + console.log(x); + } +}</pre> + +<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p> + +<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something other than a plain object. Consider this example:</p> + +<div> +<pre class="brush:js">function f(foo, values) { + with (foo) { + console.log(values); + } +} +</pre> + +<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p> +</div> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_with">Использование <code>with</code></h3> + +<p>Последующее использование <strong><code>with</code></strong> указывает что Объект <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> является объектом по умолчанию. Следующие инструкции за <strong><code>with</code></strong> ссылаются на свойства <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI">PI</a><font face="Open Sans, arial, sans-serif"> и методы </font></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> и <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a>, без указания объекта. JavaScript предполагает Объект <code>Math</code> для этих справок.</p> + +<pre class="brush:js">var a, x, y; +var r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +}</pre> + +<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('ESDraft', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Now forbidden in strict mode.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.10', 'with 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>Feature</th> + <th>Chrome</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li>{{jsxref("Symbol.unscopables")}}</li> + <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/statements/блок/index.html b/files/ru/web/javascript/reference/statements/блок/index.html new file mode 100644 index 0000000000..4122fea24d --- /dev/null +++ b/files/ru/web/javascript/reference/statements/блок/index.html @@ -0,0 +1,177 @@ +--- +title: Блок +slug: Web/JavaScript/Reference/Statements/Блок +tags: + - JavaScript + - Инструкция + - Оператор + - справочник +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Блок инструкций </strong>(или <strong>сложная инструкция</strong> в других языках) используется для группировки нуля или более инструкций. Блок отделяется парой фигурных скобок и может опционально быть {{jsxref("Statements/label", "поименован")}}:</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[имя:] { + <em>инструкция_1</em>; + <em>инструкция_2;</em> + ... + <em>инструкция_n;</em> +} +</pre> + +<dl> + <dt><code>инструкция_1</code>, <code>инструкция_2</code>, <code>инструкция_n</code></dt> + <dd>Инструкции, сгруппированные внутри блока инструкций.</dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">имя</font></dt> + <dd>Необязательное {{jsxref("Statements/label", "имя")}} для визуальной идентификации или использования как точки выхода для оператора {{jsxref("Statements/break", "break")}}.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Эта инструкция широко используется с операторами управления потоком (н., {{jsxref("Statements/if...else", "if...else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}). Например:</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p>Обратите внимание, что блок инструкций не заканчивается точкой с запятой.</p> + +<p>Блок инструкций часто называется <strong>сложной (составной) инструкцией</strong> в других языках. Он позволяет вам использовать несколько операторов там, где JavaScript ожидает один оператор. Помещение инструкций в блок - это распространенная практика в JavaScript. Противоположное поведение - использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">пустого оператора</a> там, где никаких действий не нужно, а оператор требуется.</p> + +<h3 id="Правила_области_видимости_блока">Правила области видимости блока</h3> + +<h4 id="С_использованием_var">С использованием <code>var</code></h4> + +<p>Переменные, объявленные через <code>var</code>, <strong>не</strong> <strong>имеют</strong> блочной области видимости. Переменные, введенные внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельностоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельностоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // выводит 2 +</pre> + +<p>Тут выводится 2, потому что оператор <code>var x</code> внутри блока - в той же области видимости, что и оператор <code>var x</code> перед блоком. В C или Java подобный код вывел бы 1.</p> + +<h4 id="С_let_и_const">С <code>let</code> и <code>const</code></h4> + +<p>Наоборот, идентификаторы, объявленные с помощью {{jsxref("Statements/let", "let")}} и {{jsxref("Statements/const", "const")}} <strong>имеют </strong>блочную область видимости:</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; +} +console.log(x); // выводит 1</pre> + +<p><code>x = 2</code> ограничено рамками области видимости блока, в котором оно было определено.</p> + +<p>То же самое и для <code>const</code>:</p> + +<pre class="brush: js">const c = 1; +{ + const c = 2; +} +console.log(c); // выводит 1 и не выбрасывает SyntaxError...</pre> + +<p>Обратите внимание, что объявленная внутри блока <code>const c = 2</code> <em>не</em> кидает <code>SyntaxError: Identifier 'c' has already been declared</code> (<code>идентификатор 'c' уже был объявлен</code>) потому что она может быть объявлена единожды внутри блока.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Первоначальная редакция. Реализовано в JavaScript 1.0.</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="См._так_же">См. так же</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> |