Деструктуризация — это совершенно новый синтаксис ES6, который позволяет нам легко работать с массивами и объектами.

РАЗРУШЕНИЕ ОБЪЕКТА

Давайте пройдемся по коду, чтобы понять, как это работает:

const person = {
  name: 'Robert',
  age:25,
  location: {
   city:'Chicago',
   temp:31
   }
 } 
//With ES5 syntax
const name = person.name;
const age = person.age; 
console.log(`${name} is ${age}`); //Robert is 26

Этот синтаксис работает хорошо, но проблема с синтаксисом ES-5 заключается в том, что он не очень хорошо масштабируется, и нам приходится делать это каждый раз для каждой вещи, которую мы пытаемся реализовать.

С помощью деструктуризации ES6 мы можем получить свойства в одной строке. 😮

//ES6 syntax 
const {name, age} = person;
console.log(`${name} is ${age}`); //Robert is 26
  • С правой стороны у нас есть объект, который мы хотим деструктурировать.
  • С левой стороны у нас есть тип переменной, которую мы пытаемся создать, это может быть const, let или var.

Эта строка эквивалентна двум строкам в синтаксисе ES-5, они делают то же самое.

Синтаксис ES-6 создает две переменные (имя и возраст) и получает эти значения из объекта person. Он ищет свойство человека с точно таким же именем. Таким образом, по имени он ищет person.name, а по возрасту — person.age.

Это был простой пример, теперь давайте посмотрим на что-то более сложное.

if(person.location.city && person.location.temp){
console.log(`Its ${person.location.temp} in         ${person.location.temp}`);
}
Output:
Its 31 in Chicago

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

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

const {city,temp} = person.location; 
if(city && temp) {
 console.log(`Its ${temp} in ${city}`)
}
Output:
Its 31 in Chicago

Дополнительные функции с деструктурированием

  1. Возможность переименовать локальную переменную

Используйте синтаксис переименования, чтобыизменить имя локальной переменной, если вы хотите, чтобы оно было описательным или для минимализма.

const {city,temp: temperature} = person.location;

Это приведет к захвату свойства temp из person.location и добавлению его к новой константе температуры.

2. Возможность установки значений по умолчанию

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

const {name = 'Anonymous', age} = person;

В этой строке name задается Anonymous, если свойство name не существует в объекте person, в противном случае будет использоваться значение, указанное в свойстве name.

Эти две функции могут быть объединены вместе, чтобы получить

const {city,temp: temperature = 10} = person.location;

РАЗРУШЕНИЕ МАССИВА

Это похоже на деструктурирование объекта, только синтаксис немного отличается.

Without Destructuring
const address=['1340','Chicago',Illinois'60603'];
console.log(`You are in  ${address[1]} $address[2]`);
Output:
You are in Chicago Illinois

Этот код работает, но проблема с этим типом кода заключается в том, что непонятно, что происходит. Если оператор журнала просматривается изолированно, а адрес поступает из базы данных или API. Мы не знаем, что такое адрес [1], будь то номер улицы, код страны или страны.

Чтобы получить четкое представление о деструктурировании данных, можно использовать:

// Array destructuring
const address=['1340','Chicago',Illinois'60603'];
const [street, city, state, zip] = address;
console.log(`You are in  ${`city} ${state}`);
Output:
You are in Chicago Illinois
  • С правой стороны у нас есть массив, который мы хотим деструктурировать.
  • С левой стороны у нас упорядоченный список имен переменных

В отличие от объекта, который соответствует name, деструктуризация массива соответствует position. Имя не имеет значения при деструктуризации массива.

Разрушение определенных переменных

Вместо того, чтобы деструктурировать все переменные массива. Вы можете деструктурировать ту, которая вам нужна.

//Destructure only the first three elements
const [street, city, state] = address;
//Destructure the 2nd and 3rd item of array
const [, city, state] = address;
//Destructure the state only
const [,,state]=address

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

const address=[];
const [, , state='New York'] = address;
console.log(`You are in ${state}`);
Output:
You are in New York

Спасибо, что прочитали!