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

Деструктуризация в 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. Да
2. Нет

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

1. error
2. undefined
3. unknown

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

1. Да
2. Нет

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

Ссылки

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

IIo3iTiv

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨