Что такое деструктуризация объекта
Делаем код чище с помощью деструктуризации объектов в JavaScript
Авторизуйтесь
Делаем код чище с помощью деструктуризации объектов в JavaScript
В этой статье мы сравним традиционный подход и использование нового синтаксиса деструктуризации объектов в JavaScript стандарта ES6. Этот синтаксис позволяет распаковать значения из сложных объектов и массивов. Его можно использовать для того, чтобы сделать код чище и лаконичнее.
Сначала мы обсудим деструктуризацию объектов, а затем перейдём к массивам.
Деструктуризация объектов в JS
Для примера возьмём объект, содержащий простые свойства и вложенные объекты, с данными о покупателе:
Базовое присваивание
Традиционный подход для получения данных объекта — использовать точку или квадратные скобки:
Это можно сделать одной строкой кода:
Мы также можем изменить имя переменной:
Присваивание объявленным переменным
Для этого нужно использовать круглые скобки:
Вложенные объекты
Мы можем получать вложенные свойства по одному:
С помощью деструктуризации объекта в JS этот код можно записать в одну строку:
Деструктуризация со значениями по умолчанию
Допустим, у объекта customer есть булево поле married, которое может не иметь значения. Без деструктуризации проверка на наличие значения может выглядеть так:
С помощью деструктуризации можно сделать это в одну строку:
Оставшиеся параметры
С помощью многоточия и любого имени переменной мы можем получить оставшиеся параметры, которые не были указаны. Для них обычно используют имя rest:
Обработка null-объектов
Если мы попытаемся деструктурировать null-объект, то получим ошибку. Этого можно избежать:
С помощью оператора ИЛИ мы заменили null пустым объектом.
Деструктуризация аргументов функции
Мы можем деструктурировать объекты, переданные в функцию. Сначала посмотрим, как это работает без деструктуризации:
А так выглядит деструктуризация параметров функции:
Деструктуризация массивов в JS
Синтаксис, который мы использовали для деструктуризации объектов, можно применять и к массивам. Кроме того, деструктуризация массивов имеет интересные особенности. Для их демонстрации будем использовать массив фруктов:
Доступ к элементам массива через деструктуризацию будет выглядеть так:
Пропуск и получение остальных элементов
Чтобы пропустить ненужный элемент массива используется запятая:
Деструктуризация
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/destructuring-assignment.
Деструктуризация (destructuring assignment) – это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части.
Массив
Пример деструктуризации массива:
Ненужные элементы массива также можно отбросить, поставив лишнюю запятую:
В коде выше первый и второй элементы массива никуда не записались, они были отброшены. Как, впрочем, и все элементы после третьего.
Оператор «spread»
Если мы хотим получить и последующие значения массива, но не уверены в их числе – можно добавить ещё один параметр, который получит «всё остальное», при помощи оператора «. » («spread», троеточие):
Значением rest будет массив из оставшихся элементов массива. Вместо rest можно использовать и другое имя переменной, оператор здесь – троеточие. Оно должно стоять только последним элементом в списке слева.
Значения по умолчанию
Если значений в массиве меньше, чем переменных – ошибки не будет, просто присвоится undefined :
Впрочем, как правило, в таких случаях задают значение по умолчанию. Для этого нужно после переменной использовать символ = со значением, например:
В качестве значений по умолчанию можно использовать не только примитивы, но и выражения, даже включающие в себя вызовы функций:
Заметим, что вызов функции defaultLastName() для генерации значения по умолчанию будет осуществлён только при необходимости, то есть если значения нет в массиве.
Деструктуризация объекта
Деструктуризацию можно использовать и с объектами. При этом мы указываем, какие свойства в какие переменные должны «идти».
Объект справа – уже существующий, который мы хотим разбить на переменные. А слева – список переменных, в которые нужно соответствующие свойства записать.
Можно и сочетать одновременно двоеточие и равенство:
А что, если в объекте больше значений, чем переменных? Можно ли куда-то присвоить «остаток», аналогично массивам?
Такой возможности в текущем стандарте нет. Она планируется в будущем стандарте, и выглядеть она будет примерно так:
Этот код будет работать, например, при использовании Babel со включёнными экспериментальными возможностями, но ещё раз заметим, что в текущий стандарт такая возможность не вошла.
Однако, здесь есть небольшой «подвох». В JavaScript, если в основном потоке кода (не внутри другого выражения) встречается <. >, то это воспринимается как блок.
Например, можно использовать такой блок для ограничения видимости переменных:
Конечно, это бывает удобно, но в данном случае это создаст проблему при деструктуризации:
Чтобы избежать интерпретации
Вложенные деструктуризации
Если объект или массив содержат другие объекты или массивы, и их тоже хочется разбить на переменные – не проблема.
Деструктуризации можно как угодно сочетать и вкладывать друг в друга.
В коде ниже options содержит подобъект и подмассив. В деструктуризации ниже сохраняется та же структура:
Как видно, весь объект options корректно разбит на переменные.
Итого
Деструктуризация позволяет разбивать объект или массив на переменные при присвоении.
Объявление переменной в начале конструкции не обязательно. Можно использовать и существующие переменные. Однако при деструктуризации объекта может потребоваться обернуть выражение в скобки.
Вложенные объекты и массивы тоже работают, при деструктуризации нужно лишь сохранить ту же структуру, что и исходный объект/массив.
Как мы увидим далее, деструктуризации особенно удобны при чтении объектных параметров функций.
Введение в часто используемые особенности 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, которые использую на регулярной основе. Определенно стоит потратить немного своего времени и изучить их, чтобы понимать, что вокруг пишут другие.
Деструктуризация JS (теория и примеры)
Деструктуризация позволяет нам «вытащить» значения нужных элементов из массивов или свойств из объектов и присвоить новым переменным.
Давайте рассмотрим пример, в котором имеется объект auto с несколькими свойствами. Нам требуется присвоить значение каждого свойства auto новой переменной:
Используя деструктуризацию, мы можем то же самое записать в одну строчку:
Вложенная деструктуризация
Деструктурирование точно также работает со вложенными объектами.
Если нам потребуется получить значения длины (length) и ширины (width), то можно сделать это так:
Либо можно использовать деструктуризацию:
Изменение названия переменной во время деструктуризации
Иногда нам нужно ‘вытащить’ значение нужного свойства из объекта и присвоить переменной с другим названием. Это может потребоваться из-за того, что переменная с тем же названием уже существует в текущей области видимости.
В этом примере переменная width уже определена.
В этом случае можно, в процессе деструктуризации, поменять названия переменных:
Установка значений по умолчанию для деструктурируемых переменных
Еще один важный момент, который следует обсудить – возможность устанавливать значения по умолчанию.
Бывают случаи, когда в процессе деструктуризации, в объекте отсутствует значение какого-либо свойства.
Деструктуризация позволяет нам установить значения переменных по умолчанию:
Следует помнить, что если значение свойства в объекте равняется Null, False или 0, то значение по умолчанию применяться не будет!
Деструктуризация массивов
Если говорить о массивах, то здесь пример деструктуризации будет выглядеть следующим образом:
Операторы Spread и Rest в Javascript ES6 (просто и c примерами)
Массив: перебирающие методы 2020 (11 примеров)
Вы не знаете деструктуризацию, пока
Для будущих студентов курса «React.js Developer» подготовили перевод полезной статьи.
Также приглашаем вас записаться на открытый урок по теме: «Пишем приложение на React+Redux».
Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.
Так мы поступали в эпоху до деструктуризации. А теперь давайте сделаем это в стиле ES6.
Выглядит намного лучше. Получив общее представление, давайте копнем глубже.
Шаблон присваивания свойств объекта
Присвойте позже
Как упоминалось ранее, деструктуризация может использоваться в любой допустимой операции присваивания. Это означает, что вам не обязательно нужно использовать операцию деструктуризации именно при объявлении переменных. Для уже объявленной переменной деструктуризация выполняет только назначения, точно так же, как и с другими назначениями переменных. Рассмотрим пример:
Выражения присваивания не обязательно должны быть исключительно идентификаторами переменных. Разрешено все, что является допустимым выражением присваивания. Например:
Вспомните традиционный вопрос «как поменять местами две переменные без третьей временной переменной?» Теперь у нас есть новое решение для этого:
Присваивания с повторением
Форма деструктуризации объекта позволяет указывать исходное свойство несколько раз. Например:
Последовательное присваивание
Благодаря переносу значение объекта из выражения в выражение, вы можете создавать последовательные композиции деструктурирующих выражений:
[a, b] = [c] = [1, 2, 3] & (
Необязательное присваивание
При деструктуризации вам не нужно присваивать все значения, которые присутствуют в исходном объекте/массиве. Например:
Вы можете пропустить значения, которые не требуются в текущей области.
Сбор значений
Вы можете использовать синтаксис rest в деструктуризации для сбора значений в одной переменной. Например:
Присвоение значений по умолчанию
Вы можете указать значение по умолчанию для присваивания при деструктуризации как в объекта, так и в массивах. Например:
Для отсутствующих значений в исходном массиве / объекте будут применяться значения по умолчанию. Он аналогиченпо параметрам функцииумолчанию.
Вы можете комбинировать присвоение переменной по умолчанию с альтернативным синтаксисом выражения присваивания. Например:
Вложенная деструктуризация
Если значения, которые вы деструктурируете, имеют вложенные объекты или массивы, вы также можете деструктурировать и эти значения:
Деструктуризация параметров
Все вышеперечисленные правила применяются и при деструктурировании параметров функции, поскольку за кулисами аргументы присваиваются параметрам. Например: