деструктуризация что это простыми словами

Введение в часто используемые особенности 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

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

В 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.

Источник

Деструктуризация в JavaScript

Доброго времени суток, друзья. В данной статье мы разберем на примерах понятие деструктурирующего присваивания (destructuring assignment). Посмотрим, где его можно использовать, а также его преимущества по сравнению со старым синтаксисом выполнения аналогичных задач.

Что такое деструктуризация?

Само понятие деструктуризация (деструктурирующее присваивание) обозначает способ получения данных из массива или объекта путем использования специального синтаксиса. В чем его главная идея? Облегчить труд рядового разработчика и повысить скорость самой разработки путем написания меньшего кода. Давайте посмотрим сперва на саму проблему, решим ее стандартным способом, а затем воспользуемся деструктуризацией.

Деструктуризация массивов

Предположим что у нас есть массив простых строк.

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

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

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

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

Деструктуризация объектов

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

Для получения возраста достаточно воспользоваться точечной нотацией.

Теперь используем деструктуризацию.

Помимо синтаксиса деструктуризация имеет ряд преимуществ:

1. Быстрое присваивание переменными других названий — достаточно указать новое название переменной после двоеточия.

2. Присваивание значений по умолчанию, по аналогии с массивом — просто добавив после знака равно нужное значение.

3. Деструктуризация вложенных элементов (объектов, массивов)

Заключение

Сегодня мы рассмотрели на практике использование деструктурирующего присваивания и погрузились в нюансы работы и «фишки», которые вы можете использовать на практике. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.

Источник

Примеры деструктуризации Object или Array в Javascript

Перед деструктуризацией разберемся со структурой

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

Структура данных — это формат хранения, созданный с целью хранения и организации данных, часто с приоритетом доступности и настройки этих данных. Другими словами:

«Структура данных (англ. data structure) — программная единица, позволяющая хранить и обрабатывать множество однотипных и/или логически связанных данных в вычислительной технике. Для добавления, поиска, изменения и удаления данных структура данных предоставляет некоторый набор функций, составляющих её интерфейс.» — Wikipedia

В JavaScript есть две встроенные структуры данных: массивы (Array) и объекты (Object).

Что значит «деструктурировать» структуру данных?

«Синтаксис деструктурирующего присваивания в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.» — MDN

Это определение MDN. Наиболее полезной частью этого определения является слово «извлекать», помните об этом термине по мере продвижения вперед.

Рассмотрим пример кода.

Деструктуризация массива.

В первой строке объявляем новую переменную studentArr и присваиваем ей значение массива имен учеников. Во второй строке деструктурируем массив.

Таким образом, мы объявили три новые переменные и присвоили им три разных значения, всё это сделали одной строкой кода. Без деструктурирующего присваивания это заняло бы три строки:

Rest-параметр: ‘…’

Если надо присвоить первые несколько значений массива определенным переменным, а ещё захватить остальные значения массива, можно использовать rest-синтаксис:

Деструктуризация объекта.

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

Если надо извлечь отдельные значения из этого объекта, можно сделать так:

Или, используя синтаксис деструктурирующего присваивания, то же самое можно сделать так:

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

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

Допустим, есть вложенные данные, которые нужно извлечь с помощью деструктуризации. Это может показаться сложным, но на самом деле всё очень просто!

Обратите внимание на простоту этого синтаксиса в отличие от обычной цепочки.

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

Деструктуризация может использовать значения по умолчанию. В примере с фильмами, иногда появляются фильмы, которые не раскрывают свой бюджет. Если нужно это учитывать, можно назначить значение по умолчанию:

Источник

Деструктуризация JS (теория и примеры)

Деструктуризация позволяет нам «вытащить» значения нужных элементов из массивов или свойств из объектов и присвоить новым переменным.

Давайте рассмотрим пример, в котором имеется объект auto с несколькими свойствами. Нам требуется присвоить значение каждого свойства auto новой переменной:

Используя деструктуризацию, мы можем то же самое записать в одну строчку:

Вложенная деструктуризация

Деструктурирование точно также работает со вложенными объектами.

Если нам потребуется получить значения длины (length) и ширины (width), то можно сделать это так:

Либо можно использовать деструктуризацию:

Изменение названия переменной во время деструктуризации

Иногда нам нужно ‘вытащить’ значение нужного свойства из объекта и присвоить переменной с другим названием. Это может потребоваться из-за того, что переменная с тем же названием уже существует в текущей области видимости.

В этом примере переменная width уже определена.

В этом случае можно, в процессе деструктуризации, поменять названия переменных:

Установка значений по умолчанию для деструктурируемых переменных

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

Бывают случаи, когда в процессе деструктуризации, в объекте отсутствует значение какого-либо свойства.

Деструктуризация позволяет нам установить значения переменных по умолчанию:

Следует помнить, что если значение свойства в объекте равняется Null, False или 0, то значение по умолчанию применяться не будет!

Деструктуризация массивов

Если говорить о массивах, то здесь пример деструктуризации будет выглядеть следующим образом:

Операторы Spread и Rest в Javascript ES6 (просто и c примерами)

Массив: перебирающие методы 2020 (11 примеров)

Источник