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

Для будущих студентов курса "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" можно здесь.