пусть { prop1 , prop2 } = объект
Если вы хотите узнать о деструктуризации массива, вы можете посмотреть это здесь
Итак, деструктуризация объекта — это метод, при котором свойства объекта присваиваются переменной.
До ES6 мы делали это так:
let obj = { firstname : "f_name", lastname : "l_name" } var first_name = obj.firstname; var last_name = obj.lastname console.log(first_name) console.log(last_name)
но после введения деструктурирования в ES6 мы можем сделать это еще проще
let obj = { firstname : "f_name", lastname : "l_name" } let { firstname:first_name , lastname:last_name} = obj console.log(first_name) console.log(last_name)
Таким образом, меньше кода, но здесь всегда есть уловка, поэтому вам нужно помнить, что вы всегда ссылаетесь на одно и то же имя свойства, используемое в вашем объекте, в то время как деструктурирование, иначе компилятор выдаст ошибку, а имя переменной должно быть упомянуто после двоеточия
здесь у нас может быть то же имя переменной, что и у имени свойства объекта, при этом у нас меньше объявлений переменных в области видимости.
let obj = { firstname : "f_name", lastname : "l_name" } let { firstname , lastname} = obj console.log(firstname) console.log(lastname)
Теперь, что если у нас есть вложенный объект, не беспокойтесь, пусть это тоже самое, давайте возьмем пример для того же
let obj = { firstname : "f_name", lastname : "l_name", education :{ degree:"bachelors" } } const {education:{degree:deg}} = obj /* here deg is variable and degree is property name we can eliminate the useage of variables const {education:{degree}} = obj console.log(degree) */ console.log(deg) /* OUTPUT : bachelors */
Что делать, если вложенный объект отсутствует
в таком случае мы получаем ошибку
TypeError: невозможно прочитать свойство 'propname' неопределенного
поэтому это можно преодолеть, указав значение по умолчанию
Синтаксис = let { имя_свойства : {имя_свойства } = значение_по умолчанию } = объект
let _obj = { firstname : "f_name", lastname : "l_name", } const {education:{degree} = {}} = _obj console.log(degree) /* OUTPUT : undefined */
указав значение по умолчанию, мы не получим никакой ошибки