Использование деструктуризации в полной мере
Сначала мы рассмотрим основы деструктурирования, а затем представим некоторые малоизвестные способы его использования.
Деструктуризация позволяет распаковывать значения из массивов или объектов в разные переменные.
Разрушение объектов
Я уверен, что вы сами писали подобный код. Необходимость столько раз повторяться с res. каждый раз, когда вы хотите получить доступ к одному из его свойств, утомительна. Чтобы обойти это, у нас есть назначение деструктурирования, введенное в ES6:
Это намного лаконичнее. Обратите внимание, как мы устанавливаем значение для id. Когда обе переменные имеют одинаковое имя, { id: id } может стать просто { id } . Вы увидите, почему это может быть полезно.
Переименование деструктурированных свойств
Можно переименовать деструктурированные свойства. Зная, что если обе переменные имеют одинаковое имя, у нас может быть более короткий синтаксис, мы могли бы легко сделать следующее:
Установка значений по умолчанию для деструктурированных свойств
Также можно установить значения по умолчанию для деструктурированных свойств, которые являются необязательными:
Это может быть полезно, например, при сопоставлении ответов API, чтобы нам не приходилось иметь дело с нулевыми значениями и чтобы наша кодовая база заполнялась необязательными цепочками и прочим.
Обратите внимание на полученный тип, когда мы устанавливаем значение по умолчанию:
Имейте в виду, что если мы не установим значение по умолчанию, phoneNumber будет иметь тип string | undefined
Деструктурирование вложенных свойств
Самое замечательное в деструктурировании то, что его можно применять на стольких уровнях глубины, сколь это необходимо:
Теперь предположим, что у b есть другие свойства, и мы хотим деструктурировать их, но при этом иметь доступ ко всему b . Мы можем это сделать!
Обратите внимание, что мы набираем b, а затем деструктурируем его свойства. И то, и другое возможно одновременно!
Разрушение массивов и кортежей
Также возможно деструктурировать значения из массивов (и кортежей!). Это действительно полезно, потому что мы можем одновременно и деструктурировать, и присваивать осмысленные имена элементам с нужными нам индексами.
Это действительно хорошо, потому что нам не нужно иметь дело с range[0] или range[1] в нашей кодовой базе, плюс мы также экономим пару нажатий клавиш, потому что нам не нужно делать это:
Если вы работаете с кортежами, которые по определению имеют фиксированную длину, вы получите сообщение об ошибке от компилятора TypeScript, если попытаетесь деструктурировать больше элементов, чем содержится в кортеже, например const [min, max, other] = rangeТип кортежа 'Range ' длины '2' не имеет элемента с индексом '2'.
Установка значений по умолчанию для деструктурированных элементов
Как и в случае с объектами, также можно установить значения по умолчанию для деструктурированных элементов из массивов и кортежей. Например, мы можем захотеть убедиться, что первая позиция массива всегда определена.
А теперь самое интересное!
Уловки разрушения
- Исключение или пропуск свойств: мы можем использовать деструктурирование вместе с остальными параметрами с оператором остальные, чтобы исключить или опустить свойства объекта. Это особенно полезно при работе с React. Иногда вам нужно передать много свойств компоненту, и может возникнуть соблазн просто распределить их все, как
<Component {…props} />, потому что может быть утомительно устанавливать их по одному. Но при этом мы можем передавать некоторые дополнительные или ненужные реквизиты, которые компоненту не нужны и не ожидаются.
На эту тему я написал 2 статьи:
- Явное распространение реквизитов в компонентах React: https://medium.com/@taitasciore/explicit-props-spreading-in-react-components-acc3eb64394c
- Частичное деструктурирование объектов и Rest Props в компонентах React с помощью TypeScript: https://medium.com/@taitasciore/partial-object-destructuring-and-rest-props-in-react-components-with-typescript-ffcd84cc8e5
Здесь TypeScript достаточно умен, чтобы увидеть, что мы деструктурировали некоторые свойства, поэтому он может сузить тип restProps до Omit<SomeComponentProps, ‘someProp’ | ‘anotherProp’ | ‘yetAnotherProp’> или просто CommonProps, потому что он знает, что некоторые свойства были опущены или исключены.
Обратите внимание, что это работает так же и с массивами. В приведенном выше примере мы деструктурировали первый элемент массива, например ([first = 0, …rest]: number[]). Из-за этого rest будет содержать остаток (или остаток, да!?) массива, так что на самом деле это способ удаления первого элемента из массива.
- Обмен переменными. Помните старые времена, когда вам нужно было объявить временную или вспомогательную переменную, чтобы поменять местами две переменные? Попрощайтесь с этим. Разрушение спешит на помощь:
Подведение итогов
Сегодня мы узнали о деструктурировании, что это такое и как его использовать для распаковки значений из объектов и массивов (и кортежей). Мы начали с нуля и построили свой путь оттуда. Наконец, мы узнали о нескольких приятных и полезных применениях, которые не так распространены, например, удаление свойств из объекта или элементов из массива или замена двух переменных местами. В следующей статье мы поговорим об остаточных параметрах с помощью оператора rest, а также рассмотрим некоторые приемы, которые вы можете делай с этим! До следующего раза, пока!
