diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/javascript/reference/operators | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/javascript/reference/operators')
41 files changed, 8365 insertions, 0 deletions
diff --git a/files/ru/web/javascript/reference/operators/addition/index.html b/files/ru/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..94efb4b63e --- /dev/null +++ b/files/ru/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,80 @@ +--- +title: Сложение (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор сложения (+) создает сумму числовых операндов или конкатенацию строк.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> + +<div></div> + +<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> <var>x</var> + <var>y</var> +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Сложение_чисел">Сложение чисел</h3> + +<pre class="brush: js notranslate">// Number + Number -> addition +1 + 2 // 3 + +// Boolean + Number -> addition +true + 1 // 2 + +// Boolean + Boolean -> addition +false + false // 0 +</pre> + +<h3 id="Сложение_строк">Сложение строк</h3> + +<pre class="brush: js notranslate">// String + String -> concatenation +'foo' + 'bar' // "foobar" + +// Number + String -> concatenation +5 + 'foo' // "5foo" + +// String + Boolean -> concatenation +'foo' + false // "foofalse"</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div> + +<p>{{Compat("javascript.operators.addition")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/addition_assignment/index.html b/files/ru/web/javascript/reference/operators/addition_assignment/index.html new file mode 100644 index 0000000000..dfabe25e2e --- /dev/null +++ b/files/ru/web/javascript/reference/operators/addition_assignment/index.html @@ -0,0 +1,75 @@ +--- +title: Сложение с присваиванием (+=) +slug: Web/JavaScript/Reference/Operators/Addition_assignment +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор сложения с присваиванием (<code>+=</code>) добавляет значение правого операнда к переменной и присваивает переменной результат. Типы двух операндов определяют поведение оператора сложения с присваиванием. Добавление или конкатенация возможны.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div> + +<div></div> + +<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x += y +<strong>Значение:</strong> x = x + y</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_сложения_с_присваиванием">Использование сложения с присваиванием</h3> + +<pre class="brush: js notranslate">// Assuming the following variables +// foo = 'foo' +// bar = 5 +// baz = true + +// Number + Number -> addition +bar += 2 // 7 + +// Boolean + Number -> addition +baz += 1 // 2 + +// Boolean + Boolean -> addition +baz += false // 1 + +// Number + String -> concatenation +bar += 'foo' // "5foo" + +// String + Boolean -> concatenation +foo += false // "foofalse" + +// String + String -> concatenation +foo += 'bar' // "foobar"</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div> + +<p>{{Compat("javascript.operators.addition_assignment")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Оператор сложения</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..16c83fcba5 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,290 @@ +--- +title: Арифметические операции +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Операторы +translation_of: Web/JavaScript/Reference/Operators +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<p><strong>Арифметические операции</strong> принимают в качестве операндов числовые значения (это может быть и литерал и переменная) и возвращают результат в виде одного числового значения. Стандартными арифметическими операциями являются сложение (<code>+</code>), вычитание (<code>-</code>), умножение (<code>*</code>) и деление (<code>/</code>).</p> + +<h2 id="Сложение"><a name="Addition">Сложение (+)</a></h2> + +<p>Оператор сложения возвращает сумму числовых операндов или объединяет строки.</p> + +<h3 id="Syntax" name="Syntax">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x + y +</pre> + +<h3 id="Examples" name="Examples">Примеры</h3> + +<pre class="brush: js">// Number + Number -> сложение +1 + 2 // 3 + +// Boolean + Number -> сложение +true + 1 // 2 + +// Boolean + Boolean -> сложение +false + false // 0 + +// Number + String -> конкатенация +5 + "foo" // "5foo" + +// String + Boolean -> конкатенация +"foo" + false // "foofalse" + +// String + String -> конкатенация +"foo" + "bar" // "foobar" +</pre> + +<h2 id="Вычитание_-"><a name="Subtraction">Вычитание (-)</a></h2> + +<p>Оператор вычитания вычитает один операнд из другого и возвращает разницу.</p> + +<h3 id="Syntax_2" name="Syntax_2">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x - y +</pre> + +<h3 id="Examples_2" name="Examples_2">Примеры</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="Деление"><a name="Division">Деление (/)</a></h2> + +<p>Оператор деления производит деление его операндов, где левый операнд - делимый, а правый - делитель.</p> + +<h3 id="Syntax_3" name="Syntax_3">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x / y +</pre> + +<h3 id="Examples_3" name="Examples_3">Примеры</h3> + +<pre class="brush: js">1 / 2 // возвращает 0.5 в JavaScript +1 / 2 // возвращает 0 в Java +// (так числа не с плавающими точками) + +1.0 / 2.0 // возвращает 0.5 и в JavaScript и в Java + +2.0 / 0 // возвращает Infinity в JavaScript +2.0 / 0.0 // тоже возвращает Infinity +2.0 / -0.0 // возвращает -Infinity в JavaScript</pre> + +<h2 id="Умножение_*"><a name="Multiplication">Умножение (*)</a></h2> + +<p>Оператор умножения возвращает произведение операндов.</p> + +<h3 id="Syntax_4" name="Syntax_4">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x * y +</pre> + +<h3 id="Examples_4" name="Examples_4">Примеры</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="Остаток_от_деления"><a name="Remainder">Остаток от деления (%)</a></h2> + +<p>Оператор возвращает целый остаток от деления левого операнда на правый. Возвращаемое значение всегда получает знак делимого, а не делителя. Он использует встроенную функцию <code>modulo</code>, для получения результата, которая является целочисленным остатком деления <code>var1</code> на <code>var2</code> — например— <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Есть предложение добавить оператор modulo в будущие версии ECMAScript</a>, с той разницей, что оператор будет брать знак делителя, а не делимого.</p> + +<h3 id="Syntax_5" name="Syntax_5">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> var1 % var2 +</pre> + +<h3 id="Examples_5" name="Examples_5">Примеры</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="number token">12</span> <span class="operator token">%</span> <span class="number token">5</span> <span class="comment token">// 2</span> +<span class="operator token">-</span><span class="number token">1</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// -1</span> +<span class="number token">NaN</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// NaN</span> +<span class="number token">1</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// 1</span> +<span class="number token">2</span> <span class="operator token">%</span> <span class="number token">3</span> <span class="comment token">// 2</span> +<span class="operator token">-</span><span class="number token">4</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// -0</span> +<span class="number token">5.5</span> <span class="operator token">%</span> <span class="number token">2</span> <span class="comment token">// 1.5</span></code></pre> + +<h2 id="Возведение_в_степень_**"><a name="Exponentiation">Возведение в степень (**)</a></h2> + +<p>Оператор возведения в степень возвращает результат первого операнда в степень. это, <code>var1</code><sup><code>var2</code></sup>, в предыдущем выражении, где <code>var1</code> и <code>var2</code> - переменные. Он право ассоциативен. <code>a ** b ** c</code> равно <code>a ** (b ** c)</code>.</p> + +<h3 id="Синтаксис">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> var1 ** var2</pre> + +<h3 id="Замечания">Замечания</h3> + +<p>Во многих языках, таких как PHP и Python и других, есть оператор возведения возведения в степень (обычно ^ или **), оператор определён имеющим приоритет выше, чем у унарных операторов, таких как унарный + и унарный -, но есть несколько исключений. Например, в Bash оператор ** создан имеющим приоритет ниже, чем у унарных операторов. В JavaScript невозможно написать двухсмысленное выражение, т.е. вы не можете ставить унарный оператор (<code>+/-/~/!/delete/void/typeof</code>) непосредственно перед базовым числом.</p> + +<pre class="brush: js">-2 ** 2; +// 4 в Bash, -4 в других языках. +// Это некорректно в JavaScript, т.е. операция двухсмыслена. + + +-(2 ** 2); +// -4 в JavaScript, намерения автора однозначны.</pre> + +<h3 id="Примеры">Примеры</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64</pre> + +<p>Изменим знак результата возведения в степень:</p> + +<pre class="brush: js">-(2 ** 2) // -4</pre> + +<p>Насильная установка основания как отрицательного числа:</p> + +<pre class="brush: js">(-2) ** 2 // 4</pre> + +<h2 id="Инкремент"><a name="Increment">Инкремент (++)</a></h2> + +<p>Оператор инкремента увеличивает на единицу(инкрементирует) операнд и возвращает значение.</p> + +<ul> + <li>Если операция используется как постфикс, с оператором после операнда (например, x++), значение операнда возвращается, а затем увеличивается на единицу.</li> + <li>Если используется префиксная форма с оператором перед операндом (например, ++x), значение операнда возвращается увеличенным на единицу.</li> +</ul> + +<h3 id="Syntax_6" name="Syntax_6">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x++ или ++x +</pre> + +<h3 id="Examples_6" name="Examples_6">Примеры</h3> + +<pre class="brush: js">// Постфиксный +var x = 3; +y = x++; // y = 3, x = 4 + +// Префиксный +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="sect1"></h2> + +<h2 id="Декремент_--"><a name="Decrement">Декремент (--)</a></h2> + +<p>Операция декремента уменьшает на 1 (отнимает единицу) свой операнд и возвращает значение.</p> + +<ul> + <li>Если операция используется как постфикс (например, x--), значение операнда возвращается, а затем уменьшается на единицу.</li> + <li>Если используется префиксная форма (например, --x), значение операнда возвращается уменьшенным на единицу.</li> +</ul> + +<h3 id="Syntax_7" name="Syntax_7">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> x-- или --x +</pre> + +<h3 id="Examples_7" name="Examples_7">Примеры</h3> + +<pre class="brush: js">// Постфиксный +var x = 3; +y = x--; // y = 3, x = 2 + +// Префиксный +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Унарный_минус_-"><a name="Unary_negation">Унарный минус (-)</a></h2> + +<p>Унарный минус ставится перед своим операндом и возвращает его математическое отрицание.</p> + +<h3 id="Syntax_8" name="Syntax_8">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> -x +</pre> + +<h3 id="Examples_8" name="Examples_8">Примеры</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 +</pre> + +<h2 id="Унарный_плюс"><a name="Unary_plus">Унарный плюс</a> (+)</h2> + +<p>Оператор унарный плюс предшедствует своему операнду и оценивает его, пытается преобразовать его в число, если он им не является. Хотя, унарное отрицание (-) также конвертирует не числа, унарный плюс - быстрейший и предпочитаемый способ конвертирования чего-либо в число потому, что он не выполняет каких-либо операций с числом. Он может конвертировать строковые представления целых и чисел с плавающей точкой, а также нестроковые значения <code>true</code>, <code>false</code> и <code>null</code>. Поддерживаются числа в десятичном и шестнадцатиричном (с префиксом "0x") формате. Отрицательные числа тоже поддерживаются (но не 16-ричные). Если он не может вычислить конкретное значение, выполнится как <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> + +<h3 id="Syntax_9" name="Syntax_9">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Оператор:</strong> +x +</pre> + +<h3 id="Examples_9" name="Examples_9">Примеры</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 +</pre> + +<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>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Определено в нескольких секциях специфии: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Определено в нескольких секциях специфии: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Additive operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Multiplicative operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Postfix expressions</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Unary operators</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Добавлен <a href="https://github.com/rwaldron/exponentiation-operator">Оператор возведения в степень</a>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Операторы присваивания</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/array_comprehensions/index.html b/files/ru/web/javascript/reference/operators/array_comprehensions/index.html new file mode 100644 index 0000000000..c2bed1585e --- /dev/null +++ b/files/ru/web/javascript/reference/operators/array_comprehensions/index.html @@ -0,0 +1,241 @@ +--- +title: Упрощенный синтаксис создания массивов +slug: Web/JavaScript/Reference/Operators/Array_comprehensions +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +<div class="warning"><strong>Non-standard. Do not use!</strong><br> +Сокращенный синтаксис создания массивов не стандартен. В будущем используйте {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "Стрелочные функции", "", 1)}} и {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<p>Синтаксис <strong>array comprehension</strong> - это JavaScript-выражение, которое позволяет быстро создавать новый массив из существующего. Аналогичные сокращения существуют во многих других языках программирования.</p> + +<p><a href="##Differences_to_the_older_JS1.7.2FJS1.8_comprehensions">Ниже</a> показаны различия со старым синтаксисом Array Comprehension в SpiderMonkey, основанном на черновиках для ECMAScript 4.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[for (x of итерируемый_объект) x] +[for (x of итерируемый_объект) if (условие) x] +[for (x of итерируемый_объект) for (y of итерируемый_объект) x + y] +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Внутри сокращения допустимо использование двух видов компонентов:</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} и</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>Итерация for-of всегда является первым компонентом. Допустимо использование нескольких for-of итераций или условных операторов if.</p> + +<p>Сокращённый синтаксис создания массивов был предложен к стандартизации в ECMAScript 2016, он предоставлял удобный сокращения для создания новых массивов из других массивов. Сокращения могут быть использованы вместо вызовов {{jsxref("Array.prototype.map", "map()")}} и {{jsxref("Array.prototype.filter", "filter()")}} или их комбинаций.</p> + +<p>Следующий пример показывает, как из массива чисел создаётся новый массив чисел с с удвоенным значением.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> doubled <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="keyword token">of</span> numbers<span class="punctuation token">)</span> i <span class="operator token">*</span> <span class="number token">2</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>doubled<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 2,4,6,8</span></code></pre> + +<p>Это эквивалентно следующей операции с {{jsxref("Array.prototype.map", "map()")}}:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> doubled <span class="operator token">=</span> numbers<span class="punctuation token">.</span><span class="function token">map</span><span class="punctuation token">(</span>i <span class="operator token">=</span><span class="operator token">></span> i <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Сокращённый синтаксис может быть использован также для выбора элементов по определённому условию. Вывод четных чисел:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">22</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> evens <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="keyword token">of</span> numbers<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span> i<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>evens<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 2,22,30</span></code></pre> + +<p>{{jsxref("Array.prototype.filter", "filter()")}} может использоваться для той же цели:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> evens <span class="operator token">=</span> numbers<span class="punctuation token">.</span><span class="function token">filter</span><span class="punctuation token">(</span>i <span class="operator token">=</span><span class="operator token">></span> i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Стили операторов {{jsxref("Array.prototype.map", "map()")}} и {{jsxref("Array.prototype.filter", "filter()")}} можно одновременно использовать в одном сокращённом выражении. Далее фильтруются только четные числа, а затем создаётся массив с их удвоенным значением:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">22</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> doubledEvens <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="keyword token">of</span> numbers<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">===</span> <span class="number token">0</span><span class="punctuation token">)</span> i <span class="operator token">*</span> <span class="number token">2</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>doubledEvens<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// logs 4,44,60</span></code></pre> + +<p>Квадратные скобки обозначают неявный блок. Новый переменные (такие как "<strong>i"</strong> в примере выше) трактуются, как если бы они объявлялись с использованием {{jsxref("Statements/let","let")}}. Это значит, что эти переменные недоступны извне.</p> + +<p>Входными данными необязательно может быть массив; также можно использовать <a href="/ru/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">итераторы и генераторы</a>.</p> + +<p>Даже строки могут подаваться на вход; можно делать то же, что с <code>filter</code> и <code>map</code> (но с массивоподобными объектами):</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">'abcdef'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> consonantsOnlyStr <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>c <span class="keyword token">of</span> str<span class="punctuation token">)</span> <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[aeiouAEIOU]/</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">)</span> c<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 'bcdf'</span> +<span class="keyword token">var</span> interpolatedZeros <span class="operator token">=</span> <span class="punctuation token">[</span><span class="keyword token">for</span> <span class="punctuation token">(</span>c <span class="keyword token">of</span> str<span class="punctuation token">)</span> c <span class="operator token">+</span> <span class="string token">'0'</span> <span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 'a0b0c0d0e0f0'</span></code></pre> + +<p>Для предупреждения конвертации в число (в данном конкретном примере) использвалась функция {{jsxref("Array.prototype.join", "join()")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простые_сокращения">Простые сокращения</h3> + +<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ]; +// [ 1, 4, 9 ] + +var abc = [ "A", "B", "C" ]; +[for (letters of abc) letters.toLowerCase()]; +// [ "a", "b", "c" ]</pre> + +<h3 id="Сокращения_с_условным_оператором_if">Сокращения с условным оператором "if"</h3> + +<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ]; +[for (year of years) if (year > 2000) year]; +// [ 2006, 2010, 2014 ] +[for (year of years) if (year > 2000) if(year < 2010) year]; +// [ 2006], the same as below: +[for (year of years) if (year > 2000 && year < 2010) year]; +// [ 2006] +</pre> + +<h3 id="Сокращения_в_сравнении_с_map_и_filter">Сокращения в сравнении с <code>map</code> и <code>filter</code></h3> + +<p>Простой способ понять синтаксис Array Comprehension - это сравнить его с методами Array {{jsxref("Array.map", "map")}} и {{jsxref("Array.filter", "filter")}}:</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; + +numbers.map(function (i) { return i * i }); +numbers.map(i => i*i); +[for (i of numbers) i*i ]; +// all are [ 1, 4, 9 ] + +numbers.filter(function (i) { return i < 3 }); +numbers.filter(i => i < 3); +[for (i of numbers) if (i < 3) i]; +// all are [ 1, 2 ] +</pre> + +<h3 id="Сокращения_с_двумя_массивами">Сокращения с двумя массивами</h3> + +<p>Использование двух итераторов for-of для работы с двумя массивами:</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; +var letters = [ "a", "b", "c" ]; + +var cross = [for (i of numbers) for (j of letters) i+j]; +// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ] + +var grid = [for (i of numbers) [for (j of letters) i+j]]; +// [ +// ["1a", "1b", "1c"], +// ["2a", "2b", "2c"], +// ["3a", "3b", "3c"] +// ] + +[for (i of numbers) if (i > 1) for (j of letters) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"], the same as below: + +[for (i of numbers) for (j of letters) if (i > 1) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"] + +[for (i of numbers) if (i > 1) [for (j of letters) if(j > "a") i+j]] +// [["2b", "2c"], ["3b", "3c"]], not the same as below: + +[for (i of numbers) [for (j of letters) if (i > 1) if(j > "a") i+j]] +// [[], ["2b", "2c"], ["3b", "3c"]] +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<p>Изначально было в черновике ECMAScript 2015, но исключено в ревизии 27 (Август 2014). Смотрите старые ревизии ES2015 для уточнения семантики.</p> + +<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>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("30") }}</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>Возможность</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Специфика_работы_SpiderMonkey">Специфика работы SpiderMonkey</h2> + +<ul> + <li>{{jsxref("Statements/let", "let")}} не поддерживается как идентификатор, так как он доступен только в JS версии 1.7 и XUL-скриптах.</li> + <li>Деструктуризация сокращений не поддерживается ({{bug(980828)}}).</li> +</ul> + +<h2 id="Отличия_от_старой_версии_JS1.7JS1.8"><a id="#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions" name="#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions"></a>Отличия от старой версии JS1.7/JS1.8</h2> + +<div class="warning">Сокращения из JS1.7/JS1.8 были исключены из движка Gecko, начиная с версии 46 ({{bug(1220564)}}).</div> + +<p><strong>Старый синтаксис (не используйте его больше!):</strong></p> + +<pre class="brush: js example-bad line-numbers language-js"><code class="language-js"><span class="punctuation token">[</span>X <span class="keyword token">for</span> <span class="punctuation token">(</span>Y <span class="keyword token">in</span> Z<span class="punctuation token">)</span><span class="punctuation token">]</span> +<span class="punctuation token">[</span>X <span class="keyword token">for</span> each <span class="punctuation token">(</span>Y <span class="keyword token">in</span> Z<span class="punctuation token">)</span><span class="punctuation token">]</span> +<span class="punctuation token">[</span>X <span class="keyword token">for</span> <span class="punctuation token">(</span>Y <span class="keyword token">of</span> Z<span class="punctuation token">)</span><span class="punctuation token">]</span></code></pre> + +<p>Различия:</p> + +<ul> + <li>Сокращения в ESNext создают одну область для элемента "for" вместо области для всех элементов for в целом. + <ul> + <li>Old: <code>[()=>x for (x of [0, 1, 2])][1]() // 2</code></li> + <li>New: <code>[for (x of [0, 1, 2]) ()=>x][1]() // 1, каждая итерация создаёт свежую связку с x. </code></li> + </ul> + </li> + <li>Сокращения в ESNext начинаются с "for" вместо присваиваемой переменной. + <ul> + <li>Old: <code>[i * 2 for (i of numbers)]</code></li> + <li>New: <code>[for (i of numbers) i * 2]</code></li> + </ul> + </li> + <li>Сокращения в ESNext могут иметь несколько компонентов <code>if</code> и <code>for</code>.</li> + <li>Сокращения в ESNext работают только с итерациями вида <code>{{jsxref("Statements/for...of", "for...of")}}</code> и не работают с <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li> +</ul> + +<p>Смотрите <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, comment 42</a> для внесения предложений по коду.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Generator_comprehensions", "Сокращённые описания генераторов", "" ,1)}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/assignment_operators/index.html b/files/ru/web/javascript/reference/operators/assignment_operators/index.html new file mode 100644 index 0000000000..aa1d42facf --- /dev/null +++ b/files/ru/web/javascript/reference/operators/assignment_operators/index.html @@ -0,0 +1,430 @@ +--- +title: Операторы присваивания +slug: Web/JavaScript/Reference/Operators/Assignment_Operators +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор присваивания</strong> присваивает левому операнду значение, основанное на значении правого операнда.</p> + +<h2 id="Описание">Описание</h2> + +<p>Основной оператор присваивания - это знак равно (<code>=</code>), он и присваивает значение правого операнда, левому. То есть - <code>x = y</code> присваивает значение переменной <code>y</code>, переменной <code>x</code>. Другие операторы присваивания, как следует из приведенной ниже таблицы с определениями и примерами, являются сокращениями стандартных операций.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Имя</th> + <th>Сокращенный оператор</th> + <th>Смысл</th> + </tr> + <tr> + <td><a href="#Assignment">Присваивание</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">Присваивание со сложением</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Присваивание с вычитанием</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">Присваивание с умножением</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">Присваивание с делением</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">Присваивание по модулю</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">Присваивание с левым сдвигом</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Right_shift_assignment">Присваивание с правым сдвигом</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">Присваивание с побитовым AND</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">Присваивание с побитовым OR</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="Присваивание">Присваивание</h2> + +<p>Простой оператор присваивания, который задает значение переменной. Цепочка операторов присваивания может быть использована для назначения нескольким переменным одного и того же значения. Смотрите пример.</p> + +<h4 id="Синтаксис">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x = y +</pre> + +<h4 id="Примеры">Примеры</h4> + +<pre class="brush: js">// Например, следующие переменные: +// x = 5 +// y = 10 +// z = 25 + +x = y // x - 10 +x = y = z // x, y и z все равны 25 +</pre> + +<h2 id="Присваивание_со_сложением">Присваивание со сложением</h2> + +<p>Оператор добавочного присваивания, <strong>добавляет</strong> значение правого операнда к значению левого, и сохраняет результат в переменную левого операнда.<strong> </strong>Типы значений обоих операндов, определяют поведение оператора добавочного присваивания. Возможны сложение и конкатенация. Смотрите {{jsxref("Operators/Arithmetic_Operators", "addition operator", "#Addition", 1)}} для подробностей.</p> + +<h4 id="Синтаксис_2">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x += y +<strong>Значение:</strong> x = x + y +</pre> + +<h4 id="Примеры_2">Примеры</h4> + +<pre class="brush: js">// Например, следующие переменные: +// foo = "foo" +// bar = 5 +// baz = true + +// Результат исполнения каждого нижеприведенного примера +// представлен в изоляции от предыдущих примеров (как если +// бы значения переменных foo, bar, baz возвращались на +// первоначальные) + +// Number + Number -> сложение +bar += 2 // 7 + +// Boolean + Number -> сложение +baz += 1 // 2 + +// Boolean + Boolean -> сложение +baz += false // 1 + +// Number + String -> конкатенация +bar += "foo" // "5foo" + +// String + Boolean -> конкатенация +foo += false // "foofalse" + +// String + String -> конкатенация +foo += "bar" // "foobar" +</pre> + +<h2 id="Присваивание_с_вычитанием">Присваивание с вычитанием</h2> + +<p>Оператор вычитаемого присваивания <strong>вычитает</strong> значение правого операнда из значения левого, и присваивает результат переменной левого операнда. Смотрите {{jsxref("Operators/Arithmetic_Operators", "subtraction operator", "#Subtraction", 1)}} для подробностей.</p> + +<h4 id="Синтаксис_3">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x -= y +<strong>Значение:</strong> x = x - y +</pre> + +<h4 id="Примеры_3">Примеры</h4> + +<pre class="brush: js">// Например, следующие переменные: +// bar = 5 + +bar -= 2 // 3 +bar -= "foo" // NaN +</pre> + +<h3 id="Присваивание_с_умножением"><a name="Multiplication_assignment">Присваивание с умножением</a></h3> + +<p>The multiplication assignment operator <strong>multiplies</strong> a variable by the value of the right operand and assigns the result to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "multiplication operator", "#Multiplication", 1)}} for more details.</p> + +<h4 id="Синтаксис_4">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x *= y +<strong>Значение:</strong> x = x * y +</pre> + +<h4 id="Примеры_4">Примеры</h4> + +<pre class="brush: js">// Assuming the following variable +// bar = 5 + +bar *= 2 // 10 +bar *= "foo" // NaN +</pre> + +<h3 id="Присваивание_с_делением"><a name="Division_assignment">Присваивание с делением</a></h3> + +<p>The division assignment operator <strong>divides</strong> a variable by the value of the right operand and assigns the result to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "division operator", "#Division", 1)}} for more details.</p> + +<h4 id="Синтаксис_5">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x /= y +<strong>Значение:</strong> x = x / y +</pre> + +<h4 id="Примеры_5">Примеры</h4> + +<pre class="brush: js">// Assuming the following variable +// bar = 5 + +bar /= 2 // 2.5 +bar /= "foo" // NaN +bar /= 0 // Infinity +</pre> + +<h3 id="Присваивание_по_модулю"><a name="Remainder_assignment">Присваивание по модулю</a></h3> + +<p>The remainder assignment operator <strong>divides</strong> a variable by the value of the right operand and assigns the <strong>remainder</strong> to the variable. See the {{jsxref("Operators/Arithmetic_Operators", "remainder operator", "#Remainder", 1)}} for more details.</p> + +<h4 id="Синтаксис_6">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x %= y +<strong>Значение:</strong> x = x % y +</pre> + +<h4 id="Примеры_6">Примеры</h4> + +<pre class="brush: js">// Assuming the following variable +// bar = 5 + +bar %= 2 // 1 +bar %= "foo" // NaN +bar %= 0 // NaN +</pre> + +<h3 id="Присваивание_с_левым_сдвигом"><a name="Left_shift_assignment">Присваивание с левым сдвигом</a></h3> + +<p>The left shift assignment operator moves the specified amount of bits to the left and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}} for more details.</p> + +<h4 id="Синтаксис_7">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x <<= y +<strong>Значение:</strong> x = x << y +</pre> + +<h4 id="Примеры_7">Примеры</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="Присваивание_с_правым_сдвигом"><a name="Right_shift_assignment">Присваивание с правым сдвигом</a></h3> + +<p>The right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}} for more details.</p> + +<h4 id="Синтаксис_8">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x >>= y +<strong>Значение:</strong> x = x >> y +</pre> + +<h4 id="Примеры_8">Примеры</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="Присваивание_с_беззнаковым_сдвигом_вправо"><a name="Unsigned_right_shift_assignment">Присваивание с беззнаковым сдвигом вправо</a></h3> + +<p>The unsigned right shift assignment operator moves the specified amount of bits to the right and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}} for more details.</p> + +<h4 id="Синтаксис_9">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x >>>= y +<strong>Значение:</strong> x = x >>> y +</pre> + +<h4 id="Примеры_9">Примеры</h4> + +<pre class="brush: js">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="Присваивание_с_побитовым_AND"><a name="Bitwise_AND_assignment">Присваивание с побитовым AND</a></h3> + +<p>The bitwise AND assignment operator uses the binary representation of both operands, does a bitwise AND operation on them and assigns the result to the variable. See the {{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}} for more details.</p> + +<h4 id="Синтаксис_10">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x &= y +<strong>Значение:</strong> x = x & y +</pre> + +<h4 id="Примеры_10">Примеры</h4> + +<pre class="brush: js">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h3 id="Присваивание_с_побитовым_XOR"><a name="Bitwise_XOR_assignment">Присваивание с побитовым XOR</a></h3> + +<p>Побитовый оператор присваивания XOR использует двоичное представление обоих операндов, выполняет побитовую XOR-операцию и присваивает результат переменной. Для получения более подробной информации см. {{jsxref("Operators/Bitwise_Operators", "Побитовый оператор XOR", "#Bitwise_XOR", 1)}}.</p> + +<h4 id="Синтаксис_11">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x ^= y +<strong>Значение:</strong> x = x ^ y +</pre> + +<h4 id="Примеры_11">Примеры</h4> + +<pre class="brush: js">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="Присваиванием_с_побитовым_OR"><a name="Bitwise_OR_assignment">Присваиванием с побитовым OR</a></h3> + +<p>Побитовый оператор присваивания OR использует двоичное (бинарное) представление обоих операндов, выполняет побитовое ИЛИ для них и присваивает результат переменной. Дополнительную информацию см. {{jsxref("Operators/Bitwise_Operators", "Побитовый оператор OR", "#Bitwise_OR", 1)}}.</p> + +<h4 id="Синтаксис_12">Синтаксис</h4> + +<pre class="syntaxbox"><strong>Оператор:</strong> x |= y +<strong>Значение:</strong> x = x | y +</pre> + +<h4 id="Примеры_12">Примеры</h4> + +<pre class="brush: js">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Примеры_13">Примеры</h2> + +<h3 id="Левый_операнд_с_другим_оператором_присваивания">Левый операнд с другим оператором присваивания</h3> + +<p>В необычных ситуациях оператор присваивания, например, <em>x += y</em> не идентичен выражению, <em>x = x + y</em>. Когда левый операнд оператора присваивания содержит оператор присваивания, левый операнд оценивается только один раз. Например:</p> + +<pre class="brush: js">a[i++] += 5 // i оценивается только один раз +a[i++] = a[i++] + 5 // i оценивается дважды +</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>{{SpecName('ES5.1', '#sec-11.13', 'Операторы присваивания')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-assignment-operators', 'Операторы присваивания')}}</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="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Арифметические операции</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/async_function/index.html b/files/ru/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..9b9c72aba1 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,147 @@ +--- +title: async function expression +slug: Web/JavaScript/Reference/Operators/async_function +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключевое слово <strong><code>async function</code></strong> исползуется для определения асинхронной функции внутри выражений.</p> + +<p>Вы также можете определить асинхронные функции при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">инструкции async function</a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<p>Согласно спецификации <a href="https://developer.mozilla.org/en-US/docs/">ES2015</a>, вы также можете использовать <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</p> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Имя функции. Этот параметр может быть опущен, в этом случае говорят об <em>анонимной функции</em>. Имя используется только в теле функции.</dd> + <dt><code>paramN</code></dt> + <dd>Имя аргумента, передаваемого функции.</dd> + <dt><code>statements</code></dt> + <dd>Инструкции, составляющие тело функции.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Выражение <code>async function</code> очень похоже, и имеет почти тот же синтаксис, что и {{jsxref('Statements/async_function', 'async function statement')}}. Главное отличие между выражениями async <code>function</code> и объявлениями async <code>function</code> заключается в <em>имени функции,</em> которое может быть опущено в выражении <code>async function</code> для создания <em>анонимной</em> функции. Выражение <code>async function</code> можно использовать в виде {{Glossary("IIFE")}} (Immediately Invoked Function Expression), и оно будет запущено сразу после объявления. См. также главу о <a href="/en-US/docs/Web/JavaScript/Reference/Functions">функциях</a>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + +(async function(x) { // выражение асинхронной функции в виде IIFE + var a = resolveAfter2Seconds(20); + var b = resolveAfter2Seconds(30); + return x + await a + await b; +})(10).then(v => { + console.log(v); // выведет 60 после 2 секунд. +}); + +var add = async function(x) { // назначение выражения асинхронной функции переменной + var a = await resolveAfter2Seconds(20); + var b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10).then(v => { + console.log(v); // выведет 60 после 4 секунд. +}); +</pre> + +<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> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<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> Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(55)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/await/index.html b/files/ru/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..ecce9884c5 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/await/index.html @@ -0,0 +1,157 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +translation_of: Web/JavaScript/Reference/Operators/await +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор <code>await</code> используется для ожидания окончания {{jsxref("Promise")}}. Может быть использован только внутри {{jsxref("Statements/async_function", "async function")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>{{jsxref("Promise")}} или любое другое значение для ожидания разрешения.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Возвращает полученное из <code>Promise</code> значение, либо само значение, если оно не является <code>Promise.</code></p> + </dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Оператор <code>await</code> заставляет функцию, объявленную с использованием оператора <code>async</code>, ждать выполнения <code>Promise</code> и продолжать выполнение после возвращения <code>Promise</code> значения. Впоследствии возвращает полученное из <code>Promise</code> значение. Если типом значения, к которому был применен оператор <code>await</code>, является не <code>Promise</code>, то значение приводится к успешно выполненному <code>Promise</code>.</p> + +<p>Если <code>Promise</code> отклоняется, то <code>await</code> генерирует исключение с отклонённым значением.</p> + +<h2 id="Примеры">Примеры</h2> + +<p><code>await</code> ожидает разрешения <code>Promise</code> и возвращает полученное значение.</p> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} +f1(); +</pre> + +<p>Если типом значения является не <code>Promise</code>, значение преобразуется к успешно выполненному <code>Promise</code>.</p> + +<pre class="brush: js">async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2(); +</pre> + +<p>Если <code>Promise</code> отклонен, то выбрасывается исключение с переданным значением.</p> + +<pre class="brush: js">async function f3() { + try { + var z = await Promise.reject(30); + } catch(e) { + console.log(e); // 30 + } +} +f3();</pre> + +<p>Обработка отклонённого <code>Promise</code> без <code>try/catch</code> блока.</p> + +<pre class="brush: js">var response = await promisedFunction().catch((err) => { console.log(err); }); +// response получит значение undefined, если Promise будет отклонён +</pre> + +<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 functions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>10.1</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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>10.1</td> + <td>{{CompatChrome(55)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/bitwise_and/index.html b/files/ru/web/javascript/reference/operators/bitwise_and/index.html new file mode 100644 index 0000000000..ce232c1463 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/bitwise_and/index.html @@ -0,0 +1,111 @@ +--- +title: Bitwise AND (&) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND +tags: + - JavaScript + - Оператор + - По + - Поитовые операторы +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Побитовый опеератор И (<code>&</code>) возвращает <code>1</code> в каждой битовой позиции, для которой соответствующие биты обоих операндов равны <code>1</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div> + +<div class="hidden">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.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> & <var>b</var></code> +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Операнды преобразуются в 32-битные целые числа и выражаются серией битов (нулей and единиц). Числа с более чем 32 битами отбрасывают старшие разряды. Например, следующее целое число с более чем 32 битами будет преобразовано в 32-биитное целое:</p> + +<pre class="brush: js notranslate">До: 11100110111110100000000000000110000000000001 +После: 10100000000000000110000000000001</pre> + +<p>Каждый бит в первом операнде связан с соответствующим битом во втором операнде:<em>первый бит - с первым</em>,<em>второй- со вторым</em>, и т.д.</p> + +<p>Оператор применяется к каждой паре битов, и результат строится побитово.</p> + +<p>Таблица истинности для оператора И:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">a</th> + <th class="header" scope="col">b</th> + <th class="header" scope="col">a И b</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js notranslate">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Побитовоее И для любого числа <code><var>x</var></code> с <code>0</code> дает <code>0</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_побитового_И">Использование побитового И</h3> + +<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +5 & 2; // 0</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + + + +<p>{{Compat("javascript.operators.bitwise_and")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">Bitwise operators in the JS guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">Bitwise AND assignment operator</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/bitwise_operators/index.html b/files/ru/web/javascript/reference/operators/bitwise_operators/index.html new file mode 100644 index 0000000000..e681bdf40b --- /dev/null +++ b/files/ru/web/javascript/reference/operators/bitwise_operators/index.html @@ -0,0 +1,625 @@ +--- +title: Битовые операции +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Сводка</h2> + +<p>Битовые операции обращаются со своими операндами как с 32-х разрядными последовательностями нулей и единиц, а не как с десятичными, восьмеричными или шестнадцатиричными числами. К примеру десятичное число 9 в двоичном представлении будет выглядеть как 1001. Битовые операции производят свои преобразования именно с двоичным представлением числа, но возвращают стандартные числовые значения языка JavaScript.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Операторы</td> + </tr> + <tr> + <td>Реализованы в:</td> + <td>JavaScript 1.0</td> + </tr> + <tr> + <td>Версия ECMA:</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> + +<p>Следующая таблица содержит сводные данные о битовых операциях в JavaScript:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Оператор</th> + <th>Использование</th> + <th>Описание</th> + </tr> + <tr> + <td>Побитовое И</td> + <td style="white-space: nowrap;"><code>a & b</code></td> + <td>Возвращает 1 в тех разрядах, которые у обоих операндов были равны 1.</td> + </tr> + <tr> + <td>Побитовое ИЛИ</td> + <td style="white-space: nowrap;"><code>a | b</code></td> + <td>Возвращает 1 в тех разрядах, которые хотя бы у одного из операндов были равны 1.</td> + </tr> + <tr> + <td>Побитовое исключающее ИЛИ</td> + <td style="white-space: nowrap;"><code>a ^ b</code></td> + <td>Возвращает 1 в тех позициях, которые только у одного из операндов были равны 1.</td> + </tr> + <tr> + <td>Побитовое НЕ</td> + <td style="white-space: nowrap;"><code>~ a</code></td> + <td>Инвертирует биты операнда.</td> + </tr> + <tr> + <td>Сдвиг влево</td> + <td style="white-space: nowrap;"><code>a << b</code></td> + <td>Сдвигает двоичное представление числа a на b разрядов влево заполняя освободившиеся справа разряды нулями.</td> + </tr> + <tr> + <td>Арифметический сдвиг вправо</td> + <td style="white-space: nowrap;"><code>a >> b</code></td> + <td>Сдвигает двоичное представление числа a на b разрядов вправо. Освобождающиеся разряды заполняются знаковым битом.</td> + </tr> + <tr> + <td>Логический сдвиг вправо</td> + <td style="white-space: nowrap;"><code>a >>> b</code></td> + <td>Сдвигает двоичное представление числа a на b разрядов вправо. Освобождающиеся разряды заполняются нулями.</td> + </tr> + </tbody> +</table> + +<h3 id="Signed_32-bit_integers" name="Signed_32-bit_integers">Представление чисел (Signed 32-bit integers)</h3> + +<p>Операнды всех битовых операций конвертируются в 32-х битовые целые со знаком представленные в дополнительном коде и с использованием порядка битов от "старшего к младшему". Порядок битов "от старшего к младшему" означает, что наиболее значимый бит (бит с наибольшим значением) находится слева если 32-х разрядное число представлено в виде горизонтальной линии (шкалы). Представление в дополнительном коде означает, что отрицательное значение числа (например 5 и -5) получается путем инвертирования числа (операция "побитовое НЕ", также известное как "обратный код") и прибавления к нему единицы.</p> + +<p>Возьмем, к примеру, число 314. Представим его в двоичном коде:</p> + +<pre class="eval">00000000000000000000000100111010 +</pre> + +<p>Следующая строка представляет собой его обратный код или ~314:</p> + +<pre class="eval">11111111111111111111111011000101 +</pre> + +<p>Прибавив к нему единицу, мы получаем двоичное представление числа -314, оно же 314 в дополнительном коде:</p> + +<pre class="eval">11111111111111111111111011000110</pre> + +<p>Дополнение до 2-х гарантирует нам, что у положительного числа самый левый бит равен 0, в то время как у отрицательного он равен 1. Он зовется <em>знаковым битом</em>.</p> + +<p><br> + Число 0 есть число, у которого во ввсех битовых позициях записаны нули.</p> + +<pre class="line-numbers language-html"><code class="language-html">0 (base 10) = 00000000000000000000000000000000 </code></pre> + +<p>Число -1 есть число, у которого во всех битовых позициях записаны единицы.</p> + +<pre class="line-numbers language-html"><code class="language-html">-1 (base 10) = 11111111111111111111111111111111 </code></pre> + +<p>Число <code>-2147483648</code> (в шестнадцатиричной системе счисления: <code>-0x80000000</code>) - это вещественное число, которое состоит только из 0, заисключением самого первого слева, который есть 1 (отвечает за знак числа).</p> + +<pre class="line-numbers language-html"><code class="language-html">-2147483648 (base 10) = 10000000000000000000000000000000</code></pre> + +<p>Число <code>2147483648</code> (в шестнадцатиричной системе счисления: <code>0x80000000</code>) - это вещественное число, которое состоит только из 1, заисключением самого первого слева, который есть 0 (отвечает за знак числа).</p> + +<pre class="line-numbers language-html"><code class="language-html">2147483647 (base 10) = 01111111111111111111111111111111</code></pre> + +<p><code>-2147483648 и 2147483647 - это самое минимальное и самое максимальное числа, которые можно представить в 32 разрядной ячейке памяти.</code></p> + +<h2 id="Bitwise_logical_operators" name="Bitwise_logical_operators">Побитовые логические операции</h2> + +<p>Побитовые логические операции работают следующим образом:</p> + +<ul> + <li>Операнды конвертируются в 32-х битовые числа отображаемые последовательностью нулей и единиц. Числа более 32-х бит теряют свои старшие биты. Например:</li> +</ul> + +<pre class="line-numbers language-html"><code class="language-html">До: 11100110111110100000000000000110000000000001 +После: 10100000000000000110000000000001</code> +</pre> + +<ul> + <li>Каждый бит первого операнда считается парным соотвествующему биту второго операнда. Первый бит - первому, второй второму итд.</li> + <li>Операция применяется к каждой паре битов, and the result is constructed bitwise.</li> +</ul> + +<h3 id="_.28Bitwise_AND.29" name="&_.28Bitwise_AND.29">& (Побитовое AND)</h3> + +<p>Производит побитовое И над каждой парой битов. Операция <code>a</code> AND <code>b</code> веренет 1 если только и <code>a</code> и <code>b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<p>Пример:</p> + +<pre class="eval"> 9 (основание 10) = 00000000000000000000000000001001 (основание 2) + 14 (основание 10) = 00000000000000000000000000001110 (основание 2) + -------------------------------- +14 & 9 (основание 10) = 00000000000000000000000000001000 (осн. 2) = 8 (осн. 10) +</pre> + +<p>Побитовое AND любого числа x с нулем вернет 0.</p> + +<p>Побитовое AND любого числа x с числом -1 вернет х.</p> + +<h3 id="_.28Bitwise_OR.29" name="|_.28Bitwise_OR.29">| (Побитовое OR)</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Производит побитовое ИЛИ над каждой парой битов. Операция <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> OR <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> веренет 1 если <code style="color: rgb(37, 34, 29); font-weight: inherit;">a</code> или <code style="color: rgb(37, 34, 29); font-weight: inherit;">b</code> равны 1. Таблица истинности для этой операции выглядит так:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="eval">Пример: + +9 (осн. 10) = 00000000000000000000000000001001 (осн. 2) +14 (осн. 10) = 00000000000000000000000000001110 (осн. 2) + -------------------------------- +14 | 9 (осн. 10) = 00000000000000000000000000001111 (осн. 2) = 15 (осн. 10) +</pre> + +<p>Побитовое OR любого числа x c нулем вернет x.</p> + +<p>Побитовое OR любого числа x с числом -1 вернет -1.</p> + +<h3 id=".5E_.28Bitwise_XOR.29" name=".5E_.28Bitwise_XOR.29">^ (Побитовое XOR)</h3> + +<p>Производит побитовое XOR над каждой парой битов. Операция <code>a</code> XOR <code>b</code> вернет 1 если <code>a</code> и <code>b</code> различны. Таблица истинности для этой операции выглядит так:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<p>Пример:</p> + +<pre class="eval"> 9 (осн. 10) = 00000000000000000000000000001001 (осн. 2) + 14 (осн. 10) = 00000000000000000000000000001110 (осн. 2) + -------------------------------- +14 ^ 9 (осн. 10) = 00000000000000000000000000000111 (осн. 2) = 7 (осн. 10) +</pre> + +<p>Побитовое XOR любого числа x c нулем вернет x.</p> + +<p>Побитовое XOR любого числа x c числом -1 вернет ~x.</p> + +<h3 id=".7E_.28Bitwise_NOT.29" name=".7E_.28Bitwise_NOT.29">~ (Побитовое NOT)</h3> + +<p>Производит операцию NOT над каждым битом. NOT <code>a</code> вернет побитово инвертированное значение (обратный код) операнда. Таблица истинности для этой операции выглядит так:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<p>Пример:</p> + +<pre class="eval"> 9 (осн. 10) = 00000000000000000000000000001001 (осн. 2) + -------------------------------- +~9 (осн. 10) = 11111111111111111111111111110110 (осн. 2) = -10 (осн. 10) +</pre> + +<p>Побитовое NOT любого числа x вернет -(x + 1). Например, ~5 вернет -6.</p> + +<h2 id="Bitwise_shift_operators" name="Bitwise_shift_operators">Побитовые операции сдвига</h2> + +<p>Оператор побитового сдвига принимает в себя два операнда: первый - величина, которую сдвигают, второй - число позиций, на которое сдвигаются биты первого операнда. Направление сдвига зависит от используемого оператора.</p> + +<p>Операторы сдвига конвертируют операнды в 32-ух разрядные числа с порядком байтов от старшего к младшему, а результат возвращает того же типа, что и левый операнд.</p> + +<h3 id=".3C.3C_.28Left_shift.29" name=".3C.3C_.28Left_shift.29"><< (Сдвиг влево)</h3> + +<p>Оператор побитового сдвига влево сдвигает первый операнд на заданное число битов влево. Лишние биты отбрасываются.</p> + +<p>Например, <code>9 << 2</code> в результате даст 36:</p> + +<pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) + -------------------------------- +9 << 2 (осн. 10): 00000000000000000000000000100100 (осн. 2) = 36 (осн. 10) + + +</pre> + +<p>Побитовй сдвиг любого числа <code>x</code> влево на <code>y</code> бит в результате дает <code>x * 2 ** y</code>.</p> + +<h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">>> (Сдвиг вправо с сохранением знака)</h3> + +<p>Оператор побитового сдвига вправо сдвигает первый операнд на заданное число битов вправо. Лишние биты отбрасываются. Слева добавляется заданное число битов равных первому биту исходного числа. Поскольку значение первого бита, определяющего знак числа, останется неизменным, знак получившегося результата будет таким же как у первого аргумента. Отсюда "с сохранением знака" в названи.</p> + +<p>Например, <code>9 >> 2</code> в результате даст 2:</p> + +<pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) + -------------------------------- +9 >> 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10) +</pre> + +<p>Аналогично, <code>-9 >> 2</code> даст в результате -3, так как знак сохранен:</p> + +<pre class="eval"> -9 (осн. 10): 11111111111111111111111111110111 (осн. 2) + -------------------------------- +-9 >> 2 (осн. 10): 11111111111111111111111111111101 (осн. 2) = -3 (осн. 10) +</pre> + +<h3 id=".3E.3E_.28Sign-propagating_right_shift.29" name=".3E.3E_.28Sign-propagating_right_shift.29">>>> (Сдвиг вправо с заполнением нулями)</h3> + +<p>Оператор побитового сдвига вправо сдвигает первый операнд на заданное число битов вправо. Лишние биты отбрасываются. Слева добавляется заданное число нулевых битов. Поскольку значение первого бита, определяющего знак числа, становится нулевым, результатом операции всегда будет положительное число.</p> + +<p>Для положительных чисел, сдвиг вправо с сохранением знака и сдвиг вправо с заполнением нулями эквивалентны.</p> + +<p>Например, <code>9 >>> 2</code> дает в результате 2, как и <code>9 >> 2</code>:</p> + +<pre class="eval"> 9 (осн. 10): 00000000000000000000000000001001 (осн. 2) + -------------------------------- +9 >>> 2 (осн. 10): 00000000000000000000000000000010 (осн. 2) = 2 (осн. 10) +</pre> + +<p>Важно отметить, что для отрицательных результаты будут разными. Например, <code>-9 >>> 2</code> дает в результате 1073741821, что отличается от результата <code>-9 >> 2</code> (равно -3):</p> + +<pre class="eval"> -9 (осн. 10): 11111111111111111111111111110111 (осн. 2) + -------------------------------- +-9 >>> 2 (осн. 10): 00111111111111111111111111111101 (осн. 2) = 1073741821 (осн. 10) +</pre> + +<h3 id="Examples" name="Examples">Примеры</h3> + +<h4 id="Example_Flags_and_bitmasks" name="Example:_Flags_and_bitmasks">Пример: флаги и битовые маски</h4> + +<p>Побитовые логические операторы часто используются для создания, обработки и чтения последовательности флагов, которые осуществляются также, как и двоичные переменные. Переменные могут быть использованы вместо этих последовательностей, но двоичные флаги занимают гораздо меньше памяти (в 32 разрядной ячейке памяти).</p> + +<p>Предположим, существует 4 флага:</p> + +<ul> + <li>флаг A: у нас есть проблема с муравьями</li> + <li>флаг B: у нас есть летучая мышь</li> + <li>флаг C: у нас есть кошка</li> + <li>флаг D: у нас есть утка</li> +</ul> + +<p>Эти флаги представлены последовательностью битов: DCBA. Считается, что флаг <em>установлен (the flag is set)</em>, если его значение равно 1. Флаг <em>сброшен (the flag is cleared)</em>, если его значение равно 0. Предположим, что переменная <code>flags</code> содержит двоичное значение 0101:</p> + +<pre class="eval">var flags = 0x5; // двоичное 0101 +</pre> + +<p>Из этого значения следует:</p> + +<ul> + <li>флаг A установлен (у нас есть проблема с муравьями);</li> + <li>флаг B сброшен (у нас нет летучей мыши);</li> + <li>флаг C установлен (у нас есть кошка);</li> + <li>флаг D сброшен (у нас нет утки);</li> +</ul> + +<p>Так как битовые операторы 32-битные, то 0101 в действительности представлено значением 00000000000000000000000000000101, но ведущие нули могут быть опущены, потому, что не содержат значимой информации.</p> + +<p><em>Битовая маска, </em>это последовательность битов, которая позволяет манипулировать и/или считывать значения флагов. Обычно для каждого флага задаётся "примитивная" битовая маска:</p> + +<pre class="eval">var FLAG_A = 0x1; // 0001 +var FLAG_B = 0x2; // 0010 +var FLAG_C = 0x4; // 0100 +var FLAG_D = 0x8; // 1000 +</pre> + +<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> + +<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeros (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="eval">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="eval">// if we own a bat or we own a cat +if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true + // do stuff +} +</pre> + +<pre class="eval">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1010 can be used to set flags C and D:</p> + +<pre class="eval">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="eval">// no, we don't neither have an ant problem nor own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="eval">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="eval">// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="eval">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 + +</pre> + +<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><a href="#Bitwise_NOT">Битовый NOT (<code>~</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_AND">Битовый AND (<code>&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Битовый OR (<code>|</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Битовый XOR (<code>^</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Left_shift">Сдвиг влево (<code><<</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Right_shift">Сдвиг вправо (<code>>></code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Беззнаковый сдвиг вправо (<code>>>></code>)</a></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><a href="#Bitwise_NOT">Битовый NOT (<code>~</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_AND">Битовый AND (<code>&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Битовый OR (<code>|</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Битовый XOR (<code>^</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Left_shift">Сдвиг влево (<code><<</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Right_shift">Сдвиг вправо (<code>>></code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Беззнаковый сдвиг вправо (<code>>>></code>)</a></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><a class="external" href="http://ru.wikipedia.org/wiki/%D0%91%D0%B8%D1%82%D0%BE%D0%B2%D1%8B%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B8" title="http://ru.wikipedia.org/wiki/Битовые_операции">Wikipedia Битовые операции</a></li> + <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_(%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0)" title="http://ru.wikipedia.org/wiki/Дополнительный_код_(представление_числа)">Wikipedia Дополнительный код</a></li> + <li><a class="external" href="http://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4_(%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%87%D0%B8%D1%81%D0%BB%D0%B0)" title="http://ru.wikipedia.org/wiki/Обратный_код_(представление_числа)">Wikipedia Обратный код</a></li> + <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Логические операции</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/class/index.html b/files/ru/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..ad22c1abc1 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/class/index.html @@ -0,0 +1,152 @@ +--- +title: class expression +slug: Web/JavaScript/Reference/Operators/class +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{jsSidebar("Operators")}}</div> + +<div></div> + +<p><strong>Class expression</strong> это способ определения класса в ECMAScript 2015 (ES6). Схожий с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a>, class expressions может быть именованным либо не иметь имени. Если он именованный, то его имя доступно только внутри класса. JavaScript классы используют прототипно-ориентированние наследование.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] { + // тело класса +};</pre> + +<h2 id="Описание">Описание</h2> + +<p>Class expression имеет схожий сиснтаксис с {{jsxref("Statements/class", "class declaration (statement)", "", "true")}}. Однако в class expression можно опустить имя класса ("binding identifier"), что не допустимо с {{jsxref("Statements/class", "class declaration", "", "true")}}. Также class expression позволяет повторно объявить уже существующий класс и это <strong>не приведёт к ошибке типа</strong>, как при использовании {{jsxref("Statements/class", "class declaration", "", "true")}}. Свойство конструктора является опциональным. Результатом вызова оператора {{jsxref("Operators/typeof", "typeof")}} на классах, сгенерированных при помощи class expression, всегда будет "function".</p> + +<p>Так же, как и при использовании class declaration, тело класса у class expression будет исполняться в {{jsxref("Strict_mode", "строгом режиме", "", 1)}}.</p> + +<pre class="brush: js notranslate">'use strict'; +var Foo = class {}; // свойство конструктора опционально +var Foo = class {}; // повторное объявление разрешено + +typeof Foo; // возвращает "function" +typeof class {}; // возвращает "function" + +Foo instanceof Object; // true +Foo instanceof Function; // true +class Foo {}; // Throws TypeError, doesn't allow re-declaration +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простой_class_expression">Простой class expression</h3> + +<p>Простой анонимный class expression, на который можно сослаться с помощью переменной "Foo".</p> + +<pre class="brush: js notranslate">var Foo = class { + constructor() {} + bar() { + return "Hello World!"; + } +}; + +var instance = new Foo(); +instance.bar(); // "Hello World!" +Foo.name; // "Foo" +</pre> + +<h3 id="Именованный_class_expression">Именованный class expression</h3> + +<p>Если вы хотите сослаться на конкретный класс внутри тела класса, вы можете создать именованный class expression. Это имя будет доступно только внутри области видимости самого class expression.</p> + +<pre class="brush: js notranslate">var Foo = class NamedFoo { + constructor() {} + whoIsThere() { + return NamedFoo.name; + } +} +var bar = new Foo(); +bar.whoIsThere(); // "NamedFoo" +NamedFoo.name; // ReferenceError: NamedFoo is not defined +Foo.name; // "NamedFoo" +</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-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Первоначальное определение</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> + </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> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function"><code>function</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> statement</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/decrement/index.html b/files/ru/web/javascript/reference/operators/decrement/index.html new file mode 100644 index 0000000000..722d4a5889 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/decrement/index.html @@ -0,0 +1,80 @@ +--- +title: Декремент (--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - Декремент + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор декремента (<code>--</code>) уменьшает (вычитает единицу) свой операнд и возвращает значение.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Если используется постфикс, с оператором после операнда (например, x--), оператор декремента уменьшает и возвращает значение перед уменьшением.</p> + +<p>Если используется префикс, с оператором перед операндом (например, --x), оператор декремента уменьшает и возвращает значение после уменьшения.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Постфиксный_декремент">Постфиксный декремент</h3> + +<pre class="brush: js notranslate">let x = 3; +y = x--; + +// y = 3 +// x = 2 +</pre> + +<h3 id="Префиксный_декремент">Префиксный декремент</h3> + +<pre class="brush: js notranslate">let a = 2; +b = --a; + +// a = 1 +// b = 1 +</pre> + +<h2 id="Характеристики">Характеристики</h2> + +<p>Спецификация</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + + + +<p>{{Compat("javascript.operators.decrement")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/delete/index.html b/files/ru/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..2edf33b67e --- /dev/null +++ b/files/ru/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,127 @@ +--- +title: delete +slug: Web/JavaScript/Reference/Operators/delete +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Аннотация</h2> + +<p>Оператор <code>delete</code> удаляет свойство из объекта.</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" colspan="2" scope="row">Оператор</th> + </tr> + </thead> + <tbody> + <tr> + <td>Реализован в:</td> + <td>JavaScript 1.2</td> + </tr> + <tr> + <td>Версия ECMAScript:</td> + <td>ECMA-262 1-ый выпуск</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<p><code>delete <em>выражение</em></code></p> + +<p>где результат вычисления <em>выражения</em> должен быть ссылкой на свойство (объекта), например:</p> + +<pre class="syntaxbox">delete <em>object.property</em> +delete <em>object</em>['<em>property</em>'] +delete <em>object</em>[<em>index</em>] +delete <em>property</em> // удаляет свойства глобального объекта, или, + // используя инструкцию <em>with</em>, свойства объекта, на который ссылается инструкция +</pre> + +<p>Если результат вычисления <em>выражения</em> не является свойством (объекта), <code>delete</code> ничего не делает.</p> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Имя объекта или выражение, результатом вычисления которого является объект.</dd> + <dt><code>property</code></dt> + <dd>Удаляемое свойство.</dd> + <dt><code>index</code></dt> + <dd>Целое число, представляющее собой индекс массива, который должен быть удален.</dd> +</dl> + +<h3 id="Returns" name="Returns">Возвращаемое значение</h3> + +<p>Возвращает false, только если свойство существует в самом объекте, а не в его прототипах, и не может быть удалено. Во всех остальных случаях возвращает true.</p> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Если оператор <code>delete</code> успешно выполняет удаление, он полностью удаляет свойство из объекта. Однако, если свойство с таким же именем существует в цепочке прототипов, объект унаследует это свойство из прототипа.</p> + +<p><code>delete</code> эффективен только применительно к свойствам объектов. Он не оказывает никакого влияния на имена переменных и функций.<br> + Присвоение значения свойству без указания объекта (без оператора var) иногда неверно характеризуется, как глобальная переменная, (например <code>x = 5</code>). На самом деле происходит присвоение значения свойству глобального объекта.</p> + +<p><code>delete</code> не может удалить определенные свойства встроенных объектов (таких как Object, Array, Math и так далее). В спецификации ECMA-262 они обозначены как <em>DontDelete.</em></p> + +<pre class="brush: js">x = 42; // создает свойство x в глобальном объекте +var y = 43; // объявляет новую переменную, y +myobj = {}; +myobj.h = 4; // создает свойство h в myobj +myobj.k = 5; // создает свойство k в myobj + +delete x; // возвращает true (x - свойство глобального объекта и может быть удалено) +delete y; // возвращает false (delete не влияет на имена переменных) +delete Math.PI; // возвращает false (delete не влияет на определенные встроенные свойства) +delete myobj.h; // возвращает true (свойства, определенные пользователем могут быть удалены) + +with(myobj) { + delete k; // возвращает true (эквивалентно delete myobj.k) +} + +delete myobj; // возвращает true (myobj это свойство глобального объекта, не переменная, поэтому может быть удалено)</pre> + +<p>Если объект наследует свойство от прототипа и не имеет собственного свойства с таким же именем, свойство не может быть удалено при обращении через этот объект. Однако можно удалить это свойство напрямую в прототипе.</p> + +<pre class="brush: js">function Foo(){} +Foo.prototype.bar = 42; +var foo = new Foo(); +delete foo.bar; // возвращает true, но безрезультатно, так как bar - наследуемое свойство +alert(foo.bar); // выводит 42, свойство все еще наследуется +delete Foo.prototype.bar; // удаляет свойство из прототипа +alert(foo.bar); // выводит "undefined", свойство больше не наследуется</pre> + +<h3 id="Deleting_array_elements" name="Deleting_array_elements">Удаление элементов массива</h3> + +<p>Когда с помощью оператора delete удаляется элемент массива, длина массива не меняется. Например, если Вы удалите a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }} по прежнему a{{ mediawiki.external(4) }}, а a{{ mediawiki.external(3) }} не определено. Так будет даже если Вы удалите последний элемент массива (<code>delete a{{ mediawiki.external('a.length-1') }}</code>).</p> + +<p>Когда оператор <code>delete</code> удаляет элемент массива, этот элемент больше не существует в массиве. В следующем примере, trees{{ mediawiki.external(3) }} удаляется с помощью <code>delete</code>.</p> + +<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; + +delete trees[3]; +if (3 in trees) { + // этот участок кода не выполнится +}</pre> + +<p>Если Вы хотите, чтобы элемент массива существовал, но имел значение undefined, используйте значение <code>undefined</code> вместо оператора <code>delete</code>. В следующем примере, trees{{ mediawiki.external(3) }} принимает значение undefined, но элемент массива все еще существует:</p> + +<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; +trees[3]=undefined; +if (3 in trees) { + // этот участок кода выполнится +}</pre> + +<h2 id="Проблема_кроссбраузерности">Проблема кроссбраузерности</h2> + +<p>Несмотря на то, что стандарт ECMAScript оставляет порядок итерации по свойствам объектов на усмотрение реализующей стороны, может оказаться так, что все основные браузеры поддерживают порядок итерации, основанный на принципе "свойство добавленное в объект раньше идет раньше" (по крайней мере для свойств не находящихся в прототипе). Однако, в случае с Internet Explorer, когда кто-нибудь использует <code>delete</code> с каким-либо свойством, это приводит к некоторым неожиданным результатам, заставляя другие браузеры отказаться от использования простых объектов, таких как литералы объектов, в качестве ассоциативных массивов. В Internet Explorer, когда значение свойства установлено в undefined, после удаления этого свойства, если кто-нибудь позже добавит свойство с таким же именем, оно окажется в своей <em>старой</em> позиции, а не в конце итерационной последовательности, как ожидается.</p> + +<p>Поэтому, если Вы хотите симулировать упорядоченный ассоциативный массив в кроссбраузерной среде, вам придется либо использовать два отдельных массива (один для ключей и один для значений), либо построить массив из объектов с одним свойством и так далее.</p> + +<h2 id="Specification" name="Specification">Внешние ссылки</h2> + +<ul> + <li>Глубокий <a href="http://perfectionkills.com/understanding-delete/">анализ оператора delete</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..29cdd9cd7f --- /dev/null +++ b/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,339 @@ +--- +title: Деструктурирующее присваивание +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<p>Синтаксис <strong>деструктурирующего присваивания</strong> в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:js">var a, b, rest; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5]; +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a:1, b:2}); +console.log(a); // 1 +console.log(b); // 2 + +({a, b, ...rest} = {a:1, b:2, c:3, d:4}); +// ES2016 - ещё не реализовано Firefox 47a01 +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Выражения объявления объектов или массивов предоставляют простой способ создания пакета однородных данных. При создании такого пакета вы получаете возможность использовать его любым доступным образом. Также вы можете возвращать его в функциях.</p> + +<p>Одной из ключевых возможностей использования деструктурирующего присваивания является чтение структуры данных одним оператором, хотя помимо этого вы можете найти множество других применений в приведённых ниже примерах.</p> + +<p>Данная возможность подобна таковой, присутствующей в языках Perl и Python.</p> + +<h2 id="Разбор_массивов">Разбор массивов</h2> + +<h3 id="Простой_пример">Простой пример</h3> + +<pre class="brush: js">var foo = ["one", "two", "three"]; + +// без деструктурирования +var one = foo[0]; +var two = foo[1]; +var three = foo[2]; + +// с деструктурированием +var [one, two, three] = foo;</pre> + +<h3 id="Обмен_значений_переменных">Обмен значений переменных</h3> + +<p>После выполнения фрагмента кода, значение <var>b</var> будет 1, <var>a</var> будет 3. Без деструктурирующего присваивания, для обмена значений требуется дополнительная временная переменная (или что-то наподобие <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR-обмена</a>).</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a];</pre> + +<h3 id="Возврат_нескольких_значений">Возврат нескольких значений</h3> + +<p>Благодаря деструктурирующему присваиванию, функции могут возвращать несколько значений. Хотя всегда можно было возвращать массивы в функциях, оно предоставляет гибкость:</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} +</pre> + +<p>Как вы видите, возвращаемые результаты имеют вид массива, значения которого заключены в квадратные скобки. Вы можете возвращать неограниченное количество результатов таким образом. В следующем примере, <code>f()</code> возвращает <code>[1, 2]</code> как результат:</p> + +<pre class="brush:js">var a, b; +[a, b] = f(); +console.log("A is " + a + " B is " + b); +</pre> + +<p>Оператор <code>[a, b] = f()</code> присваивает результаты функции переменным в квадратных скобках: <var>a</var> будет присвоено 1, <var>b</var> будет присвоено 2.</p> + +<p>Вы также можете использовать результат функции в виде массива:</p> + +<pre class="brush:js">var a = f(); +console.log("A is " + a); +</pre> + +<p>В данном случае <var>a</var> будет массивом с элементами 1 и 2.</p> + +<h3 id="Игнорирование_некоторых_значений">Игнорирование некоторых значений</h3> + +<p>Вы также можете проигнорировать не нужные значения:</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log("A is " + a + " B is " + b); +</pre> + +<p>После выполнения кода, a будет 1, b будет 3. Значение 2 игнорируется. Таким же образом вы можете игнорировать любые (или все) значения. Например:</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="Получение_значений_из_результата_регулярного_выражения">Получение значений из результата регулярного выражения</h3> + +<p>Когда метод <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> регулярного выражения находит совпадение, он возвращает массив, содержащий первый совпадающий фрагмент строки и далее группы, определённые в регулярном выражении. Деструктурирующее присваивание упрощает получение данных из этих групп, игнорируя первый фрагмент:</p> + +<pre class="brush:js">var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; + +var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); +var [, protocol, fullhost, fullpath] = parsedURL; + +console.log(protocol); // выведет "https" +</pre> + +<h2 id="Разбор_объектов">Разбор объектов</h2> + +<h3 id="Простой_пример_2">Простой пример</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true + +// Объявление новых переменных +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true +</pre> + +<h3 id="Загрузка_модулей">Загрузка модулей</h3> + +<p>Деструктурирующее присваивание помогает загружать специфичные наборы модулей, как в <a href="/en-US/Add-ons/SDK">Add-on SDK</a>:</p> + +<pre class="brush: js">const { Loader, main } = require('toolkit/loader'); +</pre> + +<h3 id="Вложенный_объект_и_разбор_массива">Вложенный объект и разбор массива</h3> + +<pre class="brush:js">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="Деструктурирование_во_время_обхода">Деструктурирование во время обхода</h3> + +<pre class="brush: js">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Получение_полей_объекта-параметра_функции">Получение полей объекта-параметра функции</h3> + +<pre class="brush:js">function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>В приведённом примере извлекаются поля <code>id</code>, <code>displayName</code> и<span class="Apple-converted-space"> </span><code>firstName</code><span class="Apple-converted-space"> </span>из объекта пользователь.</p> + +<h3 id="Деструктурирование_вычисляемых_имён_свойств">Деструктурирование вычисляемых имён свойств</h3> + +<p>Вычисляемые имена свойств, например, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">литералы объектов</a>, могут использоваться при деструктурирующем присваивании:</p> + +<pre class="brush: js">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</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-destructuring-assignment', 'Деструктурирующее присваивание')}}</td> + <td>{{Spec2('ES2015')}}</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>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>14</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>7.1</td> + </tr> + <tr> + <td>Вычисляемые имена свойств</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>14</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Оператор spread</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>12<sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</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>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>iOS 8</td> + </tr> + <tr> + <td>Вычисляемые имена свойств</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Оператор spread</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Необходимо включить "Enable experimental Javascript features" в `about:flags`</p> + +<h3 id="See_also" name="See_also">Смотрите также</h3> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Операторы присваивания</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/expression_closures/index.html b/files/ru/web/javascript/reference/operators/expression_closures/index.html new file mode 100644 index 0000000000..9c8f613699 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/expression_closures/index.html @@ -0,0 +1,118 @@ +--- +title: Expression closures +slug: Web/JavaScript/Reference/Operators/Expression_closures +tags: + - Нестандартная + - Функции +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div class="warning"><strong>Не является стандартом. Не используйте данный синтаксис!</strong><br> +Синтаксис замкнутого выражения является устаревшей возможностью SpiderMonkey и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1083458">будет удален</a>. Используйте вместо него <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<p>Замкнутые выражения – это синтаксис для удобной записи коротких и простых функций.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expression</em> +</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Имя функции. Может быть пропущено, в таком случае функция будет являться <em>анонимной</em>. Имя функции доступно только в теле функции.</dd> + <dt><code>paramN</code></dt> + <dd>Имя аргумента, передаваемого функции. Всего может быть передано вплоть до 255 аргументов.</dd> + <dt><code>expression</code></dt> + <dd>Выражение, содержащее тело функции.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Этот функционал – ничто иное как короткая нотация для записи простых функций. Он призван добавить в язык нечто похожее на <a class="external" href="https://ru.wikipedia.org/wiki/%D0%9B%D1%8F%D0%BC%D0%B1%D0%B4%D0%B0-%D0%B8%D1%81%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5#.D0.92_.D1.8F.D0.B7.D1.8B.D0.BA.D0.B0.D1.85_.D0.BF.D1.80.D0.BE.D0.B3.D1.80.D0.B0.D0.BC.D0.BC.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D1.8F">Лямбда-исчисления</a>.</p> + +<p>JavaScript 1.7 и старше:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>Такой синтаксис позволяет отбросить фигурные скобки и оператор <code>return</code>. Данный подход, кроме краткости записи, иных преимуществ не имеет.</p> + +<h2 id="Примеры_использования">Примеры использования</h2> + +<p>Короткая запись для привязки слушателей событий:</p> + +<pre class="brush: js"> document.addEventListener("click", function() false, true); +</pre> + +<p>Использование такой записи для работы с функциями массивов из JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == "text"); +</pre> + +<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>{{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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Функции и области видимости")}}</li> + <li>{{jsxref("Function", "Функция")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/function/index.html b/files/ru/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..aefe1d0c2b --- /dev/null +++ b/files/ru/web/javascript/reference/operators/function/index.html @@ -0,0 +1,143 @@ +--- +title: Функциональное выражение +slug: Web/JavaScript/Reference/Operators/function +tags: + - JavaScript + - Оператор + - Функция +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключевое слово <strong><code>function</code></strong> может использоваться для определения функции внутри выражения.</p> + +<p>Вы можете также определять функции используя конструктор {{jsxref("Function")}} и {{jsxref("Statements/function", "объявление функции")}}.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +};</pre> + +<p>С версии ES2015 можно также использовать <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочные функции</a>.</p> + +<h3 id="Parameters" name="Parameters"><a id="Параметры" name="Параметры">Параметры</a></h3> + +<dl> + <dt><code>name</code></dt> + <dd>Имя функции. Может быть опущено, в таком случае функция является <em>анонимной</em>. Имя функции является локальным для её тела.</dd> + <dt><code>paramN</code></dt> + <dd>Имя аргумента, передаваемого в функцию.</dd> + <dt><code>statements</code></dt> + <dd>Инструкции, составляющие тело функции.</dd> +</dl> + +<h2 id="Description" name="Description">Описание</h2> + +<p>Функциональное выражение и <a href="/ru/docs/Web/JavaScript/Reference/Statements/function">объявление функции</a> очень похожи и имеют почти одинаковый синтаксис. Главным отличием между ними является <em>имя функции,</em> которое в случае функциональных выражений может быть опущено для создания <em>анонимных</em> функций. Функциональное выражение может быть использовано для создания самовызывающейся функции {{Glossary("IIFE")}} (Immediately Invoked Function Expression), которая исполняется сразу же после того, как она была определена. Более подробная информация изложена в разделе о <a href="/ru/docs/Web/JavaScript/Reference/Functions">функциях</a>.</p> + +<h3 id="Поднятие_функциональных_выражений_2"><a id="Поднятие_функциональных_выражений" name="Поднятие_функциональных_выражений">Поднятие функциональных выражений</a></h3> + +<p>Функциональные выражения в JavaScript не {{Glossary("поднятие", "поднимаются (hoisting)")}}, в отличие от {{jsxref("Statements/function", "объявленных функций", "#Поднимание_объявленной_функции")}}. Вы не можете использовать функциональные выражения прежде, чем вы их определили.</p> + +<pre class="brush: js">console.log(notHoisted) // undefined +//Хотя объявленная переменная и поднимается, определение переменной происходит позже +notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +};</pre> + +<h3 id="Именованное_функциональное_выражение"><a id="№Именованное функциональное выражение" name="№Именованное функциональное выражение">Именованное функциональное выражение</a></h3> + +<p>Если вы хотите сослаться на текущую функцию внутри тела этой функции, вам необходимо создать именованое функциональное выражение. Данное имя будет локальным только для тела функции (её области видимости). Кроме того, это позволяет избежать использования нестандартного свойства {{jsxref("arguments.callee")}}.</p> + +<pre class="brush: js">var math = { + 'factit': function factorial(n) { + console.log(n); + if (n <= 1) { + return 1; + } + return n * factorial(n - 1); + } +}; + +math.factit(3) //3;2;1; +</pre> + +<p>Переменная, которой присвоено функциональное выражение, будет иметь свойство <code>name</code>, содержащее имя функции. Оно не изменится при переприсваивании другой переменной. Для анонимной функции, значением свойства <code>name</code> будет имя переменной (неявное имя). Если же имя задано, то будет использовано имя функции (явное имя). Это же касается стрелочных функций (в их случае там будет записано имя переменной, т.к. они всегда анонимные).</p> + +<pre class="brush: js">var foo = function() {} +foo.name // "foo" + +var foo2 = foo +foo2.name // "foo" + +var bar = function baz() {} +bar.name // "baz" + +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (errors because baz == undefined)</pre> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Следующий пример демонстрирует создание безымянной (анонимной) функции и присвоение её переменной <code>x</code>. Функция возвращает квадрат переданного значения:</p> + +<pre class="brush: js">var x = function (y) { + return y * y; +}; +</pre> + +<p>Преимущественно анонимные функции используются как {{Glossary("функция обратного вызова", "функции обратного вызова", 1)}}.</p> + +<pre class="brush: js">button.addEventListener('click', function(event) { + console.log('button is clicked!') +});</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>Изначальное определение. Реализовано в JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/function_star_/index.html b/files/ru/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..c924d55dfe --- /dev/null +++ b/files/ru/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,149 @@ +--- +title: function* expression +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript6 + - JavaScript + - Итератор + - Оператор + - Функция +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключевое слово <strong><code>function*</code></strong> может использоваться для объявления функции-генератора внутри выражения.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function* [<em>имя</em>]([параметр<em>1</em>[, <em>параметр2[</em>, ..., <em>параметрN</em>]]]) { + <em>инструкции</em> +}</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>имя</code></dt> + <dd>Имя функции. Может быть опущено, в этом случае функция будет <em>анонимной</em>. Имя локально для тела функции.</dd> + <dt><code>параметрN</code></dt> + <dd>Имя аргумента, передаваемого в функцию. Фунция может иметь до 255 аргументов.</dd> + <dt><code>инструкции</code></dt> + <dd>Инструкции, составляющие тело функции.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Выражение<code> function*</code> очень похоже на обявление {{jsxref('Statements/function*', 'function*')}}, и имеет почти такой же синтаксис. Основная разница между выражением <code>function*</code> и объявлением <code>function*</code> – в <em>имени функции,</em> которое может быть опущено в выражениях <code>function*</code> для создания <em>анонимных</em> функций. Смотрите главу о <a href="/ru/docs/Web/JavaScript/Reference/Functions">функциях</a> для получения более подробной информации.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>В следующем примере определяется безымянная функция-генератор и присваивается переменной <code>x</code>. Функция возвращает квадрат своего аргумента:</p> + +<pre class="brush: js">var x = function*(y) { + yield y * 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('ES6', '#', 'function*')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Изначальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</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>Характеристика</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>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>Объект {{jsxref("GeneratorFunction")}}</li> + <li><a href="/ru/docs/Web/JavaScript/Reference/Iteration_protocols#Протокол_Итератор">Протоколы перебора: Итератор</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>Объект {{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions", "Функции")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/generator_comprehensions/index.html b/files/ru/web/javascript/reference/operators/generator_comprehensions/index.html new file mode 100644 index 0000000000..fb04526d8a --- /dev/null +++ b/files/ru/web/javascript/reference/operators/generator_comprehensions/index.html @@ -0,0 +1,229 @@ +--- +title: Упрощенный синтаксис создания функций-генераторов +slug: Web/JavaScript/Reference/Operators/Generator_comprehensions +tags: + - Итераторы +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +<div class="warning"><strong>Не в стандарте. Не используйте!</strong><br> +Включения генераторов - нестандартная возможность, и вряд ли когда-либо появится в ECMAScript. В будущем попробуйте использовать {{jsxref("Statements/function*", "generator", "", 1)}}.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<div>Синтаксис <strong>включений генераторов </strong>- это выражение, которое позволяет быстро создать новую функцию-генератор из существующего итератора. Включения присутствуют во множестве языков программирования.</div> + +<div> </div> + +<div><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions">Ниже</a> показаны отличия от старого синтаксиса генераторных выражений в SpiderMonkey, основанных на предложениях к стандарту ECMAScript 4.</div> + +<div> </div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">(for (x of iterable) x) +(for (x of iterable) if (condition) x) +(for (x of iterable) for (y of iterable) x + y) +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Внутри включений генераторов допустимы два типа компонентов:</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} и</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>Конструкция <code>for-of</code> всегда идёт первой. Таких конструкций может быть несколько.</p> + +<p>Существенный недостаток {{jsxref("Operators/Array_comprehensions","включений массивов","","true")}} - это то, что они создают полносью новый массив в памяти. Даже когда исходный массив небольшой, накладные расходы получаются весьма заметными, а уж когда входные данные - это большой массив или дорогой (или бесконечный) генератор, создание нового массива может быть трудной задачей.</p> + +<p>Генераторы позволяют выполнять ленивые вычисления последовательностей, то есть рассчитывать данные только тогда, когда они нужны. Синтаксисы включений генераторов и включений массивов практически аналогичны — первые используют () вместо [] — но вместо массива они создают генератор, который может выполняться лениво. Включения генераторов можно считать просто более кратким способом создания генераторов.</p> + +<p>Предположим, у нас есть итератор <code>it</code>, который итерирует по длинной последовательности чисел. Мы хотим создать новый итератор, который будет итерировать по тем же числам, умноженным на два. Включение массивов создало бы в памяти новый массив с умноженными числами:</p> + +<pre class="brush: js">var doubles = [for (i in it) i * 2]; +</pre> + +<p>А включение генераторов создало бы новый итератор, который высчитывал бы следующее умноженное значение, когда оно нужно:</p> + +<pre class="brush: js">var it2 = (for (i in it) i * 2); +console.log(it2.next()); // Первое значение из it, умноженное на два +console.log(it2.next()); // Второе значение из it, умноженное на два +</pre> + +<p>Когда включение генераторов передаётся как аргумент функции, можно обойтись без скобок вокруг включения:</p> + +<pre class="brush: js">var result = doSomething(for (i in it) i * 2); +</pre> + +<p>Эти два примера отличаются тем, что используя включения генераторов, нам нужно пройтись по структуре объекта только однажды, а используя включения массивов - дважды: сначала при создании включения, затем, при самой итерации.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простое_включение_генераторов">Простое включение генераторов</h3> + +<pre class="brush:js">(for (i of [ 1, 2, 3 ]) i*i ); +// Функция-генератор, которая отдаёт 1, 4, 9 и так далее + +[...(for (i of [ 1, 2, 3 ]) i*i )]; +// [1, 4, 9] + +var abc = [ "A", "B", "C" ]; +(for (letters of abc) letters.toLowerCase()); +// Функция-генератор, которая отдаёт 'a', 'b' и 'c' +</pre> + +<h3 id="Включение_генераторов_с_условием">Включение генераторов с условием</h3> + +<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ]; + +(for (year of years) if (year > 2000) year); +// функция-генератор, которая отдаёт 2006, 2010 и 2014 + +(for (year of years) if (year > 2000) if(year < 2010) year); +// функция-генератор, которая отдаёт 2006, как и функция ниже: + +(for (year of years) if (year > 2000 && year < 2010) year); +// функция-генератор, которая отдаёт 2006 +</pre> + +<h3 id="Включение_генератора_в_сравнении_с_функцией-генератором">Включение генератора в сравнении с функцией-генератором</h3> + +<p>Будет проще понять синтаксис включений генераторов, если сравнить его с функцией-генератором.</p> + +<p>Пример 1: Простой генератор.</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; + +// Функция-генератор +(function*() { + for (let i of numbers) { + yield i * i; + } +})() + +// Включение генератора +(for (i of numbers) i*i ); + +// Результат: в обоих случаях получается генератор, который отдаёт [ 1, 4, 9 ] +</pre> + +<p>Пример 2: Использование <code>if</code> в генераторе.</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; + +// Функция-генератор +(function*() { + for (let i of numbers) { + if (i < 3) { + yield i * 1; + } + } +})() + +// Включение генератора +(for (i of numbers) if (i < 3) i); + +// Результат: в обоих случаях получается генератор, который отдаёт [ 1, 2 ]</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<p>Включения генераторов изначально входили в черновик ECMAScript 6, но их убрали в ревизии 27 (August 2014). Please see older revisions of ES6 for specification semantics.</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>Начальная поддержка</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("30") }}</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>Начальная поддержка</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Особенности_реализации_в_SpiderMonkey">Особенности реализации в SpiderMonkey</h2> + +<ul> + <li>Нельзя использовать {{jsxref("Statements/let", "let")}}, потому что она доступна только в JS версии 1.7 и тэгах XUL.</li> + <li>Деструктуризация во включениях пока не поддерживается ({{bug(980828)}}).</li> +</ul> + +<h2 id="Отличия_от_старых_JS1.7JS1.8_включений">Отличия от старых JS1.7/JS1.8 включений</h2> + +<div class="warning">JS1.7/JS1.8 включения убраны из Gecko 46 ({{bug(1220564)}}).</div> + +<p><strong>Старый синтаксис включений (не используйте!):</strong></p> + +<pre class="brush: js example-bad">(X for (Y in Z)) +(X for each (Y in Z)) +(X for (Y of Z)) +</pre> + +<p>Отличия:</p> + +<ul> + <li>Включения в ES7 создают отдельную область видимость для каждой итерации <code>for</code>, вместо одной области для всего включения: + + <ul> + <li>Старые: <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>Новые: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, each iteration creates a fresh binding for x. </code></li> + </ul> + </li> + <li>Включения в ES7 начинаются с <code>for</code> вместо выражения присваивания: + <ul> + <li>Старые: <code>(i * 2 for (i of numbers))</code></li> + <li>Новые: <code>(for (i of numbers) i * 2)</code></li> + </ul> + </li> + <li>Включения в ES7 могут содержать несколько <code>if</code> и <code>for</code>.</li> + <li>Включения в ES7 работают только с итерациями <code>{{jsxref("Statements/for...of", "for...of")}}</code>, но не с <code>{{jsxref("Statements/for...in", "for...in")}}</code></li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Array_comprehensions", "Array comprehensions")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/in/index.html b/files/ru/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..35ee2c4620 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/in/index.html @@ -0,0 +1,136 @@ +--- +title: in operator +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Оператор + - Оператор отношения +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор <code>in</code></strong> возвращает <code>true</code>, если свойство содержится в указанном объекте или в его цепочке прототипов.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>prop</em> in <em>object</em></pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Строка или symbol, представляющий название свойства или индекс массива (non-symbols будут конвертированы в строки).</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>Объект, в котором нужно проверить содежание свойства с заданным именем.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>В примере ниже показаны некоторые способы использования оператора <code>in</code>.</p> + +<pre class="brush:js">// Массивы +var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +0 in trees // true +3 in trees // true +6 in trees // false +"bay" in trees // false (вы должны указать индекс элемента в массиве, а не значение в этом индексе) +"length" in trees // true (length является свойством Array) + +// Уже существующие объекты +"PI" in Math // true + +// Пользовательские объекты +var mycar = {make: "Honda", model: "Accord", year: 1998}; +"make" in mycar // true +"model" in mycar // true +</pre> + +<p>Вы должны указать объект справа от оператора <code>in</code>. Например, вы можете указать строку, созданную через конструктор объекта <code>String</code>, но вы не можете указать строковый литерал.</p> + +<pre class="brush:js">var color1 = new String("green"); +"length" in color1 // returns true + +var color2 = "coral"; +// сгенерирует ошибку (color2 is not a String object) +"length" in color2 +</pre> + +<h3 id="Использование_оператора_in_с_неопределенными_или_с_уже_удаленными_свойствами">Использование оператора <code>in</code> с неопределенными или с уже удаленными свойствами</h3> + +<p>Если вы удалили свойство при помощи оператора <code style="font-style: normal;"><a href="/ru/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code>, то оператор <code>in</code> возвратит <code>false</code> для этого свойства.</p> + +<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998}; +delete mycar.make; +"make" in mycar; // false + +var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +delete trees[3]; +3 in trees; // false +</pre> + +<p>Если вы зададите свойству значение {{jsxref("Global_Objects/undefined", "undefined")}}, но не удалите его, то для этого свойства оператор <code>in</code> вернет значение <code>true</code>.</p> + +<pre class="brush:js">var mycar = {make: "Honda", model: "Accord", year: 1998}; +mycar.make = undefined; +"make" in mycar; // true +</pre> + +<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple"); +trees[3] = undefined; +3 in trees; // returns true +</pre> + +<h3 id="Наследуемые_свойства">Наследуемые свойства</h3> + +<p>Оператор <code>in</code> возвратит <code>true</code> для свойств, которые унаследованы по цепочке прототипов. (Если вы хотите проверить только не наследованные свойства, используйте {{jsxref("Object.prototype.hasOwnProperty()")}}.)</p> + +<pre class="brush:js">"toString" in {}; // true +</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-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Определено изначально. Реализовано в JavaScript 1.4</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.operators.in")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/index.html b/files/ru/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..eff74ba579 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/index.html @@ -0,0 +1,291 @@ +--- +title: Выражения и операторы +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Эта глава описывает все операторы, выражения и ключевые слова языка JavaScript.</p> + +<h2 id="Expressions_and_operators_by_category" name="Expressions_and_operators_by_category">Выражения и операторы по категориям</h2> + +<p>Алфавитный список смотрите в боковой панели слева.</p> + +<h3 id="Primary_expressions" name="Primary_expressions">Первичные выражения</h3> + +<p>Базовые ключевые слова и общие выражения в JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>Ключевое слово <code>this</code> ссылается на контекст выполняемой функции.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>Ключевое слово <code>function</code> определяет выражение функции.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>Ключевое слово <code>class</code> определяет выражение класса.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>Ключевое слово <code>function*</code> (со звёздочкой) определяет функцию-генератор.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Пауза или продолжение выполнения функции-генератора.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Делегирует выполнение другому генератору итерируемому объекту.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> + <dd><code>async function</code> определяет выражение асинхронной функции.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> + <dd>Пауза и продолжение выполнения асинхронной функции и ожидание <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> (результата выполнения) с результатом разрешено/отклонено.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Синтаксис создания инициализатора/литерала массива.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Синтаксис создания инициализатора/литерала объекта</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Синтаксис создания литерала регулярного выражения.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Оператор группировки.</dd> +</dl> + +<h3 id="Left-hand-side_expressions" name="Left-hand-side_expressions">Левосторонние выражения</h3> + +<p>Значения слева являются назначением присваивания.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Доступ к свойству", "", 1)}}</dt> + <dd>Операторы доступа к членам предоставляют доступ к свойству или методу объекта<br> + (<code>object.property</code> и <code>object['property']</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>Оператор <code>new</code> создаёт экземпляр объекта с использованием конструктора.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>Свойство <code>new.target</code> ссылается на конструктор или функцию, который был вызван через оператор {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>Ключевое слово <code>super</code> вызывает конструктор родительского класса.</dd> + <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>Оператор распространения позволяет развернуть выражение в местах, где ожидается несколько аргументов (при вызове функций) или несколько элементов (при создании литералов массива).</dd> +</dl> + +<h3 id="Increment_and_decrement" name="Increment_and_decrement">Инкремент и декремент</h3> + +<p>Операторы постфиксного/префиксного инкремента и декремента.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Оператор постфиксного инкремента.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Оператор постфиксного декремента.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Оператор префиксного инкремента. <em>(Значение переменной, сначала, увеличивается на 1, а затем используется в выражении)</em></dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Оператор префиксного декремента.</dd> +</dl> + +<h3 id="Unary_operators" name="Unary_operators">Унарные операторы</h3> + +<p>Унарные опарации — это операции с одним операндом.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>Оператор <code>delete</code> удаляет свойство из объекта.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>Оператор <code>void</code> отбрасывает возвращаемое значение выражения.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>Оператор <code>typeof</code> определяет тип переданного объекта.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>Оператор унарного плюса преобразует свой операнд в тип {{jsxref("Global_Objects/Number", "Number")}}.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>Оператор унарного минуса преобразует свой операнд в тип {{jsxref("Global_Objects/Number", "Number")}}, а затем меняет его знак.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Оператор побитового НЕ.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Оператор логического НЕ.</dd> +</dl> + +<h3 id="Arithmetic_operators" name="Arithmetic_operators">Арифметические операторы</h3> + +<p>Арифметические операторы своими операндами принимают числовые значения (литерали или переменные) и возвращают одно числовое значение.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Оператор сложения.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Оператор вычитания.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Оператор деления.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Оператор умножения.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Оператор взятия остатка от деления.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Оператор возведения в степень.</dd> +</dl> + +<h3 id="Relational_operators" name="Relational_operators">Реляционные операторы</h3> + +<p>Реляционные операторы (операторы отношения) сравнивают свои операнды и возвращают значение типа {{jsxref("Global_Objects/Boolean", "Boolean")}}, зависящее от того, был ли результат сравнения истинным или ложным.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>Оператор <code>in</code> определяет, содержит ли объект указанное свойство.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>Оператор <code>instanceof</code> определяет, является ли объект экземпляром потомком Prototype (или экземпляром) другого объекта.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Оператор меньше.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Оператор больше.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Оператор меньше или равно.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Оператор больше или равно.</dd> +</dl> + +<div class="note"> +<p><strong>Заметьте: =></strong> это не оператор. Это нотация для <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочных функций</a>.</p> +</div> + +<h3 id="Equality_operators" name="Equality_operators">Операторы равенства</h3> + +<p>Результат вычисления оператора равенства всегда имеет тип {{jsxref("Global_Objects/Boolean", "Boolean")}} и значение, зависящее от того, был ли результат проверки истинным или ложным.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Оператор проверки на равенство.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Оператор проверки на неравенство.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Оператор проверки на идентичность.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Оператор проверки на неидентичность.</dd> +</dl> + +<h3 id="Bitwise_shift_operators" name="Bitwise_shift_operators">Операторы побитового сдвига</h3> + +<p>Операции для сдвига всех битов операнда.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Оператор побитового сдвига влево.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Оператор знакового побитового сдвига вправо.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Оператор беззнакового побитового сдвига вправо.</dd> +</dl> + +<h3 id="Binary_bitwise_operators" name="Binary_bitwise_operators">Бинарные побитовые операторы</h3> + +<p>Побитовые операторы трактуют свои операнды как набор из 32 битов (нулей и единиц) и возвращают стандартные числовые значения JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Оператор побитового И.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Оператор побитового ИЛИ.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Оператор побитового ИСКЛЮЧАЮЩЕГО ИЛИ.</dd> +</dl> + +<h3 id="Binary_logical_operators" name="Binary_logical_operators">Бинарные логические операторы</h3> + +<p>Логические операторы обычно используются вместе с булевыми (логическими) значениями и в сочетании с ними они возвращают булево значение.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Оператор логического И.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Оператор логического ИЛИ.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator" name="Conditional_(ternary)_operator">Условный (тернарный) оператор</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(условие ? ifTrue : ifFalse)")}}</dt> + <dd>Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия.</dd> +</dl> + +<h3 id="Assignment_operators" name="Assignment_operators">Операторы присваивания</h3> + +<p>Операторы присваивания присваивают значение своему левому операнду, зависящее от значения их правого операнда.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Оператор присваивания.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Оператор присваивания с умножением.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Оператор присваивания с делением.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Оператор присваивания с взятием остатка от деления.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Оператор присваивания со сложением.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Оператор присваивания с вычитанием.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Оператор присваивания со сдвигом влево.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Оператор присваивания со знаковым сдвигом вправо.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Оператор присваивания с беззнаковым сдвигом вправо.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Оператор присваивания с побитовым И.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Оператор присваивания с побитовым ИСКЛЮЧАЮЩИМ ИЛИ.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Оператор присваивания с побитовым ИЛИ.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd>Деструктурирующее присваивание позволяет вам присваивать свойства массива или объекта переменным с использованием синтаксиса, очень похожего на объявление литералов массива или объекта.</dd> +</dl> + +<h3 id="Comma_operator" name="Comma_operator">Оператор запятая</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>Оператор запятая позволяет вычислять несколько выражений в одном операторе и возвращает результат вычисления последнего выражения.</dd> + <dt> + <h3 id="Нестандартные_особенности">Нестандартные особенности</h3> + </dt> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>Ключевое слово <code>function</code> может быть использовано для определения устаревших функций-генераторов в одном выражении. Для того, чтобы сделать такую функцию, её тело должно содержать хотя бы одно выражение {{jsxref("Operators/yield", "yield")}}.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>Синтаксис закрытого выражения для сокращённого написания простейших функций.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Упрощённый синтаксис создания массива.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</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>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Новое: Оператор распространения, деструктурирующее присваивание, ключевое слово <code>super</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Смотрите также</h2> + +<ul> + <li>{{jsxref("Operators/Operator_Precedence", "Приоритеты операторов", "", 1)}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/instanceof/index.html b/files/ru/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..81676c6bf5 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,165 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Relational Operators + - instanceof + - Объект + - Оператор + - прототип +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор <strong><code>instanceof</code> </strong>проверяет, принадлежит ли объект к определённому классу. Другими словами, <code>object instanceof constructor</code><em> </em>проверяет, присутствует ли объект <code>constructor.prototype</code> в цепочке прототипов <code>object</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Проверяемый объект.</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Функция-конструктор, на которую идёт проверка.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Оператор <code>instanceof</code> проверяет, присутствует ли объект <code>constructor.prototype</code> в цепочке прототипов <code>object</code>.</p> + +<pre class="brush: js">// объявляем конструкторы +function C() {} +function D() {} + +var o = new C(); + +// true, так как: Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, так как D.prototype не присутствует в цепочке прототипов o +o instanceof D; + +o instanceof Object; // true, так как: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, так как C.prototype отсутствует в цепочке прототипов o +o instanceof C; + +D.prototype = new C(); // add C to [[Prototype]] linkage of D +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true, так как C.prototype теперь присутствует в цепочке прототипов o3 +</pre> + +<p>Обратите внимание: результат оператора <code>instanceof</code> зависит от свойства <code>constructor.prototype</code>, поэтому результат оператора может поменяться после изменения этого свойства. Также результат может поменяться после изменения прототипа <code>object</code> (или цепочки прототипов) с помощью <code>Object.setPrototypeOf</code> или нестандартного свойства <code>__proto__</code>.</p> + +<h3 id="instanceof_и_множественные_контексты_(например_фреймы_или_окна)"><code>instanceof</code> и множественные контексты (например, фреймы или окна)</h3> + +<p>Различные контексты имеют разные среды выполнения. Это означает, что они имеют различныые built-ins (разный глобальный объект, различные конструкторы и т.д.). Это может давать неожиданные результаты. Например, <code>[] instanceof window.frames[0].Array</code> вернёт <code>false</code>, потому что <code>Array.prototype !== </code><code>window.frames[0].Array</code> а массив наследуется от <code>Array</code>.</p> + +<p>Это может казаться несущественной проблемой сначала, но при работе с несколькими фреймами или окнами, и передачи объектов из одного контекста в другой с помощью функций, это может стать серьёзной проблемой. С другой стороны, безопасно проверить, является ли некоторый объект массивом можно используя <code>Array.isArray(myObj)</code>.</p> + +<p>Например, для проверки того, что <a href="/ru/docs/Web/API/Node">Node</a> является <a href="/ru/docs/Web/API/SVGElement">SVGElement</a> в разных контекстах можно использовать <code>myNode instanceof myNode.ownerDocument.defaultView.SVGElement</code>.</p> + +<div class="note"><strong>Замечания для разработчиков Mozilla:</strong><br> +Использование XPCOM <code>instanceof</code> в коде имеет специальный эффект: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (например <code>Components.interfaces.nsIFile</code>) вызывает <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> и возвращает <code>true</code> если проверка на QueryInterface прошла успешно. Побочным эфектом этого вызова является то, что можно использовать свойства <em><code>xpcomInterface</code></em> на <code>obj</code> после успешной проверки с помощью <code>instanceof</code>. В отличии от стандартных глобальных JavaScript типов, проверка <code>obj instanceof xpcomInterface</code> работает как ожидается, даже если <code>obj</code> отнсится к другому контексту.</div> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Показывает_что_String_и_Date_имеют_тип_Object_и_граничные_случаи">Показывает, что <code>String</code> и <code>Date</code> имеют тип <code>Object</code> и граничные случаи</h3> + +<p>Следующий код использует <code>instanceof</code>, чтобы показать что объекты <code>String</code> и <code>Date</code> также имеют тип <code>Object</code> (они являются наследниками <code>Object</code>).</p> + +<p>Однако, объекты, созданные с помощью литералов, являются исключениями — хотя их prototype равен <code>undefined</code>, выражение <code>instanceof Object</code> возвращает <code>true</code>.</p> + +<pre class="brush: js">var simpleStr = 'Это обычная строка'; +var myString = new String(); +var newStr = new String('Строка, созданная с помощью конструктора'); +var myDate = new Date(); +var myObj = {}; + +simpleStr instanceof String; // возвращает false, проверяет цепочку прототипов +myString instanceof String; // возвращает true +newStr instanceof String; // возвращает true +myString instanceof Object; // возвращает true + +myObj instanceof Object; // возвращает true, несмотря на прототип, равный undefined +({}) instanceof Object; // возвращает true, аналогично предыдущей строчке + +myString instanceof Date; // возвращает false + +myDate instanceof Date; // возвращает true +myDate instanceof Object; // возвращает true +myDate instanceof String; // возвращает false +</pre> + +<h3 id="Показывает_что_mycar_имеет_тип_Car_и_тип_Object">Показывает, что <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code></h3> + +<p>Следующий код создает тип <code>Car</code> и экземпляр этого типа, <code>mycar</code>. Оператор <code>instanceof</code> показывает, что объект <code>mycar</code> имеет тип <code>Car</code> и тип <code>Object</code>.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car('Honda', 'Accord', 1998); +var a = mycar instanceof Car; // возвращает true +var b = mycar instanceof Object; // возвращает true +</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-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Изначальное определение. Реализована в JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("javascript.operators.instanceof")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/new.target/index.html b/files/ru/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..bab9b8e956 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,137 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<div>Свойство <strong><code>new.target</code></strong> позволяет определить была ли функция или конструктор вызваны с помощью оператора <a href="/ru/docs/Web/JavaScript/Reference/Operators/new">new</a>. В конструкторах и функциях инстанциированных с помощью оператора <a href="/ru/docs/Web/JavaScript/Reference/Operators/new">new</a>, <code>new.target</code> возвращает ссылку на конструктор или функцию. При обычном вызове функции <code>new.target</code> имеет значение {{jsxref("undefined")}}.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Описание">Описание</h2> + +<p>Синтаксис <code>new.target</code> состоит из ключевого слова<code>"new</code>", точки, и свойства<code> "target"</code>. Обычно "<code>new."</code> служит контекстом для доступа к свойству, но здесь <code>"new."</code> не совсем объект. Однако при вызове конструктора, <code>new.target</code> ссылается на конструктор вызванный с помощью <code>new</code> и таким образом "<code>new.</code>" становится виртуальным контекстом.</p> + +<p>Свойство <code>new.target</code> это мета свойство которое доступно во всех функциях. В <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">стрелочных функция</a>, <code>new.target</code> ссылается на <code>new.target</code> внешней функции.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="new.target_в_вызове_функции">new.target в вызове функции</h3> + +<p>При обычном вызове функции (в противоположность вызову в качестве конструктора), <code>new.target</code> имеет значение {{jsxref("undefined")}}. Это позволяет определить была ли вызвана функция как конструктор через <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> или нет.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw "Foo() must be called with new"; + console.log("Foo instantiated with new"); +} + +new Foo(); // выведет "Foo instantiated with new" +Foo(); // ошибка "Foo() must be called with new" +</pre> + +<h3 id="new.target_в_конструкторе">new.target в конструкторе</h3> + +<p>В конструкторе класса, <code>new.target</code> ссылается на конструктор, который был непосредственно вызван <code>new</code>. Это верно и для случая, когда <code>new.target</code> находится в конструкторе родительского класса, а тот в свою очередь вызывается из конструктора дочернего класса.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // вернет "A" +var b = new B(); // вернет "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('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Изначальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</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>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoDesktop(41)}}</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>Возможность</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>Базовая поддержка</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/new/index.html b/files/ru/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..ce21bd41c1 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/new/index.html @@ -0,0 +1,217 @@ +--- +title: Оператор new +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Левосторонние выражения + - Оператор +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор </strong>(операторная функция)<strong> <code>new</code></strong> создает экземпляр объекта, встроенного или определенного пользователем, имеющего конструктор.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>constructor</code></dt> + <dd>Функция, задающая тип объекта.</dd> +</dl> + +<dl> + <dt><code>arguments</code></dt> + <dd>Список параметров, с которыми будет вызван конструктор.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Создание объекта, определенного пользователем, требует два шага:</p> + +<ol> + <li>Написать функцию, которая задаст тип объекта.</li> + <li>Создать экземпляр объекта, используя <code>new</code>.</li> +</ol> + +<p>Чтобы определить новый тип объекта, создайте функцию, которая задаст его и имя и свойства. Свойство объекта также может быть объектом. Примеры приведены ниже.</p> + +<p>Когда исполняется <code>new <em>Foo</em>(...)</code> , происходит следующее:</p> + +<ol> + <li>Создается новый объект, наследующий <code><em>Foo</em>.prototype.</code></li> + <li>Вызывается конструктор — функция <code><em>Foo</em></code> с указанными аргументами и <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>, привязанным к только что созданному объекту</code>. <code>new F<em>oo</em></code> эквивалентно <code>new </code><em>F<code>oo</code></em><code>()</code>, то есть если аргументы не указаны, Foo вызывается без аргументов.</li> + <li>Результатом выражения new становится объект, возвращенный конструктором. Если конструктор не возвращет объект явно, используется объект из п. 1. (Обычно конструкторы не возвращают значение, но они могут делать это, если нужно переопределить обычный процесс создания объектов.)</li> +</ol> + +<p>Всегда можно добавить свойство к уже созданному объекту. Например, <code>car1.color = "black"</code> добавляет свойство <code>color</code> к объекту <code>car1</code>, и присваивает ему значение "<code>black</code>". Это не затрагивает другие объекты. Чтобы добавить свойство ко всем объектам типа, нужно добавлять его в определение типа Car.</p> + +<p>Добавить свойство к ранее определенному типу можно используя свойство <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Это определит свойство для всех объектов, созданных этой функцией, а не только у какого-либо экземпляра. Следующий пример добавляет свойство color со значениеи <code>null</code> всем объектам типа <code>car</code>, а потом меняет его на "<code>black</code>" только у экземпляра <code>car1</code>. Больше информации в статье <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> + +<pre class="brush: js">function Car() {} +car1 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = null; +console.log(car1.color); // null + +car1.color = "black"; +console.log(car1.color); // black +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Тип_объекта_и_экземпляры_объекта">Тип объекта и экземпляры объекта</h3> + +<p>Предположим, нам нужен тип объекта для автомобилей. Этот тип должен называться <code>car</code>, и иметь свойства: марка, модель и год.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Теперь можно создать экземпляр типа car:</p> + +<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993); +</pre> + +<p>Это выражение создает экземпляр <code>mycar</code> и присваевает его свойствам указанные значения. Таким образом, <code>mycar.make</code> принимает значение "Eagle", <code>mycar.year</code> принимает значение 1993, и так далее.</p> + +<p>Можно создать любое количество экземпляров <code>car</code> с помощью оператора <code>new</code>. Например:</p> + +<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992); +</pre> + +<h3 id="Объект_в_качестве_свойства">Объект в качестве свойства</h3> + +<p>Предположим, есть объект <code>person</code>:</p> + +<pre class="brush: js">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>Создадим два экземпляра:</p> + +<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M"); +var ken = new Person("Ken Jones", 39, "M"); +</pre> + +<p>Изменим определение <code>car</code>, добавив свойство, указывающее владельца — <code>owner</code>:</p> + +<pre class="brush: js">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Создадим экземпляры car:</p> + +<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand); +var car2 = new Car("Nissan", "300ZX", 1992, ken); +</pre> + +<p>Вместо строковых или численных значений можно передать обект как параметр. Чтобы узнать имя владельца <code>car2</code>, получим доступ к свойству:</p> + +<pre class="brush: js">car2.owner.name +</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-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</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("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..71484f05a1 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,144 @@ +--- +title: Оператор нулевого слияния +slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p><strong>Оператор нулевого слияния (<code>??</code>)</strong> это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно {{jsxref("null")}} или {{jsxref("undefined")}}, в противном случае будет возвращено значение левого операнда.</p> + +<p>В отличие от <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%98%D0%9B%D0%98">логического ИЛИ (<code>||</code>)</a>, левая часть оператора вычисляется и возвращается даже если его результат после приведения к логическому типу оказывается<em> <a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5">ложным</a></em>, но не является <code>null</code> или <code>undefined</code>. Другими словами, если вы используете <code>||</code> чтобы установить значение по умолчанию, вы можете столкнуться с неожиданным поведением если считаете некоторые <em>ложные</em> значения пригодными для использования (например, "" или 0). Ниже приведены примеры.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p class="hidden">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.<br> + See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var> +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Использование_оператора_нулевого_слияния">Использование оператора нулевого слияния</h3> + +<p>В этом примере показано как устанавливать значения по умолчанию, оставив в покое значения отличные от <code>null</code> или <code>undefined</code>.</p> + +<pre class="brush: js notranslate">const nullValue = null; +const emptyText = ""; // falsy +const someNumber = 42; + +const valA = nullValue ?? "default for A"; +const valB = emptyText ?? "default for B"; +const valC = someNumber ?? 0; + +console.log(valA); // "default for A" +console.log(valB); // "" (так как пустая строка не null или undefined) +console.log(valC); // 42</pre> + +<h3 id="Значение_по_умолчанию_в_присваивании_переменной">Значение по умолчанию в присваивании переменной</h3> + +<p>Ранее, для присваивания значения по умолчанию переменной использовался оператор логического ИЛИ (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>):</p> + +<pre class="brush: js notranslate">let foo; + +// переменной foo никогда не присваивалось значение, поэтому она undefined +let someDummyText = foo || 'Hello!';</pre> + +<p>Однако, оператор <code>||</code> это логический оператор, левый операнд которого при сравнении неявно приводится к булевому значению, поэтому любое <em>ложное</em> значение (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не возвращается. Данное поведение может быть нежелательным если вы рассматриваете <code>0</code>, <code>''</code>, или <code>NaN</code> как корректные значения.</p> + +<pre class="brush: js notranslate">let count = 0; +let text = ""; + +let qty = count || 42; +let message = text || "hi!"; +console.log(qty); // 42 and not 0 +console.log(message); // "hi!" and not "" +</pre> + +<p>Оператор нулевого слияния предотвращает попадание в такую ловушку, возвращая второй операнд если первый оказывается <code>null</code> or <code>undefined</code> (но не любым другим <em>ложным</em> значением):</p> + +<pre class="brush: js notranslate">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу) + +let notFalsyText = myText || 'Hello world'; +console.log(notFalsyText); // Hello world + +let preservingFalsy = myText ?? 'Hi neighborhood'; +console.log(preservingFalsy); // '' (так как myText не undefined и не null) +</pre> + +<h3 id="Синтаксическое_сокращение">Синтаксическое сокращение</h3> + +<p>Так же как при использовании логического И и ИЛИ, правое выражение не вычисляется если найдено подходящее значение в левом.</p> + +<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;} +function B() { console.log('B was called'); return false;} +function C() { console.log('C was called'); return "foo";} + +console.log( A() ?? C() ); +// выводит "A was called", затем "C was called", и затем "foo" +// так как A() возвращает undefined, поэтому оба выражения вычисляются + +console.log( B() ?? C() ); +// выводит "B was called", затем "false" +// так как B() возвращает false (но не null или undefined), правое +// выражение не вычисляется +</pre> + +<h3 id="Не_объединяется_с_И_или_ИЛИ_операторами">Не объединяется с И или ИЛИ операторами</h3> + +<p>Нельзя напрямую объединять И (<code>&&</code>) и ИЛИ (<code>||</code>) операторы с <code>??</code>. При таком выражении будет выброшен <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p> + +<pre class="brush: js example-bad notranslate">null || undefined ?? "foo"; // выбрасывает SyntaxError +true || undefined ?? "foo"; // выбрасывает SyntaxError</pre> + +<p>Однако, при заключении в скобки выражение является корректным:</p> + +<pre class="brush: js example-good notranslate">(null || undefined) ?? "foo"; // returns "foo" +</pre> + +<h3 id="Отношение_к_оператору_опциональной_последовательности_.">Отношение к оператору опциональной последовательности (<code>?.</code>)</h3> + +<p>Оператор нулевого слияния определяет <code>undefined</code> и <code>null</code> как специальные значения так же как и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор опциональной последовательности (<code>?.</code>)</a>, который используется для доступа к свойствам объекта, значение которого может быть <code>null</code> или <code>undefined</code>.</p> + +<pre class="brush: js notranslate">let foo = { someFooProp: "hi" }; + +console.log(foo.someFooProp?.toUpperCase()); // "HI" +console.log(foo.someBarProp?.toUpperCase()); // undefined +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="Прогресс_реализации">Прогресс реализации</h3> + +<p>В следующей таблице приведено ежедневное состояние реализации этой функции, поскольку эта функция еще не достигла стабильности в разных браузерах. Данные генерируются путем запуска соответствующих тестов функциональности в <a href="https://github.com/tc39/test262">Test262</a>, стандартном наборе тестов JavaScript, в ночной сборке или в последней версии движка JavaScript каждого браузера.</p> + +<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор опциональной последовательности</a></li> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%98%D0%9B%D0%98">Логическое ИЛИ (<code>||</code>)</a></li> + <li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/object_initializer/index.html b/files/ru/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..c7172a0c03 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,431 @@ +--- +title: Инициализация объектов +slug: Web/JavaScript/Reference/Operators/Object_initializer +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +<div>{{JsSidebar("Операторы")}}</div> + +<p>Объекты могут быть инициализированы с помощью <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> </code>или <em>литеральной</em> (<em>инициирующей</em>) нотации. Инициализатор объекта это разделенный запятыми список ноль или более пар имен свойств и ассоциируемых с ними значений, заключенных в фигурные скобки (<code>{}</code>).</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js">var o = {}; +var o = {a: 'foo', b: 42, c: {}}; + +var a = 'foo', b = 42, c = {}; +var o = {a: a, b: b, c: c}; + +var o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h3 id="Новая_нотация_в_ECMAScript_2015">Новая нотация в ECMAScript 2015</h3> + +<p>Пожалуйста, просмотрите таблицу поддержки этих нотаций. В неподдерживаемом окружении, эти нотации приведут к синтаксической ошибке.</p> + +<pre class="brush: js">// Сокращение имен свойств (ES2015) +var a = 'foo', b = 42, c = {}; +var o = {a, b, c}; + +// Сокращение имен методов (ES2015) +var o = { + <var>property</var>([<var>parameters</var>]) {} +}; + +// Вычисление имен свойств (ES2015) +var prop = 'foo'; +var o = { + [prop]: 'hey', + ['b' + 'ar']: 'there' +};</pre> + +<h2 id="Описание">Описание</h2> + +<p>Инициализатор объекта это выражение, которое описывает инициализацию {{jsxref("Object")}}. Объекты состоят из <em>свойств</em>, которые используются для описания объекта. Значения свойств объектов могут содержать как {{Glossary("примитивные")}} типы данных, так и другие объекты.</p> + +<h3 id="Создание_объектов">Создание объектов</h3> + +<p>Пустой объект без свойств может быть создан следующим образом:</p> + +<pre class="brush: js">var object = {};</pre> + +<p>Однако, преимущество <em>литеральной</em> или <em>инициирующей</em> нотации это возможность быстро создавать объекты со свойствами внутри фигурных скобок. Создается простой список пар <code>ключ: значение</code>, разделенных запятой. Следующий код создает объект с тремя парами значений и ключи это <code>"foo"</code>, <code>"age"</code> и <code>"baz"</code>. Значения этих ключей строка <code>"bar"</code>, число <code>42</code> и другой объект.</p> + +<pre class="brush: js">var object = { + foo: 'bar', + age: 42, + baz: {myProp: 12} +}</pre> + +<h3 id="Доступность_свойств">Доступность свойств</h3> + +<p>После того, как создали объект, вы, вероятно, захотите прочитать или изменить его. Свойства объектов могут быть получены при помощи точечной нотации или квадратных скобок. Смотрите <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> для детальной информации.</p> + +<pre class="brush: js">object.foo; // "bar" +object['age']; // 42 + +object.foo = 'baz'; +</pre> + +<h3 id="Определение_свойств">Определение свойств</h3> + +<p>Мы уже рассмотрели, как объявить свойства, используя синтаксис инициализации. Зачастую, в коде появляются свойства, которые вы захотите поместить в объект. Вы увидете следующий код:</p> + +<pre class="brush: js">var a = 'foo', + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +};</pre> + +<p>С ECMAScript 2015 появилась короткая нотация, способная достичь того же:</p> + +<pre class="brush: js">var a = 'foo', + b = 42, + c = {}; + +// Сокращение имен свойств (ES2015) +var o = {a, b, c}; + +// Иначе говоря, +console.log((o.a === {a}.a)); // true +</pre> + +<h4 id="Повторение_имен_свойств">Повторение имен свойств</h4> + +<p>Когда используются одинаковые имена свойств, второе свойство перезапишет первое.</p> + +<pre class="brush: js">var a = {x: 1, x: 2}; +console.log(a); // {x: 2} +</pre> + +<p>В строгом режиме ECMAScript 5, повторение имен свойств будет воспринято как {{jsxref("SyntaxError")}}. С введением вычисляемых имен свойств и появлением возможности создавать дубликаты во время выполнения кода, ECMAScript 2015 убрал это ограничение.</p> + +<pre class="brush: js">function haveES2015DuplicatePropertySemantics() { + 'use strict'; + try { + ({prop: 1, prop: 2}); + + // Не будет ошибки, повторение имен доступно в строгом режиме + return true; + } catch(e) { + // Будет ошибка, дубликаты запрещены в строгом режиме + return false; + } +}</pre> + +<h3 id="Описание_методов">Описание методов</h3> + +<p>Свойство объекта также может ссылаться на <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> + +<pre class="brush: js">var o = { + <var>property: function </var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +};</pre> + +<p>В ECMAScript 2015, доступна короткая нотация, поэтому слово "function" более не обязательно.</p> + +<pre class="brush: js">// Сокращение имен методов (ES2015) +var o = { + <var>property</var>([<var>parameters</var>]) {}, + *<var>generator</var>() {} +};</pre> + +<p>В ECMAScript 2015 есть способ кратко объявить свойства, чьими значениями являются генераторы функций:</p> + +<pre class="brush: js">var o = { + *<var>generator</var>() { + ........... + } +};</pre> + +<p>Что эквивалентно следующей ES5-подобной нотации (но отметьте, что ECMAScript 5 не содержит генераторов):</p> + +<pre class="brush: js">var o = { + generator<var>: function* </var>() { + ........... + } +};</pre> + +<p>Для большей информации и примеров смотри <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<h3 id="Вычисляемые_имена_свойств">Вычисляемые имена свойств</h3> + +<p>Начиная с ECMAScript 2015, синтаксис объявления объектов также поддерживает вычисляемые имена свойств. Это позволяет добавлять в скобки <code>[] </code>выражение, которое будет вычислено, как имя свойства. Это похоже на скобочную нотацию синтаксиса <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a>, которую вы, вероятно, уже использовали, чтобы прочитать и задать свойство. Теперь можно использовать аналогичный способ с литеральными объектами:</p> + +<pre class="brush: js">// Вычисляемое имя свойства (ES2015) +var i = 0; +var a = { + ['foo' + ++i]: i, + ['foo' + ++i]: i, + ['foo' + ++i]: i +}; + +console.log(a.foo1); // 1 +console.log(a.foo2); // 2 +console.log(a.foo3); // 3 + +var param = 'size'; +var config = { + [param]: 12, + ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +}; + +console.log(config); // {size: 12, mobileSize: 4}</pre> + +<h3 id="Spread-свойства">Spread-свойства</h3> + +<p><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread свойство ECMAScript</a> предлагает (stage 3) добавлять <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread</a> свойства в литеральную нотацию. Оно копирует собственные перечисляемые свойства из представленного объекта в новый.</p> + +<p>Поверхностное копирование (исключая prototype) или слияние объектов теперь возможно с помощью более короткого синтаксиса, чем {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Объект { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Объект { foo: "baz", x: 42, y: 13 }</pre> + +<p>Заметьте, что {{jsxref("Object.assign()")}} вызывает <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>, тогда как оператор spread нет.</p> + +<h3 id="Изменение_Prototype">Изменение Prototype</h3> + +<p>Объявление свойства в виде <code>__proto__: value</code> или <code>"__proto__": value</code> не создаст свойства с именем <code>__proto__</code>. Вместо этого, если предоставляемое значение объект или <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, оно заменит <code>[[Prototype]]</code> создаваемого объекта на это значение. (Если значение не объект или null, объект не изменится.)</p> + +<pre class="brush: js">var obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); + +var obj2 = {__proto__: null}; +assert(Object.getPrototypeOf(obj2) === null); + +var protoObj = {}; +var obj3 = {'__proto__': protoObj}; +assert(Object.getPrototypeOf(obj3) === protoObj); + +var obj4 = {__proto__: 'not an object or null'}; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty('__proto__')); +</pre> + +<p>Только одно изменение prototype разрешено через литеральное объявление объекта: несколько изменений prototype вызовут синтаксическую ошибку.</p> + +<p>Объявление свойства не через "двоеточие" не изменит знаения prototype: это описание будет выглядеть идентично такому же объявлению свойства с использованием любого другого имени.</p> + +<pre class="brush: js">var __proto__ = 'variable'; + +var obj1 = {__proto__}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty('__proto__')); +assert(obj1.__proto__ === 'variable'); + +var obj2 = {__proto__() { return 'hello'; }}; +assert(obj2.__proto__() === 'hello'); + +var obj3 = {['__prot' + 'o__']: 17}; +assert(obj3.__proto__ === 17); +</pre> + +<h2 id="Литеральная_нотация_vs_JSON">Литеральная нотация vs JSON</h2> + +<p>Литеральная нотация не то же самое, что и <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>). Хотя они и выглядят аналогично, существует разница между ними:</p> + +<ul> + <li>JSON позволяет объявление свойств <em>только</em> с помощью синтаксиса <code>"property": value</code>. Имя свойства должно быть заключено в двойные кавычки и объявление не может быть сокращено.</li> + <li>В JSON значения могут быть только строками, числами, массивами, <code>true</code>, <code>false</code>, <code>null</code> или другими (JSON) объектами.</li> + <li>Значения-функции (смотри "Методы" выше) не могут быть присвоены свойствам в JSON.</li> + <li>Объект вида {{jsxref("Date")}} будет строкой после {{jsxref("JSON.parse()")}}.</li> + <li>{{jsxref("JSON.parse()")}} отклонит вычисляемые имена свойств и вернет ошибку.</li> +</ul> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Shorthand method/property names and computed property names added.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td> + <td>Draft</td> + <td>Stage 3 draft.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>7.1</td> + </tr> + <tr> + <td>Shorthand property names</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("33")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + </tr> + <tr> + <td>Shorthand method names</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + </tr> + <tr> + <td>Spread properties</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("55")}}</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>Android Webview</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + <td>{{CompatChrome(1.0)}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>7.1</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("33")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Shorthand method names</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Spread properties</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("55")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/operator_precedence/index.html b/files/ru/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..2362cdc038 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,322 @@ +--- +title: Приоритет операторов +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - Операторы + - подробности об операторах + - приоритет операторов +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Приоритет операторов</strong> определяет порядок, в котором операторы выполняются. Операторы с более высоким приоритетом выполняются первыми.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> + + + +<h2 id="Associativity" name="Associativity">Ассоциативность</h2> + +<p>Ассоциативность определяет порядок, в котором обрабатываются операторы с одинаковым приоритетом. Например, рассмотрим выражение:</p> + +<pre class="syntaxbox notranslate">a OP b OP c +</pre> + +<p>Левая ассоциативность (слева направо) означает, что оно обрабатывается как <code>(a OP b) OP c</code>, в то время как правая ассоциативность (справа налево) означает, что они интерпретируются как <code>a OP (b OP c)</code>. Операторы присваивания являются право-ассоциативными, так что вы можете написать:</p> + +<pre class="brush: js notranslate">a = b = 5; +</pre> + +<p>с ожидаемым результатом, что <code>a</code> и <code>b</code> будут равны 5. Это происходит, потому что оператор присваивания возвращает тот результат, который присваивает. Сначала <code>b</code> становится равным 5, затем <code>a</code> принимает значение <code>b</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush: js notranslate"><code>3 > 2 && 2 > 1 +// вернёт true + +3 > 2 > 1 +// вернёт false, потому что 3 > 2 возвращает true, в свою очередь true > 1 вернёт false +// Добавление скобок значительно повышает читаемость выражения: (3 > 2) > 1</code></pre> + +<h2 id="Table" name="Table">Таблица</h2> + +<p>Данная таблица упорядочена с самого высокого приоритета (20) до самого низкого (1).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Приоритет</th> + <th>Тип оператора</th> + <th>Ассоциативность</th> + <th>Конкретные операторы</th> + </tr> + <tr> + <td>20</td> + <td>{{jsxref("Operators/Grouping", "Группировка")}}</td> + <td>не определено</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td rowspan="4">19</td> + <td>{{jsxref("Operators/Property_Accessors", "Доступ к свойствам", "#Dot_notation")}}</td> + <td>слева направо</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Property_Accessors", "Доступ к свойствам с возможностью вычисления","#Bracket_notation")}}</td> + <td>слева направо</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/new","new")}} (со списком аргументов)</td> + <td>не определено</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Guide/Functions">Вызов функции</a></td> + <td>слева направо</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td>18</td> + <td>{{jsxref("Operators/new","new")}} (без списка аргументов)</td> + <td>справа налево</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">17</td> + <td>{{jsxref("Operators/Arithmetic_Operators","Постфиксный инкремент","#Increment")}}</td> + <td rowspan="2">не определено</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td>{{jsxref("Operators/Arithmetic_Operators","Постфиксный декремент","#Decrement")}}</td> + <td><code>… --</code></td> + </tr> + <tr> + <td rowspan="10">16</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Логическое отрицание</a></td> + <td rowspan="10">справа налево</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Побитовое отрицание</a></td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Унарный плюс</a></td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Унарный минус</a></td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Префиксный инкремент</a></td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Префиксный декремент</a></td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/void">void</a></td> + <td><code>void …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/delete">delete</a></td> + <td><code>delete …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/await">await</a></td> + <td><code>await …</code></td> + </tr> + <tr> + <td>15</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Возведение в степень</a></td> + <td>справа налево</td> + <td><code>… ** …</code></td> + </tr> + <tr> + <td rowspan="3">14</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Умножение</a></td> + <td rowspan="3">слева направо</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Деление</a></td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Остаток</a></td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">13</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Сложение</a></td> + <td rowspan="2">слева направо</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Вычитание</a></td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">12</td> + <td><a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Побитовый сдвиг влево</a></td> + <td rowspan="3">слева направо</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Побитовый сдвиг вправо</a></td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Сдвиг вправо с заполнением нулей</a></td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">11</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Меньше</a></td> + <td rowspan="6">слева направо</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">Меньше или равно</a></td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Больше</a></td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Больше или равно</a></td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/in">in</a></td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">10</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Равно</a></td> + <td rowspan="4">слева направо</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Не равно</a></td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Строго равно</a></td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Строго не равно</a></td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Побитовое «И»</a></td> + <td>слева направо</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Побитовое исключающее «ИЛИ»</a></td> + <td>слева направо</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Побитовое «ИЛИ»</a></td> + <td>слева направо</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Логическое «И»</a></td> + <td>слева направо</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Логическое «ИЛИ»</a></td> + <td>слева направо</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Условный</a></td> + <td>справа налево</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="13">3</td> + <td rowspan="13"><a href="/ru/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Присваивание</a></td> + <td rowspan="13">справа налево</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… **= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/yield">yield</a></td> + <td rowspan="2">справа налево</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/ru/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Запятая / Последовательность</a></td> + <td>слева направо</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/javascript/reference/operators/optional_chaining/index.html b/files/ru/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..30fd29e3c0 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,176 @@ +--- +title: "Оператор\_опциональной последовательности" +slug: Web/JavaScript/Reference/Operators/Optional_chaining +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор <strong>опциональной последовательности</strong> <strong><code>?.</code></strong> позволяет получить значение свойства, находящегося на любом уровне вложенности в цепочке связанных между собой объектов, без необходимости проверять каждое из промежуточных свойств в ней на существование. <span class="seoSummary"> <code>?.</code> работает подобно оператору <code>.</code>, за исключением того, что не выбрасывает исключение, если объект, к свойству или методу которого идёт обращение, равен {{jsxref("null")}} или {{jsxref("undefined")}}. В этих случаях он возвращает <code>undefined</code>.</span></p> + +<p>Таким образом, мы получаем более короткий и понятный код при обращении к вложенным по цепочке свойствам объекта, когда есть вероятность, что какое-то из них отсутствует.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div> + +<div></div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> +<var>obj</var>?.[<var>expr</var>] +arr?.[index] +<var>func</var>?.(<var>args</var>) +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Оператор опциональной последовательности предоставляет способ упростить доступ к значениям в цепочке обьектов, когда возможно, что какое-то свойство (или метод) в ней равно <code>undefined</code> или <code>null</code>.</p> + +<p>Для примера, создадим обьект <code>obj</code>, имеющий вложенную структуру. Без оператора опциональной последовательности поиск глубоко расположенных подсвойств требует проверки всех промежуточных свойств на существование, например:</p> + +<pre class="brush: js">let nestedProp = obj.first && obj.first.second;</pre> + +<p>Если обращаться к <code>obj.first.second</code> без проверки <code>obj.first</code>, то, если свойство <code>obj.first</code> равно <code>null</code> или <code>undefined</code>, выбросится исключение {{jsxref("TypeError")}}.</p> + +<p>Однако, с оператором опциональной последовательности (<code>?.</code>) не требуется явно проверять ссылку на <code>obj.first</code> перед обращением к <code>obj.first.second</code>:</p> + +<pre class="brush: js">let nestedProp = obj.first?.second;</pre> + +<p>Если используется оператор <code>?.</code> вместо <code>.</code>, JavaScript знает о необходимости проверки <code>obj.first</code> перед обращением к <code>obj.first.second</code>. Если значение <code>obj.first</code> равно <code>null</code> или <code>undefined</code>, выполнение выражения автоматически прекращается и возвращается <code>undefined</code>.</p> + +<p>Это эквивалентно следующему (кроме создания временной переменной):</p> + +<pre>let temp = obj.first; +let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);</pre> + +<h3 id="Опциональная_последовательность_с_вызовом_функции">Опциональная последовательность с вызовом функции</h3> + +<p>Вы можете использовать <code>?.</code><strong>, </strong>когда необходимо вызвать метод, которого может не существовать. Это может быть полезно, например, при использовании API, в котором метод может быть недоступен из-за устаревания или неподдерживаемости устройством пользователя.</p> + +<p>Использование <code>?.</code><strong> </strong>с вызовом функции значит, что выполнение автоматически вернет <code>undefined</code>, а не выбросит исключение, если метод не найден:</p> + +<pre class="brush: js">let result = someInterface.customMethod?.();</pre> + +<div class="blockIndicator note"> +<p><strong>Обратите внимание:</strong> Для существующего свойства, не являющегося функцией, использование конструкции <code>x.y?.()</code> всё равно выбросит {{jsxref("TypeError")}} исключение (<code>x.y не является функцией</code>).</p> +</div> + +<h3 id="Работа_с_функциями_обратного_вызова_и_обработчиками_событий">Работа с функциями обратного вызова и обработчиками событий</h3> + +<p>Если Вы используете функции обратного вызова или извлекаете методы обьекта <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Разбор_объектов">деструктурирующим присваиванием</a>, Вы можете получить несуществующие значения, которые нельзя вызывать как функции до проверки на их существование. Используя оператор <code>?.</code>, Вы можете избежать лишних проверок:</p> + +<pre class="brush: js">// С использованием ES2019 +function doSomething(onContent, onError) { + try { + // ... делаем что-то с данными + } + catch (err) { + if (onError) { // проверяем, существует ли onError + onError(err.message); + } + } +}</pre> + +<pre class="brush: js">// С использованием оператора опциональной последовательности +function doSomething(onContent, onError) { + try { + // ... делаем что-то с данными + } + catch (err) { + onError?.(err.message); // не выбросит исключение, если onError равен undefined + } +} +</pre> + +<h3 id="Опциональные_последовательности_в_выражениях">Опциональные последовательности в выражениях</h3> + +<p>Вы также можете использовать оператор опциональной последовательности, когда обращаетесь к свойству с помощью <a href="/ru/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Скобочная_нотация">скобочной нотации</a>:</p> + +<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name']; +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Базовый_пример">Базовый пример</h3> + +<p>В этом примере производится обращение к свойству <code>name</code> элемента с ключом <code>bar</code> объекта <code>Map</code>. Элемент с таким ключом отсутствует, но исключение выброшено не будет; <code>nameBar</code> равен <code>undefined</code>.</p> + +<pre class="brush: js">let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name;</pre> + +<h3 id="Сокращенное_выполнение">Сокращенное выполнение</h3> + +<p>При использовании оператора опциональной последовательности в выражениях, где левая часть операнда равна <code>null</code> или <code>undefined</code>, выражение не будет выполнено. Например:</p> + +<pre class="brush: js">let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0, т.к. x не был инкрементирован +</pre> + +<h3 id="Совместное_использование_операторов_опциональной_последовательности">Совместное использование операторов опциональной последовательности</h3> + +<p>Во вложенных объектах возможно использование оператора опциональной последовательности неограниченное количество раз:</p> + +<pre class="brush: js">let customer = { + name: "Carl", + details: { + age: 82, + location: "Paradise Falls" // точный адрес неизвестен + } +}; +let customerCity = customer.details?.address?.city; + +// … это также работает с вызовами функций +let duration = vacations.trip?.getTime?.(); +</pre> + +<h3 id="Использование_с_оператором">Использование с оператором ??</h3> + +<p>Оператор {{JSxRef("Operators/Nullish_Coalescing_Operator", "??", '', 1)}} может использоваться после опциональной последовательности для установления значения по умолчанию:</p> + +<pre>let customer = { + name: "Carl", + details: { age: 82 } +}; +const customerCity = customer?.city ?? "Unknown city"; +console.log(customerCity); // Unknown city</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Примечание</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-optional-chaining/">Proposal for the "optional chaining" operator</a></td> + <td>Stage 4</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> + <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/property_accessors/index.html b/files/ru/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..84ba61f9fd --- /dev/null +++ b/files/ru/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,203 @@ +--- +title: Property accessors +slug: Web/JavaScript/Reference/Operators/Property_Accessors +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Доступ к свойствам объекта можно получить, используя точечную и скобочную записи.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html", "taller")}}</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">object.property +object["property"] +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Можно думать об объекте как об ассоциативном массиве (или <em>карте, словаре, хэш-таблице, таблице поиска</em>). <em>Ключи</em> в таком массиве - это имена свойств объекта.</p> + +<p>Когда речь идёт о свойствах объекта, обычно различают собственно свойства и методы. Однако разделение свойство/метод это не более чем условность. Метод - это просто свойство, которое можно вызвать (например, если оно содержит ссылку на {{jsxref("Function", "функцию")}} в качестве значения.</p> + +<p>Есть два способа доступа к свойствам: точечная и скобочная записи.</p> + +<h3 id="Точечная_запись">Точечная запись</h3> + +<p class="brush: js">В записи <code>object.property</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">property</span></font> должно быть действительным <a href="https://wiki.developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Identifier">идентификатором</a>. (В стандарте ECMAScript, имена своств технически называются "IdentifierNames", а не "Identifiers", поэтому зарезервированные слова могут быть использованы в их качестве, но это не рекомендуется). Например, <code>object.$1</code> является верной записью, а <code>object.1</code> - нет.</p> + +<pre class="brush: js notranslate">const variable = <var>object</var>.<var>property_name;</var> + +<var>object</var>.<var>property_name</var> = value; +</pre> + +<pre class="brush: js notranslate">const object = {}; + +object.$1 = 'foo'; +console.log(object.$1); // 'foo' + +object.1 = 'bar'; // SyntaxError +console.log(object.1); // SyntaxError</pre> + +<p>Здесь метод с именем <code>createElement</code> считывается с объекта <code>document</code> и вызывается.</p> + +<pre class="brush: js notranslate">document.createElement('pre')</pre> + +<p>Если вы хотите вызвать метод на численном литерале, не имеющий части с экспонентой или точки, отделающей дробную часть, нужно ставить пробел перед точкой, являющейся частью обращения к этому методу, чтобы интерпретатор не посчитал, что это точка отделяет дробную часть числа (или использовать другие способы этого избежать).</p> + +<pre class="brush: js notranslate">// SyntaxError, здесь считается, что 77. это число, +// поэтому такая запись эквивалентна (77.)toExponentional() +// что является ошибкой +77.toExponentional() +// Рабочие варианты: +77.toExponential() +77 +.toExponential() +;(77).toExponential() +// Здесь первая точка относится к числу, вторая вызывает метод +// то есть эта запись равносильна (77.).toExponential() +77..toExponential() +// Эквивалентно (77.0).toExponential() +77.0.toExponential()</pre> + +<h3 id="Скобочная_запись">Скобочная запись</h3> + +<p class="brush: js">В записи <code>object[property_name]</code>, <em><code>property_name</code> - </em>это выражение, вычисляющееся в строку или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символ</a>. Это может быть любая строка, не обязательно действительный идентификатор, например <code>'1foo'</code>, '<code>!bar!'</code> или даже <code>' '</code> (пробел).</p> + +<pre class="brush: js notranslate">const variable = object[property_name] +object[property_name] = value</pre> + +<p>Пример, аналогичный примеру в предыдущем пункте:</p> + +<pre class="brush: js notranslate">document['createElement']('pre'); +</pre> + +<p>Пробел перед скобкой допускается:</p> + +<pre class="brush: js notranslate">document ['createElement']('pre')</pre> + +<h3 id="Имена_свойств">Имена свойств</h3> + +<p>Имена свойств могут быть строками или <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Symbol">символами</a>. Любое другое значение приводится к строке. Следующий код выводит <code>'value'</code>, поскольку число <code>1</code> приводится к строке <code>'1'</code>.</p> + +<pre class="brush: js notranslate">const object = {} +object['1'] = 'value' +console.log(object[1])</pre> + +<p>Этот пример также выводит <code>'value',</code> так как и <code>foo</code>, и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">bar</span></font> приводятся к одной и той же строке.</p> + +<pre class="brush: js notranslate">const foo = {unique_prop: 1} +const bar = {unique_prop: 2} +const object = {} + +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>В движке <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript это строка <code>'[object Object]'</code>.</p> + +<h3 id="Привязка_методов">Привязка методов</h3> + +<p>Метод не привязан к содержащему его объекту. Это значит, что значение <code>this</code> в методах объекта не всегда указывает на него. Вместо этого, <code>this</code> "передаётся" при вызове метода. Смотрите подробнее <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#Method_binding">this</a></code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Скобочная_запись_или_eval">Скобочная запись или <code>eval</code></h3> + +<p>Новички JavaScript часто делают ошибку, используя <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a> там, где можно просто использовать скобочную запись.</p> + +<p>Например, следующий синтаксис можно часто увидеть в скриптах.</p> + +<pre class="brush: js notranslate">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +</pre> + +<p>Функция <code>eval()</code> очень медленная и её использования следует избегать, когда это возможно. Кроме того, строка <code>strFormControl</code> при таком использовании обязаны содержать действительный идентификатор, что не является обязательным для <code>id</code> полей формы, то есть, например, поле с id <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font> не получится получить такой записмью. Лучше вместо этого использовать скобочную запись:</p> + +<pre class="brush: js notranslate">x = document.forms["form_name"].elements[strFormControl].value; +</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-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</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>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="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{jsxref("Object")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/spread_syntax/index.html b/files/ru/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..c96be61337 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,249 @@ +--- +title: Spread syntax +slug: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><strong>Spread syntax</strong> позволяет расширить доступные для итерации элементы (например, массивы или строки) в местах</div> + +<ul> + <li>для функций: где ожидаемое количество аргументов для вызовов функций равно нулю или больше нуля</li> + <li>для элементов (литералов массива)</li> + <li>для выражений объектов: в местах, где количество пар "ключ-значение" должно быть равно нулю или больше (для объектных литералов)</li> +</ul> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<p class="hidden">Источник для этого интерактивного примера находится в репозитории на GitHub. Если вы желаете внести свой вклад в этот проект, то, пожалуйста, склонируйте себе <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Для вызовов функций:</p> + +<pre class="syntaxbox notranslate">myFunction(...iterableObj); +</pre> + +<p>Для литералов массива или строк:</p> + +<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre> + +<p>Для литералов объекта (новое в ECMAScript 2018):</p> + +<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Spread_в_вызовах_функций">Spread в вызовах функций</h3> + +<h4 id="Замена_apply">Замена apply</h4> + +<p>Обычно используют {{jsxref( "Function.prototype.apply")}} в случаях, когда хотят использовать элементы массива в качестве аргументов функции.</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>С <strong>spread syntax</strong> вышеприведенное можно записать как:</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Любой аргумент в списке аргументов может использовать <strong>spread syntax</strong>, и его можно использовать несколько раз.</p> + +<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_для_new">Apply для new</h4> + +<p>Вызывая конструктор через ключевое слово <code>new</code>, невозможно использовать массив и <code>apply</code> <strong>напрямую </strong>(<code>apply</code> выполняет <code>[[Call]]</code>, а не <code>[[Construct]]</code>).Однако благодаря spread syntax, массив может быть с легкостью использован со словом <code>new:</code></p> + +<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>Чтобы использовать <code>new</code> с массивом параметров без spread syntax, вам потребуется использование частичного применения:</p> + +<pre class="brush: js notranslate">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Spread_в_литералах_массива">Spread в литералах массива</h3> + +<h4 id="Более_мощный_литерал_массива">Более мощный литерал массива</h4> + +<p>Без spread syntax, применение синтаксиса литерала массива для создания нового массива на основе существующего недостаточно и требуется императивный код вместо комбинации методов <code>push</code>, <code>splice</code>, <code>concat</code> и т.д. С spread syntax реализация становится гораздо более лаконичной:</p> + +<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Аналогично развертыванию в массиве аргументов, <code>...</code> может быть использован повсеместно и многократно в литерале массива.</p> + +<h4 id="Копирование_массива">Копирование массива</h4> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; +var arr2 = [...arr]; // like arr.slice() +arr2.push(4); + +// arr2 becomes [1, 2, 3, 4] +// arr remains unaffected +</pre> + +<p><strong>Примечание:</strong> Spread syntax на самом деле переходит лишь на один уровень глубже при копировании массива. Таким образом, он может не подходить для копирования многоразмерных массивов, как показывает следующий пример: (также как и c {{jsxref("Object.assign()")}}) и синтаксис spred </p> + +<pre class="brush: js notranslate">const a = [[1], [2], [3]]; +const b = [...a]; +b.shift().shift(); // 1 +// О нет. Теперь на массив "а" относятся также: а +//[[], [2], [3]] +</pre> + +<h4 id="Лучший_способ_конкатенации_массивов">Лучший способ конкатенации массивов</h4> + +<p>Для конкатенации массива часто используется {{jsxref("Array.concat")}}:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Append all items from arr2 onto arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>С использованием spread syntax:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; +</pre> + +<p>{{jsxref("Array.unshift")}} часто используется для вставки массива значений в начало существующего массива. Без spread syntax:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Prepend all items from arr2 onto arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> + +<p>С использованием spread syntax [Следует отметить, что такой способ создает новый массив <code>arr1</code>. В отличие от {{jsxref("Array.unshift")}}, исходный массив не мутируется]:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Spread_в_литералах_объекта">Spread в литералах объекта</h3> + +<p>Предложение <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (стадия 4) добавляет свойства spread в <a href="/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer">литералы объекта</a>. Оно копирует собственные перечисляемые свойства данного объекта в новый объект.</p> + +<p>Поверхностное копирование (без прототипа) или объединение объектов теперь возможно с использованием более короткого, чем {{jsxref("Object.assign()")}}, синтаксиса.</p> + +<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Обратите внимание, что {{jsxref("Object.assign()")}} запускает <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>, а <strong>spread syntax</strong> нет.</p> + +<p>Обратите внимание, что вы не можете заменить или имитировать функцию {{jsxref("Object.assign()")}}:</p> + +<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>В приведенном выше примере оператор распространения не работает так, как можно было бы ожидать: он распространяет <em>массив</em> аргументов в литерал <em>объекта</em> благодаря параметру rest.</p> + +<h3 id="Только_для_итерируемых_объектов">Только для итерируемых объектов</h3> + +<p>Spread syntax ( кроме случаев spread properties) может быть применен только к итерируемым объектам (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> objects) :</p> + +<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="Spread_с_большим_количеством_значений">Spread с большим количеством значений</h3> + +<p>При использовании spread оператора в вызовах функций необходимо быть внимательным к возможному переполнению в ядре JavaScript. Существует ограничение по максимально возможному количеству аргументов функции. См. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> для уточнения.</p> + +<h2 id="Rest_синтаксис_параметры">Rest синтаксис (параметры)</h2> + +<p>Синтаксис для rest оператора выглядит таким же как и для spread оператора, однако он используется для деструктуризации массивов и объектов. Фактически, rest оператор противоположен spread оператору: последний раскладывает массив на элементы, тогда как первый собирает много элементов в один. См. <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p> + +<h2 id="Specifications">Specifications</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('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Defined in <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Без изменений.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Без изменений.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (also ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (also ‘<code>...</code>’)</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/super/index.html b/files/ru/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..4f3b525185 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/super/index.html @@ -0,0 +1,186 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - ECMAScript 2015 + - JavaScript + - Классы +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключевое слово <strong>super</strong> используется для вызова функций, принадлежащих родителю объекта.</p> + +<p>Выражения: <code>super.prop</code> и <code>super[expr]</code> - действительны в любом методе определения в обоих классах и в литералах объекта.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">super([arguments]); // вызов родительского конструктора. +super.functionOnParent([arguments]); +</pre> + +<h2 id="Описание">Описание</h2> + +<p>В конструкторе ключевое слово <code>super()</code> используется как функция, вызывающая родительский конструктор. Её необходимо вызвать до первого обращения к ключевому слову <code>this</code> в теле конструктора. Ключевое слово <code>super</code> также может быть использовано для вызова функций родительского объекта.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="Использование_super_в_классах">Использование super в классах</h3> + +<p>Этот фрагмент кода взят из <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). В этом примере <code>super()</code> вызывается , чтобы предотвратить использования одинакового для классов <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Rectangle</span></font> and <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Square</span></font> определения тела конструктора.</p> + +<pre class="brush: js notranslate">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } +} + +class Square extends Polygon { + constructor(length) { + this.height; // ReferenceError, super должен быть вызыван первым! + + // Здесь, вызывается метод конструктора родительского класса с длинами, + // указанными для ширины и высоты класса Polygon + super(length, length); + + // Примечание: в производных классах, super() необходимо вызывать прежде чем + // использывать 'this'. Если этого не сделать будет сообщение об ошибке ссылки. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Супер-вызовы_статических_методов">Супер-вызовы статических методов</h3> + +<p>Вы так же можете вызывать super на <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes/static">статических</a> методах.</p> + +<pre class="notranslate">class Rectangle { + constructor() {} + static logNbSides() { + return 'У меня 4 стороны,'; + } +} + +class Square extends Rectangle { + constructor() {} + static logDescription() { + return super.logNbSides() + ' которые все равны'; + } +} +Square.logDescription(); // 'У меня 4 стороны, которые все равны'</pre> + +<h3 id="Удаление_свойств_super_вызывает_ошибку">Удаление свойств super вызывает ошибку</h3> + +<p>Вы не можете использовать <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> и <code>super.prop</code> или <code>super[expr]</code> при удалении родительского класса он выдаст:{{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js notranslate">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; // это плохо + } +} + +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> + +<h3 id="super.prop_не_может_переопределять_свойства_защищённые_от_записи"><code>super.prop</code> не может переопределять свойства, защищённые от записи</h3> + +<p>При определении незаписываемых свойств с помощью, например, {{jsxref("Object.defineProperty")}}, <code>super</code> не может перезаписать значение свойства.</p> + +<pre class="notranslate">class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } +} + +class Y extends X { + constructor() { + super(); + } + foo() { + super.prop = 2; // Не возможно перезаписать значение. + } +} + +var y = new Y(); +y.foo(); // TypeError: "prop" доступен только для чтения +console.log(y.prop); // 1</pre> + +<h3 id="Использование_super.prop_в_объектных_литералах">Использование <code>super.prop</code> в объектных литералах</h3> + +<p>Super также можно использовать в <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">объекте инициализатора / литерала</a>. В этом примере, два объекта определяют метод. Во втором объекте, <code>super</code> вызывает первый метод объекта. Это работает с помощью {{jsxref("Object.setPrototypeOf()")}}, с которой мы можем установить прототип для <code>obj2</code> в <code>obj1</code>, так что <code>super</code> может найти <code>method1</code> в <code>obj1</code>.</p> + +<pre class="brush: js notranslate">var obj1 = { + method1() { + console.log("method 1"); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // logs "method 1" +</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-super-keyword', 'super')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_в_браузерах">Совместимость в браузерах</h2> + +<p>{{Compat("javascript.operators.super")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Gecko_specific_notes">Gecko specific notes</h2> + +<ul> + <li><code>super()</code> does not yet work as expected for built-in prototypes.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Классы</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/this/index.html b/files/ru/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..cfd5ae4385 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/this/index.html @@ -0,0 +1,412 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - Operator + - Reference + - this + - свойства языка +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Поведение ключевого слова <code>this</code> в JavaScript несколько отличается по сравнению с остальными языками. Имеются также различия при использовании <code>this</code> в <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгом</a> и нестрогом режиме.</p> + +<p>В большинстве случаев значение <code>this</code> определяется тем, каким образом вызвана функция. Значение <code>this</code> не может быть установлено путем присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод {{jsxref('Function.prototype.bind()', 'bind()')}}, который используется для {{jsxref('Operators/this','привязки значения ключевого слова this независимо от того, как вызвана функция','Метод_bind')}}. Также в ES2015 представлены {{jsxref('Functions/Arrow_functions', 'стрелочные функции')}}, которые не создают собственные привязки к <code>this</code> (они сохраняют значение <code>this</code> лексического окружения, в котором были созданы).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-this.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">this</pre> + +<h3 id="Значение">Значение</h3> + +<p>Свойство контекста выполнения кода (global, function или eval), которое в нестрогом режиме всегда является ссылкой на объект, а в строгом режиме может иметь любое значение.</p> + +<h2 id="Global_контекст">Global контекст</h2> + +<p>В глобальном контексте выполнения (за пределами каких-либо функций) <code>this</code> ссылается на глобальный объект вне зависимости от режима (строгий или нестрогий).</p> + +<pre class="brush:js">// В браузерах, объект window также является объектом global: +console.log(this === window); // true + +a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b) // "MDN" +console.log(b) // "MDN" +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Вы всегда можете легко получить объект global, используя глобальное свойство {{jsxref ("globalThis")}}, независимо от текущего контекста, в котором выполняется ваш код.</p> +</div> + +<h2 id="Function_контекст">Function контекст</h2> + +<p>В пределах функции значение <code>this</code> зависит от того, каким образом вызвана функция.</p> + +<h3 id="Простой_вызов">Простой вызов</h3> + +<p>Поскольку следующий код не в {{jsxref('Strict_mode', 'строгом режиме')}}, и значение <code>this</code> не устанавливается вызовом, по умолчанию будет использоваться объект global, которым в браузере является <code>{{domxref('window')}}</code>.</p> + +<pre class="brush:js">function f1(){ + return this; +} + +// В браузере: +f1() === window; // window - глобальный объект в браузере + +// В Node: +f1() === global; // global - глобальный объект в Node +</pre> + +<p>В строгом режиме, если значение <code>this</code> не установлено в контексте выполнения, оно остается <code>undefined</code>, как показано в следующем примере:</p> + +<pre class="brush:js">function f2(){ + "use strict"; // см. strict mode + return this; +} + +f2() === undefined; // true +</pre> + +<div class="note">Во втором примере <code>this</code> должно иметь значение <code>{{jsxref("undefined")}}</code>, потому что функция <code>f2</code> была вызвана напрямую, а не как метод или свойство объекта (например, <code>window.f2()</code>). Реализация этой особенности не поддерживалась в некоторых браузерах, когда они впервые начали поддерживать {{jsxref('Strict_mode', 'строгий режим')}}. В результате они некорректно возвращали объект <code>window</code>.</div> + +<p>Для того, чтобы при вызове функции установить <code>this</code> в определенное значение, используйте {{jsxref('Function.prototype.call()', 'call()')}} или {{jsxref('Function.prototype.apply()', 'apply()')}}, как в следующих примерах.</p> + +<p><strong>Пример 1</strong></p> + +<pre dir="rtl"><code>// </code>В качестве первого аргумента методов<code> call или apply</code> может быть передан объект<code>, +// на который будет указывать this.</code><code> +var obj = {a: 'Custom'}; + +// Это свойство принадлежит глобальному объекту +var a = 'Global'; + +function whatsThis() { + return this.a; //значение this зависит от контекста вызова функции</code> + +<code>} + +whatsThis(); // 'Global' +whatsThis.call(obj); // 'Custom' +whatsThis.apply(obj); // 'Custom'</code></pre> + +<p><strong>Пример 2</strong></p> + +<pre>function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// Первый параметр - это объект для использования в качестве +// 'this', последующие параметры передаются как +// аргументы функции call +add.call(o, 5, 7); // 16 + +// Первый параметр - это объект для использования в качестве +// 'this', второй - массив, чьи члены используются +// в качестве аргументов функции call +add.apply(o, [10, 20]); // 34 +</pre> + +<p>Обратите внимание, что в нестрогом режиме, если значение, переданное в <code>call</code> или <code>apply как</code> <code>this</code>, не является объектом, будет сделана попытка преобразовать его в объект с помощью внутренней операции <code>ToObject</code>. Таким образом, если переданное значение является примитивом, таким как <code>7</code> или <code>'foo'</code>, оно будет преобразовано в <code>Object</code> с использованием связанного конструктора, так что примитивное число <code>7</code> будет преобразовано в объект так, как будто с помощью <code>new Number(7)</code>, а строка <code>'foo'</code> - как будто с помощью <code>new String('foo')</code>, например</p> + +<pre>function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String] +</pre> + +<h3 id="Метод_bind">Метод <code>bind</code></h3> + +<p>ECMAScript 5 представил {{jsxref("Function.prototype.bind()")}}. Вызов <code>f.bind(someObject)</code> создает новую функцию с тем же телом и областью действия, что и <code>f</code>, но там, где в исходной функции используется <code>this</code>, в новой функции оно постоянно будет связано с первым аргументом <code>bind</code>, независимо от того, как функция используется.</p> + +<pre>function f() { + return this.a; +} + +var g = f.bind({a: 'azerty'}); +console.log(g()); // azerty + +var h = g.bind({a: 'yoo'}); // bind only works once! +console.log(h()); // azerty + +var o = {a: 37, f: f, g: g, h: h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty</pre> + +<h3 id="Стрелочные_функции">Стрелочные функции</h3> + +<p>В {{jsxref('Functions/Arrow_functions', 'стрелочных функциях')}}, <code>this</code> привязан к окружению, в котором была создана функция. В глобальной области видимости <code>this</code> будет указывать на глобальный объект.</p> + +<pre><code>var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true</code></pre> + +<div class="note"> +<p>Note: если аргумент this передаётся в call, bind или apply при вызове стрелочной функции, он будет проигнорирован. Вы всё ещё можете добавить аргументы к вызову, но первый аргумент (thisArg) должен быть установлен в null.</p> +</div> + +<p>Неважно, как стрелочная функция <code>foo()</code> будет вызвана, её значение this будет указывать на глобальный объект. <code>this</code> будет сохранять свое значение, даже если функция <code>foo()</code> будет вызвана как метод объекта (что в обычных функциях связывает <code>this</code> с объектом вызова) или с использованием методов <code>call</code>, <code>apply</code> или <code>bind</code>:</p> + +<pre><code>// Вызов функции как метода объекта +var obj = {foo: foo}; +console.log(obj.foo() === globalObject); // true + +// Попытка установить this с помощью call +console.log(foo.call(obj) === globalObject); // true + +// Попытка установить this с помощью bind +foo = foo.bind(obj); +console.log(foo() === globalObject); // true</code></pre> + +<p>Несмотря ни на что, <code>this</code> стрелочной функции <code>foo()</code> имеет то же значение, что и при создании функции (глобальный объект в примере выше). То же самое касается стрелочных функций, созданных внутри других функций: их <code>this</code> будет привязан к окружению.</p> + +<pre><code>// Создаем объект obj, содержащий метод bar, который возвращает функцию, +// которая возвращает свой this. Возвращаемая функция создана +// как стрелочная функция, таким образом её this постоянно замкнут +// на this функции, в которой она создана. </code>Значение bar может быть установлено +<code>//</code> в вызове, который, в свою очередь, устанавливает значение возвращаемой функции.<code> +var obj = { bar : function() { + var x = (() => this); + return x; + } + }; + +// Вызываем bar как метод объекта obj, устанавливая его this на obj +// Присваиваем ссылку возвращаемой функции переменной fn +var fn = obj.bar(); + +// Вызываем fn без установки this, что в обычных функциях указывало бы +// на глобальный объект или undefined в строгом режиме. +console.log(fn() === obj); // true</code> + +// Но будьте осторожны, если вы ссылаетесь на метод obj, не вызывая его +var fn2 = obj.bar; +// Вызов this стрелочной функции изнутри метода bar вернёт теперь window, +// потому что он следует за this из fn2. +console.log(fn2()() == window); // true</pre> + +<p>В примере выше, функция (назовем её анонимной функцией A), присвоенная методу <code>obj.bar</code>, возвращает другую функцию (назовем её анонимной функцией B) которая создана как стрелочная функция. В результате, <code>this функции B при вызове замкнут на</code> <code>this,</code> принадлежащий <code>obj.bar</code> (функции A). <code>this</code> функции B всегда будет иметь то значение, которое он получил при создании. В примере выше, <code>this функции B</code> указывает на <code>this функции A,которым является</code> obj, таким образом this будет равен <code>obj</code> даже тогда, когда будет вызван методом, который в нормальных условиях устанавливал бы значение this равным <code>undefined</code> или глобальному обьекту (или любым другим методом, как в предыдущем примере в глобальном контексте выполнения).</p> + +<h3 id="В_методе_объекта">В методе объекта</h3> + +<p>Когда функция вызывается как метод объекта, используемое в этой функции ключевое слово <code>this </code>принимает значение объекта, по отношению к которому вызван метод.</p> + +<p>В следующем примере, когда вызвано свойство <code>o.f()</code> , внутри функции <code>this</code> привязано к объекту <code>o.</code></p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Необходимо отметить, что на поведение <code>this</code> совсем не влияет то, как или где была определена функция. В предыдущем примере мы определили функцию внутри свойства <code>f</code> во время определения объекта <code>o</code>. Однако, мы могли бы также просто определить сначала функцию, а затем закрепить ее за за свойством <code>o.f</code>. В этом случае поведение <code>this</code> не изменится:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>Эти примеры показывают, что имеет значение только то, что функция была вызвана из свойства <code>f</code> объекта <code>o</code>.</p> + +<p>Аналогично, привязывание <code>this</code> обуславливается наличием ближайшей ссылки на объект или свойство. В следующем примере, когда мы вызываем функцию, мы обращаемся к ней как к методу <code>g</code> объекта <code>o.b</code>. На этот раз во время выполнения, <code>this, </code>что находится внутри функции, будет ссылаться на<code> </code> <code>o.b</code>. Тот факт, что объект является членом объекта <code>o</code>, не имеет значения; важна только ближайшая ссылка.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="this_в_цепочке_objects_prototype"><code>this</code> в цепочке object's prototype</h4> + +<p>Это же представление справедливо и для методов, определенных где-либо в цепочке object's prototype. Если метод находится в цепочке прототипов, то <code>this</code> ссылается на объект, на котором был вызван метод, т.е. так, словно метод является методом самого объекта, а не прототипа.</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>В этом примере объект, которому присвоена переменная <code>p,</code> не имеет собственного свойства <code>f</code>, а наследует это свойство от своего прототипа. Однако, совершенно неважно, что поиск свойства f в конце концов обнаружит его на объекте <code>o</code>. Поскольку поиск начался с <code>p.f</code>, то и свойство <code>this</code> внутри функции <code>f</code> будет ссылаться на объект <code>p</code>. Таким образом, если <code>f</code> вызывается как метод <code>p</code>, то и <code>this</code> относится к <code>p</code>. Это полезная особенность прототипного наследования JS.</p> + +<h4 id="this_с_геттерамисеттерами"><code>this</code> с геттерами/сеттерами</h4> + +<p>Все те же утверждения справедливы, если функция вызывается из геттера или сеттера. Для функции, которая используется как геттер или сеттер <code>this</code> привязан к объекту, свойство которого необходимо извлечь через геттер/сеттер.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', { + get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="В_конструкторе">В конструкторе</h3> + +<p>Когда функция используется как конструктор (с ключевым словом <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> ), <code>this</code> связано с создаваемым новым объектом.</p> + +<p>Примечание: по умолчанию конструктор возвращает объект, на который ссылается <code>this</code>, но он может вернуть и другой объект (если возвращаемое значение не является объектом, тогда будет возвращен объект с <code>this</code>).</p> + +<pre class="brush:js">/* + * Конструктор работает таким образом: + * + * function MyConstructor(){ + * // фактический код, составляющий тело функции. + * // создание свойств с |this| по + * // желанию, определяя их значения; например, + * this.fum = "nom"; + * // и т.д. + * + * // Если функция возвращает выражение, + * // возвращающее объект, этот объект будет + * // результатом выражения |new|. В обратном случае, + * // результат выражения - объект, + * // в данный момент привязанный к |this| + * // (т.е. наиболее часто встречающийся случай). + * } + */ + +function C() { + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2() { + this.a = 37; + return {a: 38}; +} + +o = new C2(); +console.log(o.a); // logs 38 +</pre> + +<p>В последнем примере (<code>C2</code>), из-за того, что конструктор вернул объект, новый объект, к которому было привязано <code>this</code>, был просто отброшен. (Это фактически делает выражение "<code>this.a = 37;</code>" "мертвым" кодом. Он не является буквально нерабочим, так как он выполняется, но он может быть изъят без каких-либо внешних эффектов.)</p> + +<h3 id="call_и_apply"><code>call</code> и <code>apply</code></h3> + +<p>Когда в теле функции используется ключевое слово <code>this</code>, его значение может быть привязано к конкретному объекту в вызове при помощи методов <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> или <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code>, которые наследуются всеми функциями от <code>Function.prototype</code>.</p> + +<pre class="brush:js">function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// Первый параметр - это объект, который следует использовать как +// 'this', последующие параметры передаются +// как аргументы при вызове функции +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// Первый параметр - объект, который следует использовать как +// 'this', второй параметр - массив, +// элементы которого используются как аргументы при вызове функции +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Необходимо отметить, что если методам <code>call</code> и <code>apply</code> передается значение с <code>this</code>, которое не является при этом объектом, будет предпринята попытка конвертировать значение в объект, используя внутреннюю операцию <code>ToObject</code>. Если переданное значение является примитивным типом, например <code>7</code> или <code>'foo'</code>, оно будет преобразовано в объект с использованием родственного конструктора, так примитив <code>7</code> преобразовывается в объект через <code>new Number(7),</code> а строка <code>'foo'</code> в объект через <code>new String('foo'),</code> и т.д.</p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +</pre> + +<h3 id="Как_обработчик_событий_DOM">Как обработчик событий DOM</h3> + +<p>Когда функция используется как обработчик событий, <code>this</code> присваивается элементу с которого начинается событие (некоторые браузеры не следуют этому соглашению для слушателей, добавленных динамически с помощью всех методов, кроме <code>addEventListener</code>).</p> + +<pre class="brush:js">// Когда вызывается как слушатель, связанный элемент становится синим +function bluify(e) { + // Всегда true + console.log(this === e.currentTarget); + // true, когда currentTarget и target один объект + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Получить список каждого элемента в документе +var elements = document.getElementsByTagName('*'); + +// Добавить bluify как слушателя кликов, чтобы при +// нажатии на элемент он становился синим +for (var i = 0; i < elements.length; i++) { + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="В_инлайновом_обработчике_событий">В инлайновом обработчике событий</h3> + +<p>Когда код вызван из инлайнового обработчика, <code>this</code> указывает на DOM элемент, в котором расположен код события:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Показать this +</button> +</pre> + +<p>Код выше выведет '<code>button</code>'. Следует отметить, что <code>this</code> будет указывать на DOM элемент только во внешних (не вложенных) функциях:</p> + +<pre class="brush:js"><button onclick="alert((function() {return this;} ()));"> + Показать вложенный this +</button> +</pre> + +<p>В этом случае <code>this</code> вложенной функции не будет установлен, так что будет возвращен global/window объект.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость">Совместимость</h2> + + + +<p>{{Compat("javascript.operators.this")}}</p> + +<h2 id="See_also" name="See_also">Смотри также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li> + <li><a href="http://bjorn.tipling.com/all-this">All this</a>, статья о <code>this</code> в разном контексте</li> + <li><a href="https://rainsoft.io/gentle-explanation-of-this-in-javascript/">Краткое объяснение ключевого слова 'this' в JavaScript</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/typeof/index.html b/files/ru/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..f3a5ca27a3 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,242 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор <strong><code>typeof</code></strong> возвращает строку, указывающую тип операнда.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>Операнд следует за оператором <code>typeof</code>:</p> + +<pre class="syntaxbox">typeof <em>operand</em></pre> + +<h3 id="Параметры">Параметры</h3> + +<p><code><em>operand</em></code> является выражением, представляющим объект или {{Glossary("Primitive", "примитив")}}, тип которого должен быть возвращен.</p> + +<h2 id="Описание">Описание</h2> + +<p>В следующей таблице приведены возможные возвращаемые значения <code>typeof</code>. Дополнительная информация о типах и примитивах находится на странице <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Data_structures">структуры данных JavaScript</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type</th> + <th scope="col">Result</th> + </tr> + </thead> + <tbody> + <tr> + <td>Undefined</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>Null</td> + <td><code>"object" </code>(смотрите ниже)</td> + </tr> + <tr> + <td>Boolean</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>Number</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>String</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>Symbol (новый тип из ECMAScript 2015)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>Host object (определено JS окружением)</td> + <td><em>Зависит от реализации</em></td> + </tr> + <tr> + <td>Function object (реализует [[Call]] в терминах ECMA-262)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>Любой другой тип</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<pre class="brush:js">// Числа +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof(42) === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // несмотря на то, что это "Not-A-Number" (не число) +typeof Number(1) === 'number'; // никогда не используйте эту запись! + + +// Строки +typeof '' === 'string'; +typeof 'bla' === 'string'; +typeof '1' === 'string'; // обратите внимание, что число внутри строки всё равно имеет тип строки +typeof (typeof 1) === 'string'; // typeof всегда вернёт в этом случае строку +typeof String('abc') === 'string'; // никогда не используйте эту запись! + + +// Booleans +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(true) === 'boolean'; // никогда не используйте эту запись! + + +// Символы +typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Undefined +typeof undefined === 'undefined'; +typeof declaredButUndefinedVariable === 'undefined'; +typeof undeclaredVariable === 'undefined'; + + +// Объекты +typeof {a: 1} === 'object'; + +// используйте <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> или Object.prototype.toString.call +// чтобы различить обычные объекты и массивы +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; + + +// То что ниже приводит к ошибкам и проблемам. Не используйте! +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String('abc') === 'object'; + + +// Функции +typeof function() {} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function'; +</pre> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js">// Это было определено с рождения JavaScript +typeof null === 'object'; +</pre> + +<p> </p> + +<p>В первой реализации JavaScript значения были представлены парой тип тега и значение. Тип тега для объектов равнялся 0. <code>null</code> был представлен как нулевой указатель (0x00 в большинстве платформ). Следовательно, тип тега для <code>null</code> равнялся нулю, поэтому возвращаемое значение <code>typeof</code> является фиктивным. (<a href="http://www.2ality.com/2013/10/typeof-null.html">подробнее</a>)</p> + +<p>Исправление было предложено в ECMAScript (через отключение), но <a href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">было отклонено</a>. Это привело бы к тому, что <code>typeof null === 'null'</code>.</p> + +<h3 id="Использование_оператора_new">Использование оператора <code>new</code></h3> + +<pre class="brush:js">// Все функции-конструкторы, созданные с помощью 'new', будут иметь тип 'object' +var str = new String('String'); +var num = new Number(100); + +typeof str; // Вернёт 'object' +typeof num; // Вернёт 'object' + +// Но существует исключение для конструктора Function + +var func = new Function(); + +typeof func; // Вернёт 'function' +</pre> + +<h3 id="Регулярные_выражения">Регулярные выражения</h3> + +<p>Вызываемые регулярные выражения были нестандартным дополнением в некоторых браузерах.</p> + +<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 Не соответствует ECMAScript 5.1 +typeof /s/ === 'object'; // Firefox 5+ Соответствует ECMAScript 5.1 +</pre> + +<h3 id="Ошибки_связанные_с_временными_мёртвыми_зонами">Ошибки, связанные с временными мёртвыми зонами</h3> + +<p>До ECMAScript 2015, гарантировалось, что оператор <code>typeof</code> вернёт строку для любого операнда, с которым он был вызван. Это изменилось после добавления неподнимающихся объявлений <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/const">const</a></code> с блочной областью видимости. Теперь, если переменные объявлены с помощью <code>let</code> и <code>const</code>, и для них вызывается <code>typeof</code> в блоке объявления переменных, но до объявления, то выбрасывается <code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>. Поведение отличается от необъявленных переменных, для которых <code>typeof</code> вернёт 'undefined'. Переменные с блочной областью видимости находятся в "<a href="/ru/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">временной мёртвой зоне</a>", которая длится от начала блока до момента объявления переменных. В этой зоне попытка доступа к переменным выбрасывает исключение.</p> + +<pre class="brush: js">typeof undeclaredVariable === 'undefined'; +typeof newLetVariable; let newLetVariable; // ReferenceError +typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError +</pre> + +<h3 id="Исключения">Исключения</h3> + +<p>Во всех текущих браузерах существует нестандартный host-объект {{domxref("document.all")}}, который имеет тип Undefined.</p> + +<pre class="brush:js">typeof document.all === 'undefined'; +</pre> + +<p>Хотя спецификация разрешает собственные имена типов для нестандартных экзотических объектов, требуется чтобы эти имена отличались от предопределённых. Ситуация, когда <code>document.all</code> имеет тип <code>undefined</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('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение. Реализовано в JavaScript 1.1</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="IE-специфичные_замечания">IE-специфичные замечания</h2> + +<p>В IE 6, 7 и 8 многие host-объекты являются объектами, но не функциями. Например:</p> + +<pre class="brush: js">typeof alert === 'object'</pre> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code><a href="/ru/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> + <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Why typeof is no longer "safe"</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/void/index.html b/files/ru/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..e415aacae7 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/void/index.html @@ -0,0 +1,150 @@ +--- +title: void operator +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Операторы + - Унарные +translation_of: Web/JavaScript/Reference/Operators/void +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор <code>void</code></strong> вычисляет переданное <em>выражение</em> и возвращает {{jsxref("Global_Objects/undefined", "undefined")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">void <em>expression</em></pre> + +<h2 id="Описание">Описание</h2> + +<p>Этот оператор позволяет вставлять выражения, которые производят дополнительные действия, в места, где ожидается {{jsxref("Global_Objects/undefined", "undefined")}}.</p> + +<p>Оператор <code>void</code> часто используется для получения примитивного значения <code>undefined</code>, используя <code>"void(0)"</code> (что эквивалентно <code>"void 0"</code>). В подобных случаях можно просто использовать глобальную переменную {{jsxref("Global_Objects/undefined", "undefined")}} (предполагая, что её значение по умолчанию не было изменено).</p> + +<h2 id="Самовызывающаяся_функция_(IIFE)">Самовызывающаяся функция (IIFE)</h2> + +<p>С оператором void можно использовать самовызывающиеся функции.</p> + +<pre class="brush: js">void function iife() { + var bar = function () {}; + var baz = function () {}; + var foo = function () { + bar(); + baz(); + }; + var biz = function () {}; + + foo(); + biz(); +}(); +</pre> + +<h2 id="JavaScript_URIs">JavaScript URIs</h2> + +<p>Когда браузер переходит по <code>javascript: URI</code>, он вычисляет код в <code>URI</code> и заменяет содержание страницы возвращенным значением, если оно не равно {{jsxref("Global_Objects/undefined", "undefined")}}. Можно воспользоваться оператором <code>void</code> для возврата {{jsxref("Global_Objects/undefined", "undefined")}}. Например:</p> + +<pre class="brush: html"><a href="javascript:void(0);"> + Click here to do nothing +</a> + +<a href="javascript:void(document.body.style.backgroundColor='green');"> + Click here for green background +</a> +</pre> + +<p>Однако заметим, что не рекомендуется использовать псевдо-протокол <code>javascript:</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('ESDraft', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение. Реализована в JavaScript 1.1.</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><code><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/yield/index.html b/files/ru/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..04552374c8 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,94 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript6 + - JavaScript + - Генераторы + - Итераторы + - Оператор + - Экспериментальный +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Ключевое слово <code>yield</code> используется для остановки и возобновления функций-генераторов ({{jsxref("Statements/function*", "function*")}} или <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">legacy generator function</a>).</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox language-html notranslate"> [<em>rv</em>] = <strong>yield</strong> [[выражение]];</pre> + +<dl> + <dt><code>выражение</code></dt> + <dd>Возвращаемое выражение. Если не указано, то возвращается значение <code>undefined</code>.</dd> + <dt><code>rv</code></dt> + <dd>Возвращает необязательное значение, которое передаётся в <code>next()</code> генератора, чтобы возобновить его выполнение.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Ключевое слово <code>yield</code> вызывает остановку функции-генератора и возвращает текущее значение выражения, указанного после ключевого слова <code>yield</code>. Его можно рассматривать как аналог ключевого слова <code>return</code> в функции-генераторе.</p> + +<p>На самом деле ключевое слово <code>yield</code> возвращает объект с двумя параметрами, <code>value</code> и <code>done</code>. При этом, <code>value</code> является результатом вычисления выражения после <code>yield</code>, а <code>done</code> указывает, была ли завершена функция-генератор.</p> + +<p>Во время остановки на операторе <code>yield</code>, выполнение кода в функции-генераторе не возобновится, пока не будет вызван метод <code>next()</code> возвращаемого функцией <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Generator">объекта-генератора</a>. Это предоставляет непосредственный контроль за выполнением генератора и возвратом его значений.</p> + +<h2 id="Examples" name="Examples">Примеры</h2> + +<p>Следующий фрагмент кода содержит определение функции-генератора и вспомогательной функции:</p> + +<pre class="brush: js notranslate">function* foo(){ + var index = 0; + while(index <= 2) // при достижении 2, done в yield станет true, а value undefined; + yield index++; +}</pre> + +<p>После того как тело функции-генератора определено, оно может использоваться для получения итератора:</p> + +<pre class="brush: js notranslate">var iterator = foo(); +console.log(iterator.next()); // { value:0, done:false } +console.log(iterator.next()); // { value:1, done:false } +console.log(iterator.next()); // { value:2, done:false } +console.log(iterator.next()); // { value:undefined, done:true } +</pre> + +<h2 id="Specifications" name="Specifications">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Изначальное определение.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="See_also" name="See_also">Cмотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Guide/The_Iterator_protocol">Итераторы</a></li> + <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/function*">Генераторы</a> </li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 113px; top: 1785px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/ru/web/javascript/reference/operators/yield_star_/index.html b/files/ru/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..c20f6969e6 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,227 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Выражение <code>yield*</code> </strong>используется для того, чтобы "передать упраевление" функцией-генератором другому {{jsxref("Statements/function*", "генератору")}} или итерируемому объекту.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Итерируемый объект</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Выражение <code>yield*</code> в функции-генераторе принимает итерируемый объект и возвращает его значения по очереди, как если бы эта функция-генератор возвращала иъ сама.</p> + +<p>Значение выражения <code>yield*</code> само по себе равно посленему значению итурируемого объекта (т.е., того когда <code>done</code> равно true).</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Передача_другому_генератору">Передача другому генератору</h3> + +<p>В следующем примере, значения полученные из <code>g1()</code> возвращаются из <code>g2</code> вызовами <code>next</code>, как будто бы она вычислила их сама.</p> + +<pre class="brush: js notranslate">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: 4, done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Другие_итерируемые_объекты">Другие итерируемые объекты</h3> + +<p>Помимо объектов генераторов, <code>yield*</code> может перебирать другие виды итерируемых объектов, т.е. массивы, строки, объекты аргументов и др.</p> + +<pre class="brush: js notranslate">function* g3() { + yield* [1, 2]; + yield* "34"; + yield* Array.from(arguments); + // Определение этого итератора ниже + yield* new PowesOfTwo(4) +} + +var iterator = g3(5, 6); + +// Значения из массива +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +// Из строки +console.log(iterator.next()); // { value: "3", done: false } +console.log(iterator.next()); // { value: "4", done: false } +// Из аргументов +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: 6, done: false } +// Из специального итератора +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 4, done: false } + +console.log(iterator.next()); // { value: undefined, done: true } + +// Итератор, который возвращает все степени двойки +// до maximum включительно +class PowersOfTwo { + constructor(maximum) { + this.maximum = maximum + this.value = 1 + } + [Symbol.iterator]() { + const self = this + return { + next() { + if(self.value > self.maximum) return { done: true } + + const value = self.value + self.value *= 2 + return { done: false, value } + } + } + } +} +</pre> + +<h3 id="Собственное_значение_выражения_yield*">Собственное значение выражения <code>yield*</code></h3> + +<p><code>yield*</code> - это выражение, а не оператор, поэтому оно имеет значение, равное последнему значению итератора </p> + +<pre class="brush: js notranslate">function* g4() { + yield* [1, 2, 3]; + return "foo"; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: undefined, done: true }, + // g4() в этой точке вернёт { value: "foo", done: true } + +console.log(result); // "foo" +</pre> + +<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('ES6', '#', 'Yield')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>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>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Специфичные_для_Firefox_примечания">Специфичные для Firefox примечания</h2> + +<ul> + <li>Начиная с Gecko 33 {{geckoRelease(33)}}, разбор выражений yield было приведено к соответствию с последними спецификациями ES6 ({{bug(981599)}}): + <ul> + <li>Реализована корректная обработка разрыва строки. Разрыва строки между "yield" и "*" быть не может. Такой код вызовет {{jsxref("SyntaxError")}}: + <pre class="brush: js notranslate">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/группировка/index.html b/files/ru/web/javascript/reference/operators/группировка/index.html new file mode 100644 index 0000000000..ecc180ab21 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/группировка/index.html @@ -0,0 +1,91 @@ +--- +title: Оператор группировки +slug: Web/JavaScript/Reference/Operators/Группировка +tags: + - JavaScript + - Оператор + - Основные выражения +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Оператор группировки <code>( )</code> контролирует порядок выполнения в выражениях.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Описание">Описание</h2> + +<p>Оператор группировки из пары круглых скобок вокруг выражения или подвыражения, переопределяющего нормальный <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">приоритет операторов</a>, так что выражения с меньшим приоритетом выполняются раньше выражений с большим.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Переопределяем порядок, когда сначала выполняется умножение и деление, а потом сложение и вычитание, чтобы сначала выполнить сложение.</p> + +<pre class="brush:js">let a = 1; +let b = 2; +let c = 3; + +// обычный порядок +a + b * c // 7 +// выполнится так +a + (b * c) // 7 + +// теперь переопределим порядок +// сложение будет до умножения +(a + b) * c // 9 + +// что эквивалентно следующему +a * c + b * c // 9 +</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-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("javascript.operators.grouping")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Приоритет операторов</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html b/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html new file mode 100644 index 0000000000..fa43c6d346 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/конвейерный_оператор/index.html @@ -0,0 +1,77 @@ +--- +title: Конвейерный оператор +slug: Web/JavaScript/Reference/Operators/Конвейерный_оператор +tags: + - Experimental + - JavaScript + - Operator + - Оператор + - Экспериментальный +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p>Экспериментальный конвейерный оператор <code>|></code> (в настоящее время на этапе 1) позволяет создавать читаемые цепочки вызовов функций. В основном, конвейерный оператор предоставляет возможность вызова функции с одним аргументом, и позволяет написать:</p> + +<pre class="brush: js"><code>let url = "%21" |> decodeURI;</code> +</pre> + +<p>Эквивалентный вызов в традиционном синтаксисе выглядит следующим образом:</p> + +<pre class="brush: js"><code>let url = decodeURI("%21");</code> +</pre> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>выражение</em> |> <em>функция</em></pre> + +<p>Значение указанного <code>выражения</code> передаётся в <code>функцию</code> в качестве единственного параметра.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Цепочки_вызовов_функций">Цепочки вызовов функций</h3> + +<p>Конвейерный оператор позволяет улучшить читаемость кода, в случае когда встречается цепочка из нескольких функций.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// без конвейерного оператора +double(increment(double(double(5)))); // 42 + +// с конвейерным оператором +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> + <td>Этап 1</td> + <td>Еще не включен в спецификацию ECMAScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/логические_операторы/index.html b/files/ru/web/javascript/reference/operators/логические_операторы/index.html new file mode 100644 index 0000000000..43878ea58c --- /dev/null +++ b/files/ru/web/javascript/reference/operators/логические_операторы/index.html @@ -0,0 +1,299 @@ +--- +title: Логические операторы +slug: Web/JavaScript/Reference/Operators/Логические_операторы +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>Логические операторы используются, как правило, с примитивами {{jsxref("Boolean")}} (логического) типа. В этом случае результатом работы оператора является значение типа Boolean. Между тем операторы && и || возвращают, вообще говоря, значение одного из операнда, потому при использовании в качестве аргументов этих операторов величин, тип которых отличен от Boolean, тип возвращаемого значения может быть отличным от Boolean.</div> + +<div></div> + +<h2 id="Описание">Описание</h2> + +<p>В таблице приведены описания логических операторов:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Оператор</th> + <th>Использование</th> + <th>Описание</th> + </tr> + <tr> + <td>Логическое И (&&)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в false; иначе возвращает значение <code>expr2</code>. Таким образом, при использовании с величинами типа Boolean оператор && вернет true, если оба операнда могут быть преобразованы в true; иначе оператор && вернет false. </td> + </tr> + <tr> + <td>Логическое ИЛИ (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td> + <p>Возвращает значение <code>expr1</code>, если оно может быть преобразовано в true; иначе возвращает значение <code>expr2.</code> Таким образом, при использовании с величинами типа Boolean оператор <code>||</code> вернет <code>true</code> если хоть один из них равен <code>true</code>; в других случаях вернет <code>false</code>.</p> + </td> + </tr> + <tr> + <td>Логическое НЕ (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>Возвращает false если значение <code>expr </code>можно<font face="Consolas, Liberation Mono, Courier, monospace"> </font>привести к <code>true</code>; в противоположном случае возвращает <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>Примеры значений выражений, которые могут быть преобразованы в <code>false</code>:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN;</code></li> + <li><code>0</code>;</li> + <li>пустая строка (<code>""</code>); </li> + <li><code>undefined</code>.</li> +</ul> + +<p>Хоть операторы <code>&&</code> и <code>||</code> могут использовать операнды с не булевыми значениями, но они всёравно рассматриваются, как булевы операторы, т.к. их возвращаемые ими значения всегда могут быть сконвертированы в булевы значения.</p> + +<h3 id="Короткая_схема_вычислений">Короткая схема вычислений</h3> + +<p>Так как логические операторы выполняются слева направо, они проверяются на "короткие вычисления" по следующим правилам:</p> + +<ul> + <li><code>false && (<em>anything)</em></code> короткое вычисление дающее false.</li> + <li><code>true || (<em>anything)</em></code> короткое замыкание дающее true.</li> +</ul> + +<p>Часть выражения <code>(<em>anything)</em></code> не вычисляется. Если в ней есть вызов функции, то эта функция не будет вызвана.</p> + +<p>Например, следующие две функции делают одно и тоже:</p> + +<pre class="brush: js">function shortCircuitEvaluation() { + doSomething() || doSomethingElse() +} + +function equivalentEvaluation() { + var flag = doSomething(); + if (!flag) { + doSomethingElse(); + } +} +</pre> + +<p>Однако, следующие выражения дают разный результат в связи с <a href="/ru/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">приоритетом операторов</a>.</p> + +<pre class="brush: js">false && true || true // вернёт true +false && (true || true) // вернёт false</pre> + +<h3 id="Логическое_И"><a name="Logical_AND">Логическое И (<code>&&</code>)</a></h3> + +<p>Следующий код показывает пример оператора <code>&&</code> (логическое И).</p> + +<pre class="brush: js">a1 = true && true // t && t вернёт true +a2 = true && false // t && f вернёт false +a3 = false && true // f && t вернёт false +a4 = false && (3 == 4) // f && f вернёт false +a5 = "Cat" && "Dog" // t && t вернёт "Dog" +a6 = false && "Cat" // f && t вернёт false +a7 = "Cat" && false // t && f вернёт false +</pre> + +<h3 id="Логическое_ИЛИ"><a name="Logical_OR">Логическое ИЛИ (<code>||</code>)</a></h3> + +<p>Это код представляет собой пример оператора <code>||</code> (логическое ИЛИ).</p> + +<pre class="brush: js">o1 = true || true // t || t вернёт true +o2 = false || true // f || t вернёт true +o3 = true || false // t || f вернёт true +o4 = false || (3 == 4) // f || f вернёт false +o5 = "Cat" || "Dog" // t || t вернёт "Cat" +o6 = false || "Cat" // f || t вернёт "Cat" +o7 = "Cat" || false // t || f вернёт "Cat" +</pre> + +<h3 id="Логическое_НЕ_!"><a name="Logical_NOT">Логическое НЕ (<code>!</code>)</a></h3> + +<p>Следующий код является примером оператора <code>!</code> (логическое НЕ).</p> + +<pre class="brush: js">n1 = !true // !t вернёт false +n2 = !false // !f вернёт true +n3 = !"Cat" // !t вернёт false +</pre> + +<h3 id="Правила_преобразования">Правила преобразования</h3> + +<h4 id="Конвертирование_И_в_ИЛИ">Конвертирование И в ИЛИ</h4> + +<p>следующая операция использует булев тип:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>это всегда равно:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Конвертирование_ИЛИ_в_И">Конвертирование ИЛИ в И</h4> + +<p>эта операция использует булев тип:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>что эквивалентно:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Конвертирование_многих_НЕ">Конвертирование многих НЕ</h4> + +<p>следующая операция использует булев тип:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>что равно:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Удаление_вложенных_скобок">Удаление вложенных скобок</h3> + +<p>Так как логические выражения выполняются слева направо, становится возможным удалить круглые скобки из комплексного выражения, следуя следующим правилам.</p> + +<h4 id="Удаление_вложенных_И">Удаление вложенных И</h4> + +<p>Это составное выражение использует булев тип:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>что будет равным:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Удаление_вложенного_ИЛИ">Удаление вложенного ИЛИ</h4> + +<p>Следующее составное выражение использует булев тип:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>всегда равно:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</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('ES5.1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Изначальное определение</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логический оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бинарные логические операторы</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Логический оператор НЕ</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Бинарные логические операторы</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Определено в нескольких секциях спецификации: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Логический оператор НЕ</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Бинарные логические операторы</a></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><a href="#Logical_AND">Логическое И (<code>&&</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Logical_OR">Логическое ИЛИ (<code>||</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Logical_NOT">Логическое НЕ (<code>!</code>)</a></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><a href="#Logical_AND">Логическое И (<code>&&</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Logical_OR">Логическое ИЛИ (<code>||</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Logical_NOT">Логическое НЕ (<code>!</code>)</a></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/Operators/Bitwise_Operators">Битовые операторы</a></li> + <li><a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/оператор_запятая/index.html b/files/ru/web/javascript/reference/operators/оператор_запятая/index.html new file mode 100644 index 0000000000..471c81ba88 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/оператор_запятая/index.html @@ -0,0 +1,103 @@ +--- +title: Оператор Запятая +slug: Web/JavaScript/Reference/Operators/Оператор_Запятая +tags: + - Оператор запятая +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Оператор запятая</strong> выполняет каждый из его операндов (слева направо) и возвращает значение последнего операнда.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h2 id="Параметры">Параметры</h2> + +<dl> + <dt><code>expr1</code>, <code>expr2, expr3...</code></dt> + <dd>Любые выражения.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Вы можете использовать оператор запятая, когда необходимо включить несколько выражений в место, которое принимает только одно выражение. Наиболее частый пример использования этого оператора - это передача нескольких параметров в цикл <code>for</code>.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Если <code>a</code> это двумерный массив элементов размерностью 10 х 10, то приведенный ниже код использует оператор запятая для одновременного изменения двух переменных за раз.</p> + +<p>Следующий код выводит в консоль значения диагональных элементов массива:</p> +<pre class="brush:js;highlight:[1]">for (let i = 0, j = 9; i <= 9; i++, j--) + console.log("a[" + i + "][" + j + "] = " + a[i][j]);</pre> + +<p>Заметьте, что запятая при объявлении переменной <code>var</code>, <code>let</code> или <code>const</code> <strong>не</strong> является оператором запятая, так как в данном случае она находится не в выражении. Скорее, это спец символ в объявлении переменных, комбинирующий их множество в одно выражение. Практически, эта запятая ведет себя почти так же, как и запятая.</p> + +<pre class="brush: js"> // подобное объявление запрещено в строгом режиме(strict mode) + +a = b = 3, c = 4; // возвращает 4 в консоль +console.log(a); // 3 +x = (y = 5, z = 6); // возвращает 6 в консоль +console.log(x); // 6 +</pre> + +<p>Оператор запятая полностью отличается от запятой в массивах, объектах, аргументах и параметрах функции.</p> + +<h3 id="Вычисления_и_возврат_значения">Вычисления и возврат значения</h3> + +<p>Другой пример использования оператора запятой – вычисления перед возвратом значения. Как было указано ранее, будет возвращён только последний элемент, но все предыдущие также будут вычислены. Таким образом можно сделать:</p> + +<pre class="brush: js">function myFunc () { + let x = 0; + + return (x += 1, x); // то же самое, что return ++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>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> + </table> + +<h2 id="Совместимость_браузеров">Совместимость браузеров</h2> + + + +<p>{{Compat("javascript.operators.comma")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html b/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html new file mode 100644 index 0000000000..f565d7d293 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/операторы_сравнения/index.html @@ -0,0 +1,285 @@ +--- +title: Операторы сравнения +slug: Web/JavaScript/Reference/Operators/Операторы_сравнения +tags: + - JavaScript + - Операторы +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>В JavaScript имеются как строгие сравнения, так и сравнения с преобразованием типа операндов. Строгие сравнения (к примеру, ===) истинны только в том случае, если типы сравниваемых значений являются одинаковыми (к примеру: string-string, number-number). Однако, чаще используются сравнения с преобразованием типов (к примеру, ==). Такой тип сравнения, перед тем как непосредственно выполнить сравнение, приводит операнды к одному типу. В случае же абстрактного реляционного сравнения, операнды сперва преобразуются в примитивы, затем приводятся к одному типу, и только после этого сравниваются.</p> + +<p>Строки сравниваются на основе стандартного лексикографического упорядочения, используя значения Unicode.</p> + +<p>Особенности сравнений:</p> + +<ul> + <li>Две строки строго равны только в том случае, если они имеют одинаковую длину, и те же символы в одинаковой последовательности и соответствующих позициях.</li> + <li>Два числа строго равны в том случае, если они численно равны. <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> не равно ничему, в том числе и NaN. Нули с положительным и отрицательным знаком равны.</li> + <li>Два логических значения (boolean) равны только в том случае, если они оба <code>истинны (true)</code> или <code>ложны (false</code>).</li> + <li>Два различных объекта никогда не равны как в строгих, так и в абстрактных сравнениях.</li> + <li>Сравнение объекта истинно лишь в том случае, если оба операнда ссылаются на один и тот же объект в памяти.</li> + <li>Виды <code>null</code> и <code>undefined</code> равны себе как в строгом сравнении, так и в абстрактном.</li> +</ul> + +<p><strong>При использовании сравнения с преобразованием типов, следует быть крайне осторожным, так как это может привести к непредвиденным проблемам, связанным с особенностями конвертации различных типов (см. параграф "Использование операторов равенства").</strong></p> + +<h2 id="Операторы_равенства">Операторы равенства</h2> + +<h3 id="Равно"><a name="Equality">Равно (==)</a></h3> + +<p><em>Оператор равно</em> сначала приводит операнды к одному типу, и затем применяет строгое сравнение. Если оба операнда являются объектами, то JavaScript сравнивает внутренние ссылки, которые равны в том случае, если они ссылаются на один и тот же объект в памяти.</p> + +<h4 id="Синтаксис">Синтаксис</h4> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h4 id="Примеры">Примеры</h4> + +<pre class="brush: js notranslate"> 1 == 1 // истина +"1" == 1 // истина + 1 == '1' // истина + 3 == 5 // ложь + 0 == false // истина +"foo" == "bar" // ложь +</pre> + +<h3 id="Не_равно_!"><a name="Inequality">Не равно (!=)</a></h3> + +<p><em>Оператор не равно</em> возвращает <code>true</code> в том случае, если операнды не равны.<em>Он </em>аналогичен оператору равенства, перед сравнением приводит операнды к одному типу. В случае если оба операнда являются объектами, JavaScript сравнивает внутренние ссылки, которые не равны в том случае, если относятся к разным объектам в памяти.</p> + +<h4 id="Синтаксис_2">Синтаксис</h4> + +<pre class="syntaxbox notranslate">x != y</pre> + +<h4 id="Примеры_2">Примеры</h4> + +<pre class="brush: js notranslate">1 != 2 // истина +1 != "1" // ложь +1 != '1' // ложь +1 != true // ложь +0 != false // ложь +"foo" != "bar" // истина +</pre> + +<h3 id="Строго_равно"><a name="Identity">Строго равно (===)</a></h3> + +<p>Оператор возвращает истину в том случае, если операнды строго равны (см. выше). В отличие от <em>оператора равно</em>, данный оператор <strong>не приводит операнды к одному типу.</strong></p> + +<h4 id="Синтаксис_3">Синтаксис</h4> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h4 id="Примеры_3">Примеры</h4> + +<pre class="brush: js notranslate">3 === 3 // истина +3 === '3' // ложь +'foo' === 'foo' // истина +</pre> + +<h3 id="Строго_не_равно_!"><a name="Nonidentity">Строго не равно (!==)</a></h3> + +<p><em>Оператор строго не равно </em>возвращает истину в том случае, <strong>если операнды не равны, или их типы отличаются друг от друга.</strong></p> + +<h4 id="Синтаксис_4">Синтаксис</h4> + +<pre class="syntaxbox notranslate">x !== y</pre> + +<h4 id="Примеры_4">Примеры</h4> + +<pre class="brush: js notranslate">3 !== '3' // истина +4 !== 3 // истина +</pre> + +<h2 id="Операторы_сравнения">Операторы сравнения</h2> + +<h3 id="Больше_>"><a name="Greater_than_operator">Больше (>)</a></h3> + +<p><em>Оператор больше</em> возвращает истину в том случае, если значение левого операнда больше, чем правого.</p> + +<h4 id="Синтаксис_5">Синтаксис</h4> + +<pre class="syntaxbox notranslate">x > y</pre> + +<h4 id="Примеры_5">Примеры</h4> + +<pre class="brush: js notranslate">4 > 3 // истина +1 > 5 // ложь +</pre> + +<h3 id="Больше_или_равно_>"><a name="Greater_than_or_equal_operator">Больше или равно (>=)</a></h3> + +<p><em>Оператор больше или равно, </em>возвращает истину в том случае, если значение операнда слева больше или равно значению операнда справа.</p> + +<h4 id="Синтаксис_6">Синтаксис</h4> + +<pre class="syntaxbox notranslate"> x >= y</pre> + +<h4 id="Примеры_6">Примеры</h4> + +<pre class="brush: js notranslate">4 >= 3 // истина +3 >= 3 // истина +</pre> + +<h3 id="Меньше<"><a name="Less_than_operator">Меньше(<)</a></h3> + +<p><em>Оператор меньше, </em>возвращает истину в том случае, если значение операнда слева меньше, чем значение операнда справа.</p> + +<h4 id="Синтаксис_7">Синтаксис</h4> + +<pre class="syntaxbox notranslate"> x < y</pre> + +<h4 id="Примеры_7">Примеры</h4> + +<pre class="brush: js notranslate">3 < 4 // истина +5 < 2 // ложь +</pre> + +<h3 id="Меньше_или_равно_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Меньше или равно (<=)</a></h3> + +<p><em>Оператор меньше или равно, </em>возвращает истину в том случае, если значение операнда слева меньше, или равно значению операнда справа.</p> + +<h4 id="Синтаксис_8">Синтаксис</h4> + +<pre class="syntaxbox notranslate"> x <= y</pre> + +<h4 id="Примеры_8">Примеры</h4> + +<pre class="brush: js notranslate">3 <= 4 // истина +3 <= 3 // истина +</pre> + +<h2 id="Использование_операторов_равенства">Использование операторов равенства</h2> + +<p>Стандартные операции равенства с преобразованием типов (<code>==</code> и <code>!=</code>) используют <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Абстрактный Алгоритм Эквивалентного Сравнения</a> для сравнения двух операндов. Если у операндов различные типы, то JavaScript пытается привести их к одному типу, перед тем как сравнивать их. К примеру, в выражении <code>5 == '5'</code>, строка справа конвертируется в число, и только потом сравнивается.</p> + +<p><em>Операторы строгого равентсва</em> (<code>===</code> и <code>!==</code>) используют Строгий Алгоритм Эквивалентного Сравнения, и предназначены для сравнения операндов одного типа. <strong>Если операнды имеют разные типы, то результат операции сравнения всегда будет ложью.</strong> К примеру, выражение <code>5 !== '5'</code> будет истинным.</p> + +<p>Используйте <em>операторы строгого равенства</em> в тех случаях, когда необходимо проверять не только значения операндов, но так же и их типы. Во противном случае, используйте операторы стандартного равенства, которые позволяют сравнить два операнда вне зависимости от их типов.</p> + +<p>Когда происходит преобразование типов (т.е в случаях использования нестрогого сравнения), JavaScript преобразует типы String, Number, Boolean и Object, следующим образом:</p> + +<ul> + <li>При сравнении числа <code>(Number)</code> и строки <code>(String)</code>, JavaScript пытается преобразовать числовой литерал строки в число. Затем полученное число округляется до ближайшего возможного значения типа <code>Number</code>.</li> + <li>Если один из операндов является логическим <code>(Boolean)</code>, то он преобразуется в значение типа <code>(Number)</code>. <strong>Если значение логического операнда равняется истине <code>(true)</code>, то значение этого операнда преобразуется в 1. Иначе - в 0 <code>(ложь / false)</code>.</strong></li> + <li>Если объект сравнивается с числом или строкой, JavaScript пытается получить значение по умолчанию для данного объекта. Полученное значение преобразуется в примитив, посредством методов <strong><code>valueOf()</code></strong> и <strong><code>toString()</code></strong>. Если преобразовать объект не удается, генерируется ошибка времени выполнения.</li> + <li>Обратите внимание на то, что объект преобразуется в примитив, если, и только если, второй операнд является примитивом. В ином случае, операнды сравниваются как объекты, соответственно, операция сравнения вернет истину в том случае, если внутренние ссылки обоих объектов ссылаются на один и тот же объект в памяти.</li> +</ul> + +<div class="note"><strong>Внимание:</strong> Объекты String имеют тип Object, а не String. Такие объекты используются редко, так что следующий код может вас сильно удивить.</div> + +<pre class="brush:js notranslate">// Истина, так как оба операнда имеют тип String +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// Ложь, так как операнды являются объектами, внутренние ссылки которых, ссылаются на разные объекты в памяти +a == b + +// Ложь, так как операнды являются объектами, внутренние ссылки которых, ссылаются на разные объекты в памяти +a === b + +// Истина, так как объект a (String) будет преобразован в строку 'foo', перед сопоставлением +a == 'foo' </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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Добавлены операторы <code>===</code> и <code>!==</code>. Выполняется в JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Определено в нескольких секциях спецификации: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Относительные операторы</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Операторы равенства</a></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> + <p>{{CompatVersionUnknown}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 73px; width: 1078px;"> + <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="Смотрите_также"><br> + Смотрите также</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li><a href="/ru/docs/Web/JavaScript/Equality_comparisons_and_sameness">Операторы сравнения и одинаковость</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/присваивание/index.html b/files/ru/web/javascript/reference/operators/присваивание/index.html new file mode 100644 index 0000000000..0517dc2ccd --- /dev/null +++ b/files/ru/web/javascript/reference/operators/присваивание/index.html @@ -0,0 +1,66 @@ +--- +title: Присваивание (=) +slug: Web/JavaScript/Reference/Operators/Присваивание +tags: + - Assignment operator + - JavaScript + - Language feature + - Operator + - Reference + - Оператор + - Оператор присваивания + - "Особенность\_языка" + - справочник +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Простой оператор присваивания (<code>=</code>) используется для присваивания значения переменной. Операция присваивания вычисляется в присваиваемую величину. Присваивание по цепочке (<em>chaining</em>) используется для назначения нескольким переменным одинакового значения.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</p> + +<div></div> + +<p class="hidden">Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><strong>Оператор:</strong> x = y +</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Простое_и_цепное_присваивание">Простое и цепное присваивание</h3> + +<pre class="brush: js notranslate">// Предположим следующие переменные и их значения +// x = 5 +// y = 10 +// z = 25 + +x = y // x будет присвоено значение 10 +x = y = z // x, y и z будут равны 25</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице составлена из структурированных данных. Если Вы хотите внести свой вклад в данные, пожалуйста, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос.</div> + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> +</ul> diff --git a/files/ru/web/javascript/reference/operators/условный_оператор/index.html b/files/ru/web/javascript/reference/operators/условный_оператор/index.html new file mode 100644 index 0000000000..344d7f21d9 --- /dev/null +++ b/files/ru/web/javascript/reference/operators/условный_оператор/index.html @@ -0,0 +1,169 @@ +--- +title: Условный (тернарный) оператор +slug: Web/JavaScript/Reference/Operators/Условный_оператор +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Условный (тернарный) оператор</strong> - единственный оператор в JavaScript, принимающий три операнда: условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно, сопровождается двоеточием (:), и, наконец, выражение, которое выполняется, если условие ложно. Он часто используется в качестве укороченного варианта условного оператора <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>условие</em> ? <em>выражение1</em> : <em>выражение2 </em></pre> + +<h3 id="Параметры">Параметры</h3> + +<dl> + <dt><code>условие</code></dt> + <dd>Выражение, принимающее значение <code>true</code> или <code>false</code>.</dd> +</dl> + +<dl> + <dt><code>выражение1</code>, <code>выражение2</code></dt> + <dd>Выражения, значения которых могут принадлежать любому типу.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p>Оператор возвращает значение <code>выражения1</code>, если <code>условие</code> верно, и значение <code>выражения2</code> в противном случае. Например, чтобы вывести сообщение, текст которого зависит от значения переменной <code>isMember</code>, можно использовать такое выражение:</p> + +<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>Также можно присваивать значения переменным на основе результатов работы тернарного оператора :</p> + +<pre class="brush: js notranslate">var elvisLives = Math.PI > 4 ? "Да" : "Нет";</pre> + +<p>Возможны множественные тернарные операции (обратите внимание: условный оператор ассоциативен справа):</p> + +<pre class="brush: js notranslate">var firstCheck = false, + secondCheck = false, + access = firstCheck ? "Доступ запрещен" : secondCheck ? "Доступ запрещен" : "Доступ разрешен"; + +console.log( access ); // выводит в консоль "Доступ разрешен"</pre> + +<p>Тернарные операции можно использовать и сами по себе - для выполнения различных операций:</p> + +<pre class="brush: js notranslate">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>Также возможно выполнять несколько операций на каждое сравнение, разделив их запятыми:</p> + +<pre class="brush: js notranslate">var stop = false, age = 23; + +age > 18 ? ( + alert("Хорошо, вы можете продолжить."), + location.assign("continue.html") +) : ( + stop = true, + alert("Простите, вы еще так юны!") +); +</pre> + +<p>При присвоении значения также возможно выполнение более одной операции. В этом случае переменной <strong>будет присвоено то значение, </strong><em><strong>которое стоит последним в списке значений, разделенных запятой</strong></em>.</p> + +<pre class="brush: js notranslate">var age = 16; + +var url = age > 18 ? ( + alert("Хорошо, вы можете продолжить."), + // alert вернет "undefined", но это будет проигнорировано, потому что + // не является последним в списке значений, разделенных запятой + "continue.html" // значение будет присвоено, если age > 18 +) : ( + alert("Вы слишком молоды!"), + alert("Простите :-("), + // ит.д. ит.д. + "stop.html" // значение будет присвоено, если !(age > 18) +); + +location.assign(url); // "stop.html"</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-conditional-operator', 'Условный Оператор')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'Условный оператор')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'Условный оператор')}}</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><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> |