Упростите свой код, используя синтаксис деструктурирующего присваивания.
Эта статья является попыткой обобщить использование деструктуризации в TypeScript с наиболее распространенными вариантами использования, показанными в качестве примеров, с которыми вы можете взаимодействовать и играть.
В Mozzila есть хорошее формальное определение деструктуризации:
Синтаксис деструктурирующего присваивания — это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные.
Источник: Mozzila Web Docs
Этот подход позволяет избежать повторения при распаковке элементов массива или свойств объекта и делает код более чистым и легким для чтения.
Присваивание деструктурирования позволяет нам определить, какие значения (в случае массивов) или свойства (в случае объектов) распаковывать из исходной переменной в левую часть присваивания.
Для деструктуризации объектов и массивов существует два типа шаблонов деструктурирования: шаблон привязки и шаблон присваивания.
Давайте посмотрим, что означает каждый шаблон.
Шаблон привязки
При использовании шаблона бидинга это означает, что мы начинаем с объявления переменной (левая часть присваивания), которая будет привязана к значениям, существующим в исходной переменной (правая часть присваивания). В простом примере ниже используется объект.
const person: Person = { name: 'John', age: 28 };
const { name, age } = person;
console.log(name, age); // John 28
Шаблон назначения
В шаблоне присваивания мы не начинаем с объявления переменной, а используем уже существующую переменную или свойство другого объекта (левая часть присваивания), которые работают как цель для деструктурированной исходной переменной (правая часть). стороны задания).
const order = { priceBeforeVAT: 10, priceAfterVAT: 12.3 };
const prices = [];
({ priceBeforeVAT:prices[0] , priceAfterVAT: prices[1] } = order)
console.log(prices) // [10, 12.3]
Следующие разделы показывают, как использовать деструктурирование в различных сценариях, и содержат игровые площадки для каждого примера.
Сценарии разрушения
В этом разделе я собрал примеры, с которыми сталкивался чаще всего. Мы будем использовать шаблон торгов.
Давайте посмотрим.
Деструктуризация объекта
Вероятно, это наиболее распространенный вариант использования деструктуризации.
Приведенный выше код разделен на несколько примеров, чтобы продемонстрировать различные способы деструктуризации объектов.
Распаковка свойства: позволяет распаковать свойство из объекта и назначить его переменной с помощью {} в левой части присваивания (см. пример 1).
Переименование свойства: очень полезная опция — переименование свойства при деструктуризации; это позволяет избежать конфликтов имен при деструктурировании двух объектов одного типа (см. пример 2).
Значение свойства по умолчанию: можно установить значение свойства по умолчанию, но оно будет использоваться только в том случае, если свойство не существует в экземпляре объекта или если оно имеет значение undefined, nullзначения не попадают вернуться к значению по умолчанию (см. пример 3).
Оставшиеся свойства. Также можно исключить пару свойств из объекта и разрушить подмножество свойств исходного объекта (см. пример 4).
📝 Пример 4 с оставшимися свойствами также можно применить к массивам, но он будет содержать оставшиеся значения массива вместо остальных свойств объекта.
Также можно комбинировать распаковку свойства, переименование, значение по умолчанию и оставшиеся свойства (см. пример 5).
Разрушение массива
Подобно тому, что мы видели выше с деструктурированием объектов, но на этот раз мы будем распаковывать значения, а не свойства.
В приведенном выше примере у нас есть массив заказов, где каждый элемент является объектом. Синтаксис для распаковки значений массива немного отличается, поскольку он использует [] вместо {} в левой части присваивания, как мы видели с объектами.
Объявления функций
В последнем примере показана функция, которая получает объект в качестве параметра, распаковывает свойства объекта и использует их в теле функции.
Подведение итогов
Помимо примеров, которые мы видели выше, есть и другие места, где можно использовать деструктурирование, например, кортежи, циклические переменные циклов for...in и for...of или использование переменной привязки деструктурирования предложения incatch.
Для получения более подробной информации о деструктурировании см. Веб-документы Mozzila, и вы найдете приведенные выше примеры и многое другое.
Надеюсь, что эта статья резюмирует деструктурирование в TypeScript простым и полезным способом.
Если у вас есть какие-либо предложения или дополнения, не стесняйтесь комментировать ниже. Спасибо за чтение и счастливого кодирования!
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу
