Как использовать деструктурирование в JavaScript для написания более чистого и мощного кода

Перейти к профилю Ашай Мандвария 🖋️🍕

Ашай Мандвария 🖋️🍕ЗаблокированоUnblockFollowFollowing

8 фев


фото Скотт Роджерсон на Скрыть

Иногда нужно разрушить, чтобы построить что-то новое.

-Рожденный туманом: Герой веков

ES6 познакомил нас с одной из самых ожидаемых функций JavaScript: деструктуризацией. Как концепция, деструктуризация не является новой или новаторской, и в некоторых языках уже задолго до этого была деструктуризация (🐍🐍). Но это была очень нужная и востребованная функция в JavaScript.

Деструктуризация – это процесс разрушения структуры. В контексте программирования структуры — это структуры данных, и деструктуризация этих структур данных означает распаковку отдельных значений из структуры данных. В JavaScript деструктурирование может быть применено к объекту или массиву.

Деструктуризация создает, ломает что угодно…. какая нам от этого польза??

Прежде чем ответить на этот вопрос, давайте дадим формальное определение деструктуризации. МДН в помощь!

присваивание деструктуризации синтаксис — это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные. -МДН

Давайте рассмотрим несколько примеров, чтобы лучше понять основы деструктуризации.

Массивы

Образец 1:

Когда я впервые увидел этот простой фрагмент кода, я был сбит с толку. Я не понял, что произошло. Если вы похожи на меня, позвольте мне попытаться объяснить.

В строке 1 мы определяем 2 переменные a а также b . В следующей строке обе переменные находятся внутри массива в левой части, который, в свою очередь, приравнивается к фактическому массиву в левой части. В последующих строках выводим значения a & b и мы получаем 7 и 8 соответственно, которые были элементами массива RHS. Магия, происходящая в строке 2, называется деструктурированием.

LHS деструктурирует RHS, и значения, полученные в результате распаковки элементов, присваиваются переменным по порядку.

Но почему LHS внутри массива???

Назначение деструктурирования использует аналогичный синтаксис в левой части по сравнению с правой, чтобы определить, какие значения распаковывать из исходной переменной.

Образец 2:

Здесь мы ввели еще одну переменную leftout в коде сейчас. У нас есть 2 различных типа использования leftout в коде.

  • [a,b,leftout]-> Это присваивает третьему элементу массива значение leftout как и ожидалось.
  • [a,b,…leftout]-> Это дает первые 2 значения для a а также b соответственно, а остальная часть массива присваивается leftoutпеременная.

Решение заключается в оператор. Этот оператор сворачивает все оставшиеся аргументы ( отдыхать ) в один массив. В последнем случае первые 2 элемента массива назначаются a & b соответственно, а остальные аргументы сворачиваются в массив (может реструктуризация??) и присваиваются leftout переменная. Мы можем убедиться в этом, посмотрев на вывод.

Объекты

Образец 1:

Деструктуризация работает одинаково как для объектов, так и для массивов. Объект в LHS имеет свойства a & b которые присваиваются соответственно свойствам a & b объекта РГО. Мы получаем 1 и 2 соответственно, печатая их.

Одно замечание(если у вас есть) заключается в небольшом изменении синтаксиса (теперь у тебя есть).

При деструктуризации объекта вся левая и правая сторона завернуты внутрь. ()

Мы можем видеть ошибку, которую мы получаем, когда мы не заворачиваем ее внутрь (). В нем говорится, что ожидается объявление заявления.

Что на самом деле происходит, так это то, что что-то заключено в фигурные скобки {} путает JavaScript, так что он считает его блоком, а не объектом. В связи с этим он ищет объявление для блока (объявление функции), поэтому мы заключаем код внутри (). Это делает его выражением, а не блоком, и мы получаем наши результаты.

Образец 2:

Снова rest оператор. Работает так же, как и в массивах, за исключением того, что на этот раз остальные значения свернуты внутри объекта, поскольку используемая структура определяется LHS.

Для чего используется деструктуризация?

Как видно из приведенных выше примеров, теперь мы знаем важность деструктуризации. Существует множество применений и различных случаев использования деструктуризации как для объектов, так и для массивов. Мы попробуем некоторые из них. ( **ПС — ** примеры действительны как для объектов, так и для массивов, если не указано иное.)

Назначение переменной

Мы уже видели, как присваиваются переменные в приведенных выше примерах, так что давайте взглянем на другой.

В этом примере уже созданный массив напрямую назначается для деструктуризации. Тем не менее значения присваиваются переменным.

То же самое касается Объекта.

Значения по умолчанию

Иногда может случиться так, что мы определяем n количество переменных для получения значений от деструктурирования, но массив/объект может иметь только n-x элементы. В таком случае x переменные будут назначены undefined.

Мы видим, что b не определено, потому что в массиве просто нет такого количества элементов, которые можно было бы деструктурировать и присвоить каждой переменной.

Решение этой проблемы состоит в том, чтобы присвоить переменным значения по умолчанию, поэтому, если элементов недостаточно, переменные принимают значения по умолчанию, а не становятся неопределенными.

Обмен

Обмен — это процесс обмена значениями между 2 или более переменными. Стандартный способ выполнения подкачки — использование временной переменной или XOR. В JavaScript то же самое можно сделать с помощью деструктурирования.


Использование временной переменной


Использование деструктуризации

Обмен с помощью переменной temp. Код говорит сам за себя.

Используя деструктурирование, мы просто меняем местами элементы и вуаля! Обмен сделан.

Игнорирование значений

Мы можем захватывать и использовать только те значения, которые необходимы, и отклонять или игнорировать ненужные значения.

Здесь мы видим, что мы проигнорировали среднее значение, не присвоив его какой-либо переменной, что избавило нас от хлопот.

Косвенное присвоение возврата функции

Здесь мы видим, что функция x возвращает массив. В строке 4, где мы деструктурируем, мы предоставляем вызов функции, который возвращает массив, а не массив напрямую. Это делает код аккуратным и легким для чтения и понимания.

Присвоение новым переменным

Свойства могут быть распакованы из объекта и назначены переменной с именем, отличным от имени свойства объекта.<Применимо только к объектам>

Мы видим, что значения свойств также являются переменными, которым значения присваиваются посредством деструктурирования.

Деструктуризация вложенных объектов и массивов

Как мы видим, эти данные представляют собой объект, который имеет свойство, называемое местоположением, которое, в свою очередь, содержит массив, элементами которого являются объекты.

При деструктурировании мы должны получить значения всех свойств, присутствующих внутри объекта, внутри массива местоположения.

Итак, мы создали объект с именем obj, который содержит ту же структуру, что и объект данных, а значения, которые мы хотим распаковать, представлены в виде переменных (mylatitude, mylongitude, mycity). Они, в свою очередь, приравниваются к массиву данных (такой же, как синтаксис деструктурирования ранее). Когда переменные печатаются, мы получаем соответствующие значения.

Разрушение с помощью цикла for-of

В приведенном выше фрагменте кода у нас есть массив объектов people, чьи свойства, в свою очередь, содержат объект (люди > объект > семья). Теперь мы хотим распаковать некоторые значения из объекта, используя цикл for..of.

В цикле мы присвоили объектной переменной ту же структуру, что и в массиве people, игнорируя ненужные нам значения. Мы присвоили переменные n и m соответственно свойствам имени и матери, потому что это значения, которые мы хотим распаковать. Внутри цикла мы печатаем переменные и получаем нужные значения.

Большая картинка.


фото Джереми Бишоп на Скрыть

Вы должны использовать деструктурирование в своем коде или практиковать его, чтобы действительно освоить его. На примерах все кажется простым, потому что примеры предназначены только для того, чтобы вы поняли основы. Со сложными/множественными операциями (reduce()!) деструктирование может быстро запутаться, чего мы не хотим!

Более того, вы можете также подумать, что деструктурирование — это просто сахарный синтаксис для выполнения набора задач (например, мы можем передать переменным значение каждого элемента из массива, используя цикл for). В какой-то степени мы можем сказать, что это сахар, но когда мы посмотрим на более широкую картину «Большая картина», мы поймем, почему деструктуризация имеет большую ценность, чем просто минимизация кода.

В JavaScript есть много операций как для извлечения, так и для построения данных, но все они работают с одним элементом за раз.

Для строительства

Для извлечения (пока по одному)

Хотя существует синтаксис для создания нескольких свойств одновременно, но его можно использовать только во время присваивания — его нельзя использовать для изменения существующего объекта.

До появления ES6 не существовало механизма для извлечения всех данных сразу. Вот где деструктурирование действительно проявило себя. Он позволяет извлекать несколько свойств из объекта. Мы видели это в приведенных выше примерах.

Подводные камни

Есть только один, который я могу придумать, и мы его обсудили:

  • Оператор не должен начинаться с фигурной скобки {

Вывод

Я попытался упростить деструктурирование, продемонстрировав как можно больше вариантов использования деструктурирования. Я надеюсь, что это сделало эту концепцию ясной для вас. Теперь вы можете использовать деструктурирование для написания мощного и чистого кода.


Google

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *