В прошлой статье мы обсуждали как деструктурировать массивы в JavaScript , а в этом материале продолжим обсуждением данной темы, но уже в отношении объектов.
В прошлой статье мы обсуждали как деструктурировать массивы в JavaScript, а в этом материале продолжим обсуждением данной темы, но уже в отношении объектов.
Допустим, у нас есть объект person с двумя свойствами: firstName и lastName.
let person = {
firstName: “Андрей”,
lastName: “Андреев”
};
При деструктурировании объекта, имена переменных должны совпадать с названиями свойств в объекте. Если имя переменной не совпадает с названием свойства объекта, оно получает значение undefined.
В следующем примере переменным firstName и lastName присваиваются значения свойств firstName и lastName объекта person.
let {firstName, lastName} = person;
console.log(firstName); // Андрей
console.log(lastName); // Андреев
В этом примере мы объявляем и присваиваем переменные в одном выражении.
Кроме того, мы можем использовать деструктурирование объекта в операторе присваивания, однако переменные должны также быть окружены и круглыми скобками.
({firstName, lastName}) = person;
Если вы не используете круглые скобки, движок JavaScript интерпретирует левую часть как блок. Следовательно, вы получите ошибку.
Вложенные объекты и деструктурирование
Предположим, что у вас есть объект employee, у которого в качестве свойства есть объект профиля.
let employee = {
id: 2003,
profile: {
firstName: "Андрей",
lastName: "Андреев"
}
};
Следующий оператор разбивает свойство profile в отдельные переменные.
let {profile: {firstName, lastName}} = employee;
console.log (FirstName); // Андреев
console.log (LastName); // Андреев
Таким образом в этой короткой статье вы узнали, как использовать функцию деструктурирования ES6 для разбития массива или объекта на отдельные переменные.
