Извлечение данных из объектов JavaScript может быть довольно громоздким проектом, но для новых разработчиков у меня есть быстрый совет, которым я хотел бы поделиться. Ниже я расскажу о деструктурировании объектов и остальных операторах, которые могут сделать работу с объектами более плавной. Обе эти функции были добавлены в JavaScript в ES6 и не были доступны в более ранних версиях.
Деструктуризация объекта
Допустим, у нас есть простой объект, содержащий три свойства, и каждое свойство имеет значение.
const objectName = {
key1: “value1”,
key2: “value2”,
key3: “value3”
}
Чтобы получить значения внутри объекта, мы могли бы получить к нему доступ, обратившись к нему, используя имя объекта и ключи свойств, подобные этому.
console.log(objectName.key1, objectName.key2, objectName.key3) // "value1", "value2", "value3"
Чтобы избежать большого количества кода внутри самих функций, мы могли бы объявить, например, константа для каждого свойства, что уменьшает количество кода, используемого позже, но приводит к увеличению количества строк кода в целом.
const key1 = objectName.key1 const key2 = objectName.key2 const key3 = objectName.key3 console.log(key1, key2, key3) // "value1", "value2", "value3"
Деструктивный подход, показанный ниже, делает значения свойств доступными только за счет обращения к ключу без предварительного объявления их одного за другим.
const { key1, key2, key3 } = objectName
console.log(key1, key2, key3) // "value1", "value2", "value3"
Довольно аккуратно, не так ли?
Остальной параметр
Когда необходимо деконструировать только некоторые свойства объекта, вы можете создать новый объект из оставшихся свойств, извлекая их с помощью параметра rest. Он характеризуется как последний параметр в синтаксисе, начинающийся с трех точек (…) и сопровождаемый подходящим именем для нового создаваемого объекта.
const { key1, …newObject } = objectName
console.log(key1) // "value1"
console.log(newObject) // {key2: "value2", key3: "value3"}
Стоит отметить, что в синтаксисе может быть только один остаточный параметр, и он всегда должен быть последним параметром в фигурных скобках.
Я настроил Codepen, если вы хотите поиграть с деструктуризацией объектов и остальными параметрами: https://codepen.io/elsisco/pen/QWqjrXw
Дальнейшее исследование
Это был просто пример того, как вы можете использовать деструктурирование для написания более качественного и аккуратного кода. С помощью деструктуризации можно сделать гораздо больше, не только при работе с объектами, но и с массивами.
Если это вызвало у вас любопытство, я призываю вас продолжить изучение этого вопроса — вы не пожалеете.
