diff options
Diffstat (limited to 'files/ru/web/javascript/reference/operators/destructuring_assignment/index.html')
-rw-r--r-- | files/ru/web/javascript/reference/operators/destructuring_assignment/index.html | 339 |
1 files changed, 339 insertions, 0 deletions
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> |