Делаем код чище с помощью деструктуризации объектов в JavaScript
Авторизуйтесь
Делаем код чище с помощью деструктуризации объектов в JavaScript
В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в JavaScript стандарта ES6. Этот синтаксис позволяет распаковать значения из сложных объектов и массивов. Его можно использовать для того, чтобы сделать код чище и лаконичнее.
Сначала мы обсудим деструктуризацию объектов, а затем перейдём к массивам.
Деструктуризация объектов в JS
Для примера возьмём объект, содержащий простые свойства и вложенные объекты, с данными о покупателе:
Базовое присваивание
Традиционный подход для получения данных объекта — использовать точку или квадратные скобки:
Это можно сделать одной строкой кода:
Мы также можем изменить имя переменной:
Присваивание объявленным переменным
Для этого нужно использовать круглые скобки:
Вложенные объекты
Мы можем получать вложенные свойства по одному:
С помощью деструктуризации объекта в JS этот код можно записать в одну строку:
Деструктуризация со значениями по умолчанию
Допустим, у объекта customer есть булево поле married, которое может не иметь значения. Без деструктуризации проверка на наличие значения может выглядеть так:
С помощью деструктуризации можно сделать это в одну строку:
Оставшиеся параметры
С помощью многоточия и любого имени переменной мы можем получить оставшиеся параметры, которые не были указаны. Для них обычно используют имя rest:
Обработка null-объектов
Если мы попытаемся деструктурировать null-объект, то получим ошибку. Этого можно избежать:
С помощью оператора ИЛИ мы заменили null пустым объектом.
Деструктуризация аргументов функции
Мы можем деструктурировать объекты, переданные в функцию. Сначала посмотрим, как это работает без деструктуризации:
А так выглядит деструктуризация параметров функции:
Деструктуризация массивов в JS
Синтаксис, который мы использовали для деструктуризации объектов, можно применять и к массивам. Кроме того, деструктуризация массивов имеет интересные особенности. Для их демонстрации будем использовать массив фруктов:
Доступ к элементам массива через деструктуризацию будет выглядеть так:
Пропуск и получение остальных элементов
Чтобы пропустить ненужный элемент массива используется запятая:
Деструктуризация в ES6. Полное руководство
May 16, 2018 · 12 min read
На данный момент JavaScript это самый используемый язык программирования в мире, используемый на разных платформах таких как веб-бразуеры, мобильные и VR устройства, а также веб-сервера. Хоть сам язык сильно не менялся за последние годы, в сравнении с другими языками программирования, все таки есть изменения, на которые стоит обратить внимание из-за явной “полезной силы”, добавленной в этот язык и тому примеры: шаблонные строки, деструктуризация, spread оператор, стрелочные функции и конечно же классы, ну и много чего другого интересного.
👉 Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
Почему именно деструктуризация?
Чтобы это объяснить, мы рассмотрим сценарий с которым знакомо большинство, ну или хотя бы те, кто видел хоть мельком код на JavaScript. Представьте, что у нас есть данные студента, содержащие оценки по трем предметам: математика, естественные науки и английский, представленные в объекте данных. Нам нужно показать нужную информацию на основе этих данных. Для этого мы могли бы сделать, что-то типа такого:
Что такое деструктуризация?
Деструктуризация просто подразумевает разбивку сложной структуры на простые части. В JavaScript, таковая сложная структура обычно является объектом или массивом. Используя синтаксис деструктуризации, вы можете выделить маленькие фрагменты из массивов или объектов. Такой синтаксис может быть использован для объявления переменных или их назначения. Вы также можете управлять вложенными структурами, используя уже синтаксис вложенной деструктуризации.
Вообще используя деструктуризацию, функция из нашего предыдущего примера будет выглядеть так:
Есть шанс того, что код в последнем примере не совсем будет вами понят. Если это имеет место быть, то давайте разберемся с этим в руководстве ниже. Я вас уверяю, это имеет смысл.
И так, продолжим изучение того, как приручить мощь деструктуризации.
Деструктуризация объектов
То, что мы видели в последнем примере это форма деструктуризации объекта использованная как назначение функции. Давайте посмотрим, что мы можем сделать с деструктуризацией объекта, начиная с самого начала. Попросту, вы можете использовать объект литерал на левой стороне назначения выражения для деструктуризации объекта.
Тот же синтаксис может использоваться в назначении переменных, как и тут:
Отрывок кода выше показывает как использовать деструктуризацию объекта для назначения новых значений в локальных переменных. Обратите внимание, что мы использовали пару закрывающих скобок () в выражении назначения. Если их пропустить, то деструктурируемый объект литерал будет восприниматься как блок, что приведет к ошибке, так как блоки не могут появляться в левой стороне назначения.
Дефолтные значения
Использование разных имён для переменных
Деструктуризация вложенного объекта
Используя деструктуризацию вложенных объектов, будьте аккуратны в использовании пустых вложенных объектов литералов. Хоть это и верный синтаксис, он на самом деле не делает никаких назначений. Для примера, следующая деструктуризация абсолютно ничего не делает.
Деструктуризация массива
Вы наверное уже чувствуете себя ниндзей деструктуризации, пройдя через суровость деструктуризации объектов. Хорошие новости в том, что деструктуризация массивов очень схожа и приямолинейна с предыдущей. Давайте углубимся и в неё.
В деструктуризации массивов, вы используете литерал массива с левой стороны выражения назначения. Каждое имя переменной в литерале массива соответствует элементу с таким же индексом в деструктуризированном массиве. Вот быстрый пример.
Дефолтные значения
Как и с деструктуризацией объекта, вы можете выставить дефолтные значения для локальных переменных используя деструктуризацию массива. В следующем примере мы выставим дефолтные значения некоторым переменным на случай, если соответствующие элементы не будут найдены.
Вы также можете сделать назначение деструктуризации массива. В отличие от деструктуризации объекта, вам не надо прикреплять выражение назначения в скобках. Вот пример:
Пропускаем элементы
Вполне возможно пропустить некоторые элементы, которые вы не хотите назначать локальным переменным и только назначить те, в которые вам нужны. Вот пример того, как мы можем назначить только значение blue для локальной переменной.
Обмен переменными
Одно очень хорошее примечание в деструктуризации массивов заключается в обмене локальными переменными. Представьте, что вы делаете приложение манипуляций с фото и хотите менять height и width размеры для них, при ориентировке фото измененного в landscape и portrait. Старый способ сделать это будет выглядеть примерно так:
Код выше решает задачу, хотя мы и использовали дополнительные переменные, чтобы скопировать значение одной из смененных переменных. С помощью деструктуризации, мы можем проделать такой обмен простым назначением. Следующий код покажет, как с помощью деструктуризации можно это провернуть:
Деструктуризация вложенного массива
Так же, как и с объектами, вы можете проделать вложенную деструктуризацию с массивами. Соответствующий элемент, должен быть массивом, чтобы использовать вложенный деструктуризующий массив литерал для назначения элементов их локальным переменным. Вот быстрый пример, чтобы это показать:
Элементы rest
Иногда вы можете захотеть назначить некоторые элементы переменным, удостоверясь, что оставшиеся элементы назначены другим локальным переменным. Новый оператор расширения (…) был добавлен в ES6, он может быть использован с деструктуризацией, чтобы достигнуть описанного выше эффекта. Вот быстрый пример:
Есть некоторые хорошие примечания для rest элементов, которые стоит рассмотреть. Одно из таких это клонирование массивов.
Клонирование массивов
А вот как вы можете использовать деструктуризацию и оператор расширения для создания клона массива.
Смешанная деструктуризация
Есть случаи, когда вы работаете с довольно сложным объектом/массивом и вам надо назначить некоторые значения от них для локальных переменных. Хорошим примером тут будет объект с несколькими вложенными объектами и массивами. В случаях как тут, вы можете использовать комбинации деструктуризации объектов и массивов, чтобы нацелиться на определенные части этой комплексной структуры. Следующий код покажет такой пример:
Деструктуризированные параметры функции
Деструктуризация также может применяться на параметрах функции, чтобы извлекать значения и назначать их локальным переменным. Обратите внимание, что деструктурированный параметр не может быть пропущен, в противном случае это выдаст ошибку.
Хороший пример использования тут — это displaySummary() функция из нашего изначального примера, которая ожидает объект student как параметр. Мы может деструктуризировать объект student и назначить извлеченное значение локальной переменной функции. Вот пример:
Заключение
В этом руководстве, мы изучили синтаксис деструктуризации в ES6 и различные способы его применения в коде. Если вы уже довольно хорошо знакомы с деструктуризацией в JavaScript, то вы возможно узнали что-то новое. Хоть мы и использовали оператор расширения в всего нескольких случаях, стоит помнить, что с его помощью можно сделать много всего интересного.
Деструктуризация JS (теория и примеры)
Деструктуризация позволяет нам «вытащить» значения нужных элементов из массивов или свойств из объектов и присвоить новым переменным.
Давайте рассмотрим пример, в котором имеется объект auto с несколькими свойствами. Нам требуется присвоить значение каждого свойства auto новой переменной:
Используя деструктуризацию, мы можем то же самое записать в одну строчку:
Вложенная деструктуризация
Деструктурирование точно также работает со вложенными объектами.
Если нам потребуется получить значения длины (length) и ширины (width), то можно сделать это так:
Либо можно использовать деструктуризацию:
Изменение названия переменной во время деструктуризации
Иногда нам нужно ‘вытащить’ значение нужного свойства из объекта и присвоить переменной с другим названием. Это может потребоваться из-за того, что переменная с тем же названием уже существует в текущей области видимости.
В этом примере переменная width уже определена.
В этом случае можно, в процессе деструктуризации, поменять названия переменных:
Установка значений по умолчанию для деструктурируемых переменных
Еще один важный момент, который следует обсудить – возможность устанавливать значения по умолчанию.
Бывают случаи, когда в процессе деструктуризации, в объекте отсутствует значение какого-либо свойства.
Деструктуризация позволяет нам установить значения переменных по умолчанию:
Следует помнить, что если значение свойства в объекте равняется Null, False или 0, то значение по умолчанию применяться не будет!
Деструктуризация массивов
Если говорить о массивах, то здесь пример деструктуризации будет выглядеть следующим образом:
Операторы Spread и Rest в Javascript ES6 (просто и c примерами)
Массив: перебирающие методы 2020 (11 примеров)
Операторы Spread и Rest в Javascript ES6 (просто и c примерами)
Spread оператор (оператор расширения) ‘берет’ каждый отдельный элемент итерируемого объекта (массив) и ‘распаковывает’ его в другой итерируемый объект (массив).
Что такое итерируемые (перебираемые) объекты?
Где и когда используется spread?
Предположим у нас есть 2 массива с сериалами.
В какой-то момент мы решаем создать еще один массив, который будет включать все сериалы из обоих массивов. Как это сделать?
Что если мы захотим вставить сериал Sherlock в середину нашего общего списка?
Если использовать оператор spread, то наш код будет выглядеть более коротко и понятно.
Так будет выглядеть создание одного общего массива с помощью оператора spread:
Также можно добавить Sherlock в середину общего списка:
Теперь давайте попробуем создать копию нашего массива tvSeries :
Что если мы решим изменить первый элемент нового массива allSeriesList с ‘Ozark’ на ‘Friends’?
На самом деле мы не создали копию массива. Переменная allSeriesList просто содержит ссылку на наш исходный массив (также как и tvSeries).
Оператор Rest
Визуально, оператор rest … (три точки) похож на оператор spread, но выполняет противоположную функцию.
Spread забирает каждый элемент из массива и распаковывает в новый массив. Оператор rest забирает каждый элемент из массива и создает из них новый массив.
Есть 2 типа задач, где оператор rest используется чаще всего – в функциях и в процессе деструктуризации.
Пример 1. Оператор rest в функциях
Предположим, мы продаем пиццу. Стоимость нашей самой популярной пиццы “Маргарита” – 500 Руб.
У нас есть функция, которая принимает стоимость конкретной пиццы и количество заказанной пиццы от разных посетителей:
Пример: Стоимость = 500, посетитель A заказал 3 штуки, посетитель B – 10 штук, посетитель C – 6 штук, D – 20 штук.
Таким образом, мы можем подсчитать стоимость заказа для каждого посетителя:
Мы можем добавить еще одну переменную, которая, например, будет подсчитывать стоимость доставки:
Пример 2. Оператор rest и деструктуризация
Предположим, у нас есть массив, в котором содержится название пиццы, ее ‘ID’ в нашей системе заказов и количества заказанной пиццы для разных посетителей:
Мы можем получить название пиццы, ее ID и количества и присвоить 3-м новым переменным, используя оператор rest в процессе деструктуризации.
Таким образом мы собрали все количества заказанной пиццы и создали из них отдельный новый массив.
Async Await в Javascript (как работает и примеры)
Деструктурирующее присваивание
Синтаксис деструктурирующего присваивания в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.
Синтаксис
Описание
Выражения объявления объектов или массивов предоставляют простой способ создания пакета однородных данных. При создании такого пакета вы получаете возможность использовать его любым доступным образом. Также вы можете возвращать его в функциях.
Одной из ключевых возможностей использования деструктурирующего присваивания является чтение структуры данных одним оператором, хотя помимо этого вы можете найти множество других применений в приведённых ниже примерах.
Данная возможность подобна таковой, присутствующей в языках Perl и Python.
Разбор массивов
Простой пример
Обмен значений переменных
После выполнения фрагмента кода, значение b будет 1, a будет 3. Без деструктурирующего присваивания, для обмена значений требуется дополнительная временная переменная (или что-то наподобие XOR-обмена).
Возврат нескольких значений
Благодаря деструктурирующему присваиванию, функции могут возвращать несколько значений. Хотя всегда можно было возвращать массивы в функциях, оно предоставляет гибкость:
Как вы видите, возвращаемые результаты имеют вид массива, значения которого заключены в квадратные скобки. Вы можете возвращать неограниченное количество результатов таким образом. В следующем примере, f() возвращает [1, 2] как результат:
Оператор [a, b] = f() присваивает результаты функции переменным в квадратных скобках: a будет присвоено 1, b будет присвоено 2.
Вы также можете использовать результат функции в виде массива:
В данном случае a будет массивом с элементами 1 и 2.
Игнорирование некоторых значений
Вы также можете проигнорировать не нужные значения:
После выполнения кода, a будет 1, b будет 3. Значение 2 игнорируется. Таким же образом вы можете игнорировать любые (или все) значения. Например:
Получение значений из результата регулярного выражения
Когда метод exec() регулярного выражения находит совпадение, он возвращает массив, содержащий первый совпадающий фрагмент строки и далее группы, определённые в регулярном выражении. Деструктурирующее присваивание упрощает получение данных из этих групп, игнорируя первый фрагмент:
Разбор объектов
Простой пример
Загрузка модулей
Деструктурирующее присваивание помогает загружать специфичные наборы модулей, как в Add-on SDK: