path: root/files/ru/web/javascript/reference/operators/destructuring_assignment/index.html

---
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>{{Compat}}</p>