मुख्य कंटेंट तक स्किप करें

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

@serverSerrverlesskiy

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

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

object

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Свойства title, group и quantity, повторяют структуру объекта fruit и копируют свои значения в идентичные переменные 🔔 находящиеся в {...}. Поэтому, если вы поменяете переменные 🔔 в {...} местами, то код будет так же прекрасно работать, попробуйте в примере выше поменять переменные 🔔 местами.

Вложенный объект#

bookmark

Мы также можем деструктурировать вложенный объект.

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Другие названия#

Если вам нужно использовать названия переменных 🔔 отличные от названия свойств, то будет работать такой синтаксис:

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Дефолтные значения#

Если в {...} вы напишете переменную 🔔 свойства, которой не будут найдены, то ей присвоится значение undefined. Для назначения переменной 🔔 дефолтного значение, это значение ей можно присвоить. Если вы попытаетесь присвоить значение переменной 🔔 свойства которой будут найдены, то ей присвоится значение свойства. Рассмотрим на примере.

Dafault

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

В title выводится значение свойства, а не то, что мы ей присваиваем. Свойства group в объекте fruit не существует, а переменной 🔔 никаких значений мы не присваивали. Свойства quantity также не существует, но переменной 🔔 мы присвоили значение 5.

Остаток#

octatok

Если вам нужно получить из объекта одну переменную 🔔 , а оставшиеся сгруппировать в другой объект, то используйте ... перед переменной 🔔 из которой будет создан объект с оставшимися свойствами.

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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

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

Take

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Остаток#

По аналогии с объектами работает остаток.

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Копия массива#

Пример создания🏗️ копии массива.

Copia

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Объединение массивов#

add

Пример объединения массивов в один.

लाइव एडिटर
परिणाम
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы#

Question

Деструктуризация - это?

  1. Функция
  2. Синтаксис
  3. Объект

Обязательно ли, при деструктуризации объекта, ставить переменные в том же порядке, в каком они находятся в объекте?

  1. Да
  2. Нет

Что присвоится переменной, если в объекте не будет найдено идентичного свойства?

  1. error
  2. undefined
  3. unknown

Важен ли порядок элементов в объекте, при его деструктуризации?

  1. Да
  2. Нет

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

Sumerian school

Ссылки#

  1. Learn JavaScript
  2. MDN Web Docs
  3. Деструктуризация в ES6

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


IIo3iTiv

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!