Прошло много времени с тех пор, как ES6 представил назначение деструкции, которое теперь поддерживается во всех Основные браузеры Анкет Его можно использовать в любой действительной операции назначения, то есть, назначение переменных, назначение параметров функции и т. Д. Давайте получим базовый обзор того, что такое разрушение в первую очередь.
Синтаксис перед введением деструкции был слишком условным для назначения значений массива или объекта отдельным переменным.
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 Синтаксис из предыдущего фрагмента. На самом деле это сокращение const {x: x, y: y, z: z Анкет Если сопоставимое имя свойства совпадает с переменной, которую вы хотите объявить, вы можете сократить синтаксис. Здесь мы уходим X: часть {x: x, ..} Анкет
Обычно операции назначения следуют цель = источник или Цель: Источник шаблон, но в задании деструкции, Источник: 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 Engine сделает нашу работу для нас, пока мы сохраняем наш код в чистоте.
Назначить позже
Как упоминалось ранее, деструктуризация может использоваться в любой действительной операции назначения. Это означает, что вам не всегда нужно использовать операцию деструктуризации при объявлении переменных. Для уже объявленной деструкции переменной только назначения, точно так же, как мы видели с другими назначениями переменных. Рассмотреть возможность:
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 будет рассматриваться как оператор блока вместо объекта.
Выражения назначения не должны быть просто идентификаторами переменных. Все, что является действительным выражением, разрешено. Например:
// Object assignment
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
// Array assignment
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
Вы можете пропустить значения, которые не требуются в текущей области.
Встреча
Вы можете использовать Синтаксис отдыха В дезинтурном назначении для сбора значений в одной переменной. Например:
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 }
Он ведет себя аналогично Функции параметры отдыха Анкет
Назначение значения по умолчанию
Вы можете предоставить значение по умолчанию для назначения как в заданиях объекта, так и в массивах. Например:
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
Источник [1]: Вы не знаете JS : Es6 & Beyond by Кайл Симпсон
Оригинал: “https://dev.to/mpratapdev/you-may-not-know-destructuring-yet-2ce1”