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

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

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

Интерактивный редактор

function learnJavaScript() { // Создаём объект `fruit` let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // Деструктуризация объекта `fruit` let { title, group, quantity } = fruit // Выводим на экран `title` return title }

function learnJavaScript() {
  // Создаём объект `fruit`
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }

  // Деструктуризация объекта `fruit`
  let { title, group, quantity } = fruit

  // Выводим на экран `title`
  return title
}

Результат

Loading...

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

Видео

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

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

Интерактивный редактор

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: { store: 5, storeHaus: 99 } } let { title, quantity: { store: s1, storeHaus: s2 } } = fruit return title + ', ' + parseFloat(s1 + s2) }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: {
      store: 5,
      storeHaus: 99
    }
  }

  let {
    title,
    quantity: { store: s1, storeHaus: s2 }
  } = fruit

  return title + ', ' + parseFloat(s1 + s2)
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // title -> a; group -> b; quantity -> c let { title: a, group: b, quantity: c } = fruit return a }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }
  // title -> a; group -> b; quantity -> c
  let { title: a, group: b, quantity: c } = fruit

  return a
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { let fruit = { title: 'banana' } let { title = 'lime', group, quantity = 5 } = fruit return title + ', ' + group + ', ' + quantity }

function learnJavaScript() {
  let fruit = {
    title: 'banana'
  }
  let { title = 'lime', group, quantity = 5 } = fruit

  return title + ', ' + group + ', ' + quantity
}

Результат

Loading...

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

Остаток

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

Интерактивный редактор

function learnJavaScript() { let fruit = { title: 'banana ', group: 'tropical ', quantity: 5 } let { group, ...prop } = fruit return prop.title + group }

function learnJavaScript() {
  let fruit = {
    title: 'banana ',
    group: 'tropical ',
    quantity: 5
  }
  let { group, ...prop } = fruit

  return prop.title + group
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { // Создаем массив `fruit` let fruit = ['banana', 'tropical', 5] // Деструктурируем массив `fruit` let [title, group, quantity] = fruit // Выводим на экран return `${title}, ${group}, ${quantity}` }

function learnJavaScript() {
  // Создаем массив `fruit`
  let fruit = ['banana', 'tropical', 5]

  // Деструктурируем массив `fruit`
  let [title, group, quantity] = fruit

  // Выводим на экран
  return `${title}, ${group}, ${quantity}`
}

Результат

Loading...

Остаток

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

Интерактивный редактор

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let [name, ...prop] = fruit return `${name}, ${prop}` }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let [name, ...prop] = fruit

  return `${name}, ${prop}`
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let _fruit = [...fruit] return _fruit }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let _fruit = [...fruit]

  return _fruit
}

Результат

Loading...

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

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

Интерактивный редактор

function learnJavaScript() { let name = ['banana '], prop = ['tropical ', 5], fruit = [...name, ...prop] return fruit }

function learnJavaScript() {
  let name = ['banana '],
    prop = ['tropical ', 5],
    fruit = [...name, ...prop]

  return fruit
}

Результат

Loading...

Проблемы?

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

Вопросы

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

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

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

1. true
2. false

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

1. error
2. undefined
3. unknown

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

Ссылки

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

IIo3iTiv 📖

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨