что такое деструктуризация объекта
Делаем код чище с помощью деструктуризации объектов в JavaScript
Авторизуйтесь
Делаем код чище с помощью деструктуризации объектов в JavaScript
В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в JavaScript стандарта ES6. Этот синтаксис позволяет распаковать значения из сложных объектов и массивов. Его можно использовать для того, чтобы сделать код чище и лаконичнее.
Сначала мы обсудим деструктуризацию объектов, а затем перейдём к массивам.
Деструктуризация объектов в JS
Для примера возьмём объект, содержащий простые свойства и вложенные объекты, с данными о покупателе:
Базовое присваивание
Традиционный подход для получения данных объекта — использовать точку или квадратные скобки:
Это можно сделать одной строкой кода:
Мы также можем изменить имя переменной:
Присваивание объявленным переменным
Для этого нужно использовать круглые скобки:
Вложенные объекты
Мы можем получать вложенные свойства по одному:
С помощью деструктуризации объекта в JS этот код можно записать в одну строку:
Деструктуризация со значениями по умолчанию
Допустим, у объекта customer есть булево поле married, которое может не иметь значения. Без деструктуризации проверка на наличие значения может выглядеть так:
С помощью деструктуризации можно сделать это в одну строку:
Оставшиеся параметры
С помощью многоточия и любого имени переменной мы можем получить оставшиеся параметры, которые не были указаны. Для них обычно используют имя rest:
Обработка null-объектов
Если мы попытаемся деструктурировать null-объект, то получим ошибку. Этого можно избежать:
С помощью оператора ИЛИ мы заменили null пустым объектом.
Деструктуризация аргументов функции
Мы можем деструктурировать объекты, переданные в функцию. Сначала посмотрим, как это работает без деструктуризации:
А так выглядит деструктуризация параметров функции:
Деструктуризация массивов в JS
Синтаксис, который мы использовали для деструктуризации объектов, можно применять и к массивам. Кроме того, деструктуризация массивов имеет интересные особенности. Для их демонстрации будем использовать массив фруктов:
Доступ к элементам массива через деструктуризацию будет выглядеть так:
Пропуск и получение остальных элементов
Чтобы пропустить ненужный элемент массива используется запятая:
Вы не знаете деструктуризацию, пока
Для будущих студентов курса «React.js Developer» подготовили перевод полезной статьи.
Также приглашаем вас записаться на открытый урок по теме: «Пишем приложение на React+Redux».
Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.
Так мы поступали в эпоху до деструктуризации. А теперь давайте сделаем это в стиле ES6.
Выглядит намного лучше. Получив общее представление, давайте копнем глубже.
Шаблон присваивания свойств объекта
Присвойте позже
Как упоминалось ранее, деструктуризация может использоваться в любой допустимой операции присваивания. Это означает, что вам не обязательно нужно использовать операцию деструктуризации именно при объявлении переменных. Для уже объявленной переменной деструктуризация выполняет только назначения, точно так же, как и с другими назначениями переменных. Рассмотрим пример:
Выражения присваивания не обязательно должны быть исключительно идентификаторами переменных. Разрешено все, что является допустимым выражением присваивания. Например:
Вспомните традиционный вопрос «как поменять местами две переменные без третьей временной переменной?» Теперь у нас есть новое решение для этого:
Присваивания с повторением
Форма деструктуризации объекта позволяет указывать исходное свойство несколько раз. Например:
Последовательное присваивание
Благодаря переносу значение объекта из выражения в выражение, вы можете создавать последовательные композиции деструктурирующих выражений:
[a, b] = [c] = [1, 2, 3] & (
Необязательное присваивание
При деструктуризации вам не нужно присваивать все значения, которые присутствуют в исходном объекте/массиве. Например:
Вы можете пропустить значения, которые не требуются в текущей области.
Сбор значений
Вы можете использовать синтаксис rest в деструктуризации для сбора значений в одной переменной. Например:
Присвоение значений по умолчанию
Вы можете указать значение по умолчанию для присваивания при деструктуризации как в объекта, так и в массивах. Например:
Для отсутствующих значений в исходном массиве / объекте будут применяться значения по умолчанию. Он аналогиченпо параметрам функцииумолчанию.
Вы можете комбинировать присвоение переменной по умолчанию с альтернативным синтаксисом выражения присваивания. Например:
Вложенная деструктуризация
Если значения, которые вы деструктурируете, имеют вложенные объекты или массивы, вы также можете деструктурировать и эти значения:
Деструктуризация параметров
Все вышеперечисленные правила применяются и при деструктурировании параметров функции, поскольку за кулисами аргументы присваиваются параметрам. Например:
Введение в часто используемые особенности ES6. Часть 2
Данная публикация является 2-ой частью перевода статьи «Introduction to commonly used ES6 features» под авторством Zell Liew, размещенного здесь. Перевод 1-ой части находится здесь.
Деструктуризация
Деструктуризация — удобный способ извлечения значений из массивов и объектов. Между деструктуризацией массивов и объектов существуют незначительные различия, поэтому рассмотрим их отдельно.
Деструктуризация объектов
Допустим, имеется следующий объект:
Для получения firstName и lastName из Zell необходимо создать две переменные, а затем присвоить каждой переменной значение следующим образом:
С деструктуризацией создание и присвоение этих переменных производится одной единственной строкой кода. Ниже пример деструктуризации объекта:
Поясним, что происходит под «капотом»:
Теперь если имя переменной уже занято, то невозможно объявить такую же переменную снова (особенно если вы используете let или const ).
Следующий код не сработает:
В таких ситуациях можно переименовывать переменные одновременно с деструктуризацией с помощью двоеточия.
Помните параметры по умолчанию? Также можно записывать параметры по умолчанию для деструктурированных переменных. Синтаксис похож на синтаксис объявления функций.
Вы даже можете переименовывать переменные при указании параметров по умолчанию. Необходимо составить комбинацию из двух синтаксисов, что сначала будет необычно, но к этому можно привыкнуть:
Это все, что касалось деструктуризации объектов. Теперь рассмотрим деструктуризацию массивов.
Деструктуризация массивов
Деструктуризация массивов и объектов аналогичны. При работе с массивами вместо фигурных скобок используются квадратные.
При деструктуризации массива:
При деструктуризации массива часто извлекаются только необходимые переменные. Для получения остатка используется rest оператор следующим способом:
Rest оператор будет подробнее представлен в следующей части. Сейчас же рассмотрим перестановку переменных с помощью деструктуризации массива.
Перестановка переменных с помощью деструктуризации массива
Вам необходимо переставить эти переменные так, чтобы a стало равно 3 и b равно 2. В ES5 вы бы использовали временную третью переменную для решения этой задачи:
Такой код работает, несмотря на неясную и сбивающую с толку логику с включением третьей переменной.
С деструктуризацией массивов в ES6 это решается следующим способом:
Такой способ перестановки переменных намного проще предыдущего.
Далее рассмотрим деструктуризацию массивов и объектов в функциях.
Деструктуризация массивов и объектов при объявлении функций
Деструктуризация может использоваться буквально везде, даже при объявлении функций.
Допустим, имеется функция, которая принимает массив значений и возвращает объект с тремя верхними значениями. Такая функция аналогия того, что происходит при деструктуризации массивов.
Альтернативный способ записи такой функции заключается в деструктуризации scores при объявлении функции. В этом случае потребуется написать на одну строку кода меньше. Также необходимо помнить, что в функцию будет передаваться массив.
Если мы можем комбинировать параметры по умолчанию и деструктуризацию при объявлении функций, то, что будет результатом кода ниже?
Во-вторых, происходит попытка деструктурировать переменные firstName и lastName из переданного объекта. Если такие свойства будут найдены, то они будут использованы.
Итак, такая функция выводит следующие результаты:
Далее рассмотрим rest и spread.
Rest параметр и spread оператор
Rest параметр и spread оператор похожи, т.к. оба обозначаются тремя точками. Однако они отличаются тем, что выполняют при использовании. По этой причине они по-разному названы, и будут рассмотрены по отдельности.
Rest параметр
В свободной трактовке rest параметр указывает взять остаток данных и обернуть его в массив. Если детально, то происходит преобразование списка разделенных запятыми аргументов в массив.
Arguments — Symbol (не массив)
Уверен, forEach можете сами реализовать, поэтому ниже приведен пример с reduce :
В ES6 c rest параметром предоставлена возможность перевести разделённые запятыми аргументы прямо в массив:
Rest параметр был ранее коротко представлен в разделе про деструктуризацию. Тогда из массива были деструктурированы верхние три значения:
При необходимости получить остальные данные мы бы обратились к rest параметру.
Если вас что-то сбило с толку, то запомните, что rest параметр переводить данные в массив и появляется в параметрах функций и при деструктуризации массивов.
Далее рассмотрим spread оператор.
Spread оператор
Spread оператор действует противоположно rest параметру. В свободной трактовке оператор принимает массив и разворачивает его в разделенный запятыми список аргументов.
Spread оператор часто используется для конкатенации массивов простым для чтения и понимания способом.
Допустим, необходимо объединить следующие массивы:
В ES6 spread оператор позволяет объединять массивы в новый массив способом, который легче для чтения:
Spread оператор также может применяться для удаления элемента из массива без видоизменения массива. Этот метод распространен в Redux. Рекомендую вам посмотреть видео от Dan Abramov, чтобы разобраться, как это работает.
Расширенные литералы объектов
Расширенные литералы объектов в ES6 привносят три усовершенствования. К ним относятся:
Рассмотрим каждое из них.
Сокращение для значений свойств
Замечали ли вы, что иногда записываете в свойство объекта переменную с именем, совпадающим с названием свойства объекта? Это показано на следующем примере:
В таких ситуациях вам бы хотелось писать код короче?
ES6 расширяет объекты сокращениями для значений свойств, что означает возможность писать только переменную, если имя переменной совпадает с именем свойства.
Это выглядит следующим образом:
Сокращения для методов
Методами являются функции, связанные со свойством объекта. Ниже пример метода:
Сокращениями для методов в ES6 является то, что удаление : function из объявления метода не нарушает его работу:
С этим усовершенствованием объекты уже получают сокращение для метода, поэтому не рекомендую использовать стрелочные функции при объявлении объектов, т.к. это нарушит контекст this (вернитесь к разделу по стрелочным функциям, если не помните, почему так происходит).
Теперь перейдем к последнему усовершенствованию объектов.
Вычисляемые имена свойств объектов
Иногда возникает необходимость в динамическом имени свойства при создании объектов. Раньше вам бы пришлось создать объект, а затем внести свойство следующим способом:
В ES6 нет необходимости в таком «обходном пути», т.к. существует возможность назначить динамическое имя свойства напрямую при создании объекта. В тоже время важно обернуть динамическое свойство в квадратные скобки:
Это всё, что касалось расширенных литералов объектов. Далее рассмотрим другую полезную особенность: шаблонные строки.
Шаблонные строки
Работа со строками в JavaScript крайне тяжелый процесс. Мы сталкивались с этим при создании функции announcePlayer в разделе про параметры по умолчанию. Ниже в коде созданы пробелы с пустыми строками, которые объединены сложением:
В ES6 эта проблема решается шаблонными литералами (в спецификации они ранее назывались шаблонными строками).
Ниже пример того, как это выглядит в действии:
Таким образом, появилось возможность составлять различные комбинации с помощью шаблонных литералов, что напоминает использование шаблонизатора.
Самой полезной особенностью шаблонных литералов является возможность создания многострочных строк. Ниже представлен пример:
Такие строки могут быть использованы для создания HTML элементов в JavaScript коде (это не лучший способ создания HTML элементов, но лучше, чем их создание один за одним по отдельности).
Другой особенностью шаблонных литералов являются теги. Теги — это функции, которые позволяют манипулировать шаблонным литералом для замены любой строки.
Если быть честным, то несмотря на то, что шаблонные теги производят впечатление, у меня до сих пор не возникло ситуации для их применения. С целью их более детального изучения рекомендую прочитать материал на MDN.
Вывод
Это были все особенности ES6, которые использую на регулярной основе. Определенно стоит потратить немного своего времени и изучить их, чтобы понимать, что вокруг пишут другие.
Как пользоваться деструктуризацией JavaScript
Sep 11 · 5 min read
Деструктуризация — это полезная фича JavaScript позволяющая извлечь параметры объекта в конкретные переменные.
Помимо возможности извлечь сразу несколько свойств из объекта, деструктуризация также позволяет извлекать вложенные свойства, а так же присваивать значение по умолчанию, если свойство не существует.
1. Зачем использовать деструктуризацию?
Представьте, что вам необходимо извлечь некоторые свойства из объекта. До появления ES-2015 вам пришлось бы написать следующий код:
В о т где полезен синтаксис деструктуризации объекта: вы можете прочитать свойство и присвоить его значение переменной, не дублируя имя свойства. Более того, вы можете прочитать несколько свойств одного и того же объекта всего одним оператором!
Давайте перепишем приведенный выше код и применим деструктуризацию объекта для доступа к свойствам name и realName :
Сравните эти два подхода доступа к свойствам объекта:
видно, что деструктуризация объекта более удобна, т.к. ни имена свойств, ни переменная объекта не дублируются.
2. Извлечение свойства
Чтобы разложить объект на несколько свойств, перечислите свойства, добавив запятые между ними:
Это аналогично коду:
Давайте еще раз посмотрим на пример из первого раздела, где извлекаются два свойства:
4. Значения по умолчанию
К счастью, вы можете установить значение по умолчанию, если свойство не существует в деструктурированном объекте. Вот основной синтаксис:
Это аналогично коду:
Давайте изменим предыдущий пример кода и воспользуемся функцией значения по умолчанию:
Теперь вместо значениям undefined переменная enemies по умолчанию имеет значение [‘Джокер’]
5. Псевдонимы
Если вы хотите создать переменные с именами, отличными от имен свойств объекта, вы можете использовать псевдонимы.
identifier — это имя свойства, aliasIdentifier — имя переменной, а expression это объект. После деструктуризации переменная aliasIdentifier будет содержать значение свойства.
Это аналогично коду:
Вот пример использования псевдонима:
6. Извлечение свойств из вложенных объектов
В предыдущих примерах объекты были простыми: свойства имеют примитивные типы данных (например, строки).
Часто объекты могут быть вложены в другие объекты. Другими словами, некоторые свойства могут содержать объекты.
В таком случае вы все равно можете использовать деструктуризацию объекта и получить доступ к свойствам вложенного объекта. Вот базовый синтаксис:
nestedObjectProp — это имя свойства, содержащего вложенный объект. identifier — это имя свойства вложенного объекта. expression объект для деструктуризации.
После деструктуризации identifier будет содержать значение свойства вложенного объекта.
Код выше аналогичен коду:
Уровень вложенности, из которого вы можете извлекать свойства, не ограничен. Если вы хотите извлечь свойства из глубины, просто добавьте больше вложенных фигурных скобок.
Например, hero содержит вложенный объект
Деструктуризация объекта const const < address: < city >> = hero позволяет получить доступ к свойству city из вложенного объекта.
7. Извлечение свойства с динамическим именем
Вы можете извлекать в переменные, свойства с динамическим именем (т.е. имя свойства определяется во время выполнения):
Выражение propName это имя свойства (обычно это строка), а identifier имя переменной, которая будет создана после деструктуризации. Второе выражение expression это объект, который вы хотите деструктурировать.
Код выше аналогичен коду:
Давайте рассмотрим пример, где prop содержит имя свойства:
8. Остатки объекта после деструктуризации
Где identifier — это имя свойства, к которому нужно получить доступ, а expression это объект.
После деструктуризации identifier содержит значение свойства. Переменная rest — это объект с оставшимися свойствами.
В то же время остальные свойства (в данном случае realName ) собираются в переменную realHero: < realName: 'Брюс Уэйн' >.
Деструктуризация JS (теория и примеры)
Деструктуризация позволяет нам «вытащить» значения нужных элементов из массивов или свойств из объектов и присвоить новым переменным.
Давайте рассмотрим пример, в котором имеется объект auto с несколькими свойствами. Нам требуется присвоить значение каждого свойства auto новой переменной:
Используя деструктуризацию, мы можем то же самое записать в одну строчку:
Вложенная деструктуризация
Деструктурирование точно также работает со вложенными объектами.
Если нам потребуется получить значения длины (length) и ширины (width), то можно сделать это так:
Либо можно использовать деструктуризацию:
Изменение названия переменной во время деструктуризации
Иногда нам нужно ‘вытащить’ значение нужного свойства из объекта и присвоить переменной с другим названием. Это может потребоваться из-за того, что переменная с тем же названием уже существует в текущей области видимости.
В этом примере переменная width уже определена.
В этом случае можно, в процессе деструктуризации, поменять названия переменных:
Установка значений по умолчанию для деструктурируемых переменных
Еще один важный момент, который следует обсудить – возможность устанавливать значения по умолчанию.
Бывают случаи, когда в процессе деструктуризации, в объекте отсутствует значение какого-либо свойства.
Деструктуризация позволяет нам установить значения переменных по умолчанию:
Следует помнить, что если значение свойства в объекте равняется Null, False или 0, то значение по умолчанию применяться не будет!
Деструктуризация массивов
Если говорить о массивах, то здесь пример деструктуризации будет выглядеть следующим образом:
Операторы Spread и Rest в Javascript ES6 (просто и c примерами)
Массив: перебирающие методы 2020 (11 примеров)