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

@serverSerrverlesskiy

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

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

object

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

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
}

Результат

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

Видео

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

bookmark

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

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

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)
}

Результат

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

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

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

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
}

Результат

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

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

Dafault

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

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
}

Результат

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

Остаток

octatok

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

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

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
}

Результат