Деструктуризация была впервые представлена в версии JavaScript ES6 2015, чтобы помочь нам извлекать данные из итерируемых объектов (массивов, объектов, карт) в отдельные переменные.
Рассмотрим следующий объект:
В приведенном выше фрагменте у нас есть объект movieTheatre с именем, местоположением, категориями и часами работы, где в свойстве часа работы у нас разные часы открытия и закрытия. в разные дни недели.
Чтобы деструктурировать объекты, мы используем фигурные скобки {}, и передаем имена переменных, соответствующие именам свойств, которые мы хотите получить от объекта. Предположим, что из нашего объекта movieTheatre нам нужны имя, категории и часы работы. Следующее, как мы можем этого добиться:
Так же, как и в деструктурировании массивов, мы создали 3 новые переменные (имя, часы работы и категории).
Поскольку в объектах порядок элементов не имеет значения, нам не нужно пропускать элементы, как мы это делали, когда смотрели на деструктурирование массивов. Нажмите здесь, если хотите узнать больше о деструктуризации массивов. Кроме того, порядок, в котором мы передаем имена свойств, не имеет значения.
Давайте теперь посмотрим на результат нашей деструктуризации на следующем изображении:
Это особенно полезно, когда мы имеем дело с результатом вызова API, что означает получение данных из другого веб-приложения, таких как данные о погоде, которые обычно поступают в виде объектов.
Теперь предположим, что мы хотим, чтобы имена наших переменных отличались от имен свойств. Мы можем выполнить это следующим образом:
Результат в консоли будет таким:
Как видите, приведенный выше результат аналогичен результату, который мы получили ранее в консоли. Здесь мы дали новые имена переменных свойствам, которые мы хотим деструктурировать из нашего объекта.
В заключение важно отметить, что браузеры, не поддерживающие JavaScript версии ES6 2015, могут не поддерживать использование синтаксиса деструктурирования. Посетите раздел Поддержка деструктуризации JavaScript, чтобы узнать больше.
