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