Деструктуризация что это простыми словами
Значение слова «деструктуризация»
деструктуриза́ция
1. прогр. особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части
Делаем Карту слов лучше вместе
Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!
Спасибо! Я стал чуточку лучше понимать мир эмоций.
Вопрос: саморегулирование — это что-то нейтральное, положительное или отрицательное?
Синонимы к слову «деструктуризация»
Предложения со словом «деструктуризация»
Понятия, связанные со словом «деструктуризация»
Отправить комментарий
Предложения со словом «деструктуризация»
Исключим из рассмотрения ситуации абсолютных катастроф, при которых происходит полная деструктуризация того или иного уровня феноменологической стратификации систем.
Тот наверняка ещё не слышал, но понял мой вопрос по губам, потому что еле слышно ответил мне фразой, в которой я сумел понять только «спонтанная деструктуризация».
Лучше всего у меня получалась деструктуризация объекта.
Синонимы к слову «деструктуризация»
Карта слов и выражений русского языка
Онлайн-тезаурус с возможностью поиска ассоциаций, синонимов, контекстных связей и примеров предложений к словам и выражениям русского языка.
Справочная информация по склонению имён существительных и прилагательных, спряжению глаголов, а также морфемному строению слов.
Сайт оснащён мощной системой поиска с поддержкой русской морфологии.
Деструктуризация
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице 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, которые использую на регулярной основе. Определенно стоит потратить немного своего времени и изучить их, чтобы понимать, что вокруг пишут другие.
Вы не знаете деструктуризацию, пока
Для будущих студентов курса «React.js Developer» подготовили перевод полезной статьи.
Также приглашаем вас записаться на открытый урок по теме: «Пишем приложение на React+Redux».
Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.
Так мы поступали в эпоху до деструктуризации. А теперь давайте сделаем это в стиле ES6.
Выглядит намного лучше. Получив общее представление, давайте копнем глубже.
Шаблон присваивания свойств объекта
Присвойте позже
Как упоминалось ранее, деструктуризация может использоваться в любой допустимой операции присваивания. Это означает, что вам не обязательно нужно использовать операцию деструктуризации именно при объявлении переменных. Для уже объявленной переменной деструктуризация выполняет только назначения, точно так же, как и с другими назначениями переменных. Рассмотрим пример:
Выражения присваивания не обязательно должны быть исключительно идентификаторами переменных. Разрешено все, что является допустимым выражением присваивания. Например:
Вспомните традиционный вопрос «как поменять местами две переменные без третьей временной переменной?» Теперь у нас есть новое решение для этого:
Присваивания с повторением
Форма деструктуризации объекта позволяет указывать исходное свойство несколько раз. Например:
Последовательное присваивание
Благодаря переносу значение объекта из выражения в выражение, вы можете создавать последовательные композиции деструктурирующих выражений:
[a, b] = [c] = [1, 2, 3] & (
Необязательное присваивание
При деструктуризации вам не нужно присваивать все значения, которые присутствуют в исходном объекте/массиве. Например:
Вы можете пропустить значения, которые не требуются в текущей области.
Сбор значений
Вы можете использовать синтаксис rest в деструктуризации для сбора значений в одной переменной. Например:
Присвоение значений по умолчанию
Вы можете указать значение по умолчанию для присваивания при деструктуризации как в объекта, так и в массивах. Например:
Для отсутствующих значений в исходном массиве / объекте будут применяться значения по умолчанию. Он аналогиченпо параметрам функцииумолчанию.
Вы можете комбинировать присвоение переменной по умолчанию с альтернативным синтаксисом выражения присваивания. Например:
Вложенная деструктуризация
Если значения, которые вы деструктурируете, имеют вложенные объекты или массивы, вы также можете деструктурировать и эти значения:
Деструктуризация параметров
Все вышеперечисленные правила применяются и при деструктурировании параметров функции, поскольку за кулисами аргументы присваиваются параметрам. Например:
Понимание синтаксиса деструктуризации в JavaScript
Деструктуризация обеспечивает простой, но эффективный способ создания переменных из частей массива или свойств объекта — этот подход обычно позволяет получить лучший и более понятный код.
В JavaScript (и других языках программирования) мы часто работаем с группами данных, такими как массив и объект. Доступ к этим данным обычно осуществляется с помощью индекса для массивов и свойства для объектов, но приходилось ли вам когда-нибудь обращаться к одному и тому же определенному фрагменту данных снова и снова в коде до точки, из-за чего код становилось все труднее и труднее понимать?
Ясность кода жизненно важна при работе с командами и для будущего вашей работы. Взгляните на следующие фрагменты кода.
Несмотря на то, что второй пример намного яснее и, вероятно, будет легче расшифровать любому члену команды, последний пример создается с помощью вложенной деструктуризации как объекта, так и вложенного массива, и это то, что мы рассмотрим сегодня. Так как хорошо разбираться с синтаксисом деструктуризации очень важно особенно при чтение чужого кода.
Disclaimer: эта статья предназначена для людей, которые впервые изучают синтаксис деструктурированого присваивания и испытывают трудности с его пониманием. Я расскажу только о возможностях, которые дает нам эта функция. Для получения более подробных примеров и информации я рекомендую прочитать примеры на страницы MDN Destructuring.
Начнем с массивов
На первый взгляд, приведенный выше код довольно ясен. По какой-то причине тот, кто находится в индексе 0, кажется, получает хороший предмет chocs, в то время как человек с индексом 1 получает только кусок угля coal.
Может быть, мы могли бы переписать код, чтобы он был немного понятнее.
Теперь, когда мы объявили некоторые переменные, которые более точно описывают, что означают индексы 0 и 1, код становится легче читать и понимать. Однако вы можете заметить некоторую многословность в том месте, где мы объявляем обе константы.
Сейчас это не имеет большого значения, поскольку нам нужно извлечь из массива только двух человек. Но что, если их было бы 5 или 10? Из-за этой необходимости синтаксис деструктуризации сделал нашу жизнь лучше в ES6.
Давайте подойдем к предыдущему примеру, используя этот синтаксис.
Поначалу этот синтаксис может быть очень пугающим, но вспомните времена старшей школы, когда вы изучали алгебру, и как у вас могло быть две стороны уравнений.
Вы уже знаете, как объявлять массив, поэтому, если я вам скажу:
В этом есть смысл, правда? Переменной слева присваивается содержимое справа.
Если мы инвертируем предыдущий оператор, мы получим:
Надеюсь, в это время вы начинаете получать тот момент озарения. Если мы посмотрим на предыдущий пример, одно сразу покажется неуместным. Мы точно знаем, что в JavaScript мы не можем установить ключевое слово const для объявления переменной справа от присваивания. Кроме того, у нас уже есть массив людей, объявленный вверху, поэтому мы действительно не хотим объявлять его повторно, а хотим извлечь его содержимое в две новые переменные.
Таким образом, мы перемещаем ключевое слово const в начало, и получаем следующее:
Это означает: я хочу создать две переменные, bestFriend и archEnemy, из массива people. Первая переменная, bestFriend, будет фиксировать значение в индексе 0 массива people; а вторая переменная, archEnemy, будет фиксировать значение внутри индекса 1.
Если вам интересно, откуда языку известно, что мы имеем в виду индексы 0 и 1, то это из-за позиции, которую они занимают в синтаксисе массива в левой части присваивания.
Работа с объектами
Итак, деструктуризация при работе с массивами — это хорошо, но это не обычный сценарий. Большую часть времени (по крайней мере, таков мой опыт) я использую деструктурирование при работе с объектами.
Давайте создадим объект «человек», над которым мы можем работать в качестве нашего примера.
При деструктуризации объекта у вас есть возможность легко создать переменную для каждого свойства, к которому вы хотите получить доступ. Таким образом, мы можем обойтись следующим:
Если вы хотите дать переменной собственное имя вместо имени свойства, вы можете легко сделать это следующим образом:
Теперь, когда вы обычно работаете с объектом и хотите получить доступ к одному из его свойств, вы должны сделать это, как в следующем примере.
На первый взгляд, не зная внутреннего API функции sendItem, это не очень понятно. Мы могли бы использовать простые переменные, чтобы прояснить наши намерения. Мы хотим послать нашему другу столько подарков, сколько его возраст (age), и столько врагу сколько его возраст.
Просто сделав эти простые изменения, вы уже можете увидеть, что читаемость кода резко улучшается. Теперь давайте рассмотрим тот же пример с деструктуризацией.
Давайте деструктурируем (😄) этот пример, чтобы лучше понять, что происходит.
В первой строке мы деструктурируем несколько свойств из объекта bestFriend. Нам нужно знать два фрагмента данных: perfectGift, который должен быть значением первого элемента в массиве favorites, и amountOfGiftsForFriend, который должен быть равен age.
Поскольку мы хотим переименовать свойство age нашего объекта в amountOfGiftsForFriend, чтобы сделать его более читабельным, мы должны использовать синтаксис, который позволяет нам переименовать это свойство в другую переменную. Итак, сначала мы деструктурируем возраст следующим образом:
Затем нам нужно деструктурировать свойство favorites.
А теперь оставайтесь со мной, favorites — это массив, верно? А в первой части этой статьи мы узнали, что можно деструктурировать массивы по их индексу. Помните?
Поэтому, если нам нужно получить доступ к первому объекту в массиве с индексом 0, мы можем выполнить деструктуризацию массива, вложенного в ту же строку.
Теперь нам просто нужно указать синтаксису деструктуризации, какое свойство этого первого объекта нам нужно и как мы хотим его переименовать.
Вот codesandbox с примером на тот случай, если вы захотите проверить его самостоятельно.
Заключение
Как я упоминал в начале статьи, это небольшое объяснение предназначено только для того, чтобы вы миновали тот момент OMG WHAT IS DIS, когда вы впервые сталкиваетесь с синтаксисом где-то в «дикой» природе.
Я лично считаю, что деструктуризация может внести большую ясность в код, и это фантастический инструмент, который стоит иметь за плечами разработчика. Тем не менее, я рекомендую вам хотя бы быстро прочитать примеры, предоставленные MDN, чтобы глубже понять возможности, которые может дать вам этот синтаксис.
Как всегда, спасибо за чтение и поделитесь со мной мыслями в Твиттере по адресу: @marinamosti.