Что я узнал о деструктуризации.

Разрушение объектов в Javascript - это концепция, которую я использую все чаще и чаще с момента появления ES6. По определению MDN, деструктуризацию можно понять как присвоение без объявления. Надеюсь, это станет более ясным, когда я покажу несколько примеров. Я начал читать книгу Кайла Симпсона «ES6 and Beyond» (хорошее чтение, хотя и насыщенное), но обнаружил, что застрял на главе о деструктуризации и постоянно перечитываю в течение последних нескольких дней. Я недавно глубоко погрузился в Node, поэтому, когда я модулирую свое промежуточное ПО в контроллеры, я обнаружил, что деструктурирую их, чтобы немного очистить код, и вставлял их в свои маршруты Express. Однако я знал, что деструктуризация - это нечто большее, поэтому я пошел и начал пытаться узнать о ней побольше. Я хочу повторить то, что я понял по этой теме, с помощью некоторых упрощенных примеров.

Это простой на вид объект, который, вероятно, узнает каждый. Он следует за синтаксисом key (property): value, который мы привыкли видеть. Ниже я написал простой пример того, как я могу деструктурировать объект, чтобы установить две постоянные переменные, равные значениям, присвоенным ключам в объекте. Позволь мне показать тебе:

let x = 1, y = 2;
 let obj = {
      a: x,
      b: y
 };
const {a,b} = obj; 
console.log(a,b) //1,2

Итак, здесь я установил две константы «a» и «b», равные значениям ключа «a» и «b», присвоенным в «obj». А что по-другому? Прежде всего, мы напрямую назначаем ‘a, b’ внутри фигурных скобок в левой части выражения, которое оценивается по ключам / значениям определенного объекта выше. Когда мы записываем «a, b», мы видим (1,2). Таким образом, возникает вопрос, получаем ли мы ключ или значение от деструктурированного объекта «obj». Что ж, в этом случае это трудно увидеть, но на самом деле мы получаем значение (1 или 2), и поскольку константа, которую мы объявляем, совпадает с ключом, мы можем просто присваивать переменные таким образом. Однако, чтобы проиллюстрировать, что мы на самом деле получаем значение, важно понимать, что деструктуризация переворачивает ключ: значение в большее, чем значение: ключ, по крайней мере, так я это понимаю.
Пример:

const w = 2, i = 3, q = 4;
 const hello = {
   hi:w, //2
   hello:i, // 3
   hey:q // 4
}
 const {hi:Mike,hello:Jimmy,hey:Ryan} = hello
 console.log(Mike,Jimmy,Ryan); //2 3 4

Итак, в этом примере мы видим, что объявляемые нами переменные противоположны тем, к которым мы привыкли. Объект hello находится в правой части объявления, и мы назначаем ключи hello нашим новым объявлениям
const, слева от:, а правая сторона является ключом, который ссылается на значение в объект (привет) деструктурируется.

То же самое и с массивами. Мы можем деструктурировать массивы, используя аналогичный синтаксис, и можем присвоить имя свойства значению в зависимости от того, где
значение находится в массиве.

const arr = [1,2,3];
const testObj = {};
[testObj.val, testObj.val2, testObj.val3] = arr;
console.log(testObj); //{val: 1, val2: 2, val3: 3}

В другом примере силы деструктуризации давайте посмотрим, как мы обычно подходим к переключению двух переменных.

let x = 1;
let y = 2;
let temp = x;
x = y;
y  = temp;

Однако мы можем использовать деструктуризацию, чтобы упростить этот процесс.

let var1 = 1, var2 = 2;
[var1,var2] = [var2,var1];
console.log(var1,var2); // 2,1

Наконец, мы можем переупорядочить массив с помощью деструктуризации

  const order = [1,2,3,4];
  const newOrder = [];
  [newOrder[3],newOrder[2],newOrder[1],newOrder[0]] = order;
  console.log(newOrder); / 4,3,2,1

Если мы поймем эти простые примеры, мы сможем увидеть силу деструктуризации в действии и теперь можем представить себе возможности с ее помощью. Я хотел бы повторить, что многое из того, о чем я пишу, можно найти в мельчайших подробностях в книге Кайла Симпсона, и это лишь верхушка айсберга в том, что вы хотите знать о деструктуризации. Ментальная модель переключения ключ: значение, подобная синтаксису в деструктуризации, потребовала у меня немного времени, чтобы привыкнуть к ней. Однако я хотел поделиться некоторыми вещами, которые я узнал, и надеюсь увидеть, что люди применяют эти концепции, если они еще не сделали этого.

Что я узнал о деструктуризации.

Вопросы по теме