Вы не знаете деструктуризацию, пока

Для будущих студентов курса «React.js Developer» подготовили перевод полезной статьи.

Также приглашаем вас записаться на открытый урок по теме: «Пишем приложение на React+Redux».

---

С тех пор, как в ES6 была введена деструктуризация (destructuring assignment), прошло уже достаточно времени — теперь она поддерживается во всех передовых браузерах. Ее можно использовать в любой допустимой операции присваивания, например, при присваивании значений переменным, параметрам функции и т. д. Для начала давайте рассмотрим, что такое деструктуризация.

Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.

const array = [1, 2, 3]; const obj = { x: 4, y: 5, z: 6 };  const a = array[0], b = array[1], c = array[2]; const x = obj.x, y = obj.y, z = obj.z  console.log(a, b, c); // 1 2 3 console.log(x, y, z); // 4 5 6

Так мы поступали в эпоху до деструктуризации. А теперь давайте сделаем это в стиле ES6.

const array = [1, 2, 3]; const obj = { x: 4, y: 5, z: 6 };  const [ a, b, c ] = array; const { x, y, z } = obj;   console.log(a, b, c); // 1 2 3 console.log(x, y, z); // 4 5 6

Выглядит намного лучше. Получив общее представление, давайте копнем глубже.

Шаблон присваивания свойств объекта

Давайте подробнее остановимся на синтаксисе const {x, y, z} = obj из предыдущего фрагмента. На самом деле это сокращение от const {x: x, y: y, z: z} = obj. Если имя сопоставляемого свойства совпадает с именем переменной, которую вы хотите объявить, вы можете сократить синтаксис. Здесь мы оставим x: часть { x: x, .. }.

Обычно операции присваивания следуют шаблону target = source или target: source, но для деструктуризации действителен шаблон source: target. Рассмотрим пример:

const obj = { x: 4, y: 5, z: 6 }; const { x: X, y: Y, z: Z } = obj;  console.log(X, Y, Z); // 4, 5, 6

Здесь объявляются переменные с именами X, Y, Z и им присваиваются значения obj.x, obj.y, obj.z соответственно. Следовательно, если имя сопоставляемого свойства совпадает с именем переменной, вы можете использовать сокращение. JS-движок выполнит эту работу за нас, позволяя нам сделать код немного чище.

Присвойте позже

Как упоминалось ранее, деструктуризация может использоваться в любой допустимой операции присваивания. Это означает, что вам не обязательно нужно использовать операцию деструктуризации именно при объявлении переменных. Для уже объявленной переменной деструктуризация выполняет только назначения, точно так же, как и с другими назначениями переменных. Рассмотрим пример:

let a, b, c, x, y, z;  [a, b, c] = [1, 2, 3]; ({x, y, z} = { x: 4, y: 5, z: 6 });  console.log(a, b, c, x, y, z); // 1 2 3 4 5 6

Для деструктуризации объекта нам нужно обернуть все выражение присваивания в круглые скобки (), иначе {..} в LHS будет расцениваться как составной оператор, а не как объект.

Выражения присваивания не обязательно должны быть исключительно идентификаторами переменных. Разрешено все, что является допустимым выражением присваивания. Например:

// Присваивание объекта const obj = {}; const computedProp = 'z';  [obj.a, obj.b, obj.c] = [1, 2, 3]; ({ x: obj.x, y: obj.y, [computedProp]: obj[computedProp] } = { x: 4, y: 5, z: 6 });  console.log(obj.a, obj.b, obj.c); // 1 2 3 console.log(obj.x, obj.y, obj.z); // 4 5 6

// Присваивание массива let array = [];  ({ x: array[0], y: array[1], z: array[2]  } = { x: 4, y: 5, z: 6 });  console.log(array); // [4, 5, 6]

Вспомните традиционный вопрос «как поменять местами две переменные без третьей временной переменной?» Теперь у нас есть новое решение для этого:

let x = 10, y = 20;  [y, x] = [x, y];  console.log(x, y); // 20 10

Присваивания с повторением

Форма деструктуризации объекта позволяет указывать исходное свойство несколько раз. Например:

const { a: X, a: Y } = { a: 1 };  console.log(X, Y); // 1 1

Очевидно, что это невозможно при деструктуризации массива ?️.

Последовательное присваивание

Возвращаемое значение любого деструктурирующего выражения — это исходный объект/массив. Посмотрим, что это значит на практике:

let a, b, c, x, y, z;  console.log({x, y, z } = { x: 4, y: 5, z: 6 }); // { x: 4, y: 5, z: 6 } console.log([a, b, c] = [1, 2, 3]); // [1, 2, 3]

Благодаря переносу значение объекта из выражения в выражение, вы можете создавать последовательные композиции деструктурирующих выражений:

let a, b, c, x, y, z;  [a, b] = [c] = [1, 2, 3]; ( {x} = {y,z} = {x: 4, y: 5, z: 6} );  console.log(a, b, c); // 1 2 1 console.log(x, y, z); // 4 5 6

[a, b] = [c] = [1, 2, 3] & ( {x} = {y,z} = {x: 4, y: 5, z: 6} ) вычисляется справа налево (т.е. возвращаемое значение [c] = [1, 2, 3] присваивается [a, b] аналогично, возвращаемое значение {y, z} = {x: 4, y: 5, z: 6} присваивается {x}).

Необязательное присваивание

При деструктуризации вам не нужно присваивать все значения, которые присутствуют в исходном объекте/массиве. Например:

const [,,c] = [1, 2, 3]; const { y } = { x: 4, y: 5, z: 6 };  console.log(c, y); // 3 5 

Вы можете пропустить значения, которые не требуются в текущей области.

Сбор значений

Вы можете использовать синтаксис rest в деструктуризации для сбора значений в одной переменной. Например:

const [a, ...b] = [1, 2, 3]; const { x, ...y } = { x: 4, y: 5, z: 6 };  console.log(a, b); // 1 [2, 3] console.log(x, y); // 4 { y: 5, z: 6 }

Он ведет себя аналогично Rest параметрам функций.

Присвоение значений по умолчанию

Вы можете указать значение по умолчанию для присваивания при деструктуризации как в объекта, так и в массивах. Например:

const { w = 7, x = 8, y, z } = { x: 4, y: 5, z: 6 }; const [ a = 9, b, c, d = 10 ] = [1, 2, 3];  console.log(w, x, y, z); // 7 4 5 6 console.log(a, b, c, d); // 1 2 3 10

Для отсутствующих значений в исходном массиве / объекте будут применяться значения по умолчанию. Он аналогиченпо параметрам функцииумолчанию.

Вы можете комбинировать присвоение переменной по умолчанию с альтернативным синтаксисом выражения присваивания. Например:

const { w: WW = 10, x, y, z } = { x: 4, y: 5, z: 6 };  console.log(WW, x, y, z); // 10 4 5 6

Вложенная деструктуризация

Если значения, которые вы деструктурируете, имеют вложенные объекты или массивы, вы также можете деструктурировать и эти значения:

const array = [ 1, [2, 3, 4], 5 ];  const obj = {    x: {     y: {       z: 6     }      } }  const [ a, [ b, c, d ], e ] = array;  const {    x: {      y: {        z: w      }    }  } = obj;  console.log(a, b, c, d, e); // 1 2 3 4 5 consoel.log(x); // {y: {z: 6}} console.log(y) // {z: 6} console.log(w); // 6

Деструктуризация параметров

Все вышеперечисленные правила применяются и при деструктурировании параметров функции, поскольку за кулисами аргументы присваиваются параметрам. Например:

function baz([x, y]) {   console.log(x, y); }  baz([1, 2]); // 1 2 baz([1]); // 1 undefined baz([, 2]); // undefined 2

---

Узнать подробнее о курсе «React.js Developer». Зарегистрироваться на открытый урок по теме «Пишем приложение на React+Redux» можно здесь.