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

Деструктуризация в 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 🖋 🐛 🎨