Деструктуризация — это совершенно новый синтаксис 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
Дополнительные функции с деструктурированием
- Возможность переименовать локальную переменную
Используйте синтаксис переименования, чтобыизменить имя локальной переменной, если вы хотите, чтобы оно было описательным или для минимализма.
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
Спасибо, что прочитали!