Что такое деструктуризация в Javascript?

Деструктуризация — это, пожалуй, одна из величайших возможностей, добавленных в ES6 (2015) и широко используемых сегодня, поэтому понимание того, что это такое, и умение легко читать ее в коде становится обязательным в вашей повседневной жизни.

Что означает деструктуризация?

Это выражение, которое позволяет извлекать или «деструктурировать» данные из структур данных, таких как массивы, объекты, карты и множества, и создавать новые переменные с этими конкретными данными.

Он позволяет извлекать свойства из объекта, элементы из массива «простым» способом и за один раз.

Давайте подумаем об обычной структуре данных и повторяющейся задаче.

const usuario = {
    firstName: 'Matias',
    lastName: 'Hernández',
    country: 'Chile',
    twitter: '@matiasfha'
}
const firstName = usuario.firstName
const lastName = usuario.lastName

Это обычная задача, получить некоторое свойство объекта для использования внутри другого логического блока, вы можете присвоить его переменной, как в данном случае, или написать user.firstName несколько раз позже.

Деструктуризация позволяет осуществить этот процесс более прямым способом:

const { firstName, lastName } = usuario

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

Этот код просто говорит: Создайте две переменные: firstName и lastName и возьмите из объекта user одноименные свойства и присвойте им значения.

Круто, не правда ли. Это только один уровень, он может быть использован вложенным столько раз, сколько вы хотите.

const usuario = {
  firstName: 'Matias',
  lastName: 'Hernández',
  links: {
    social: {
      twitter: '@matiasfha'
    }
  } 
}
const { twitter } = usuario.links.social
// o tambien se puede
const { links: { social: { twitter } } } = usuario

Вы можете разрушать столько уровней, сколько хотите, но всегда старайтесь сохранять читабельность.

Но этот синтаксис не ограничивается только объектами, мы также можем уничтожать массивы.

const arreglo = ['Hola','soy','Matias']

Допустим, этот массив повторяется много раз, и мы хотим извлечь приветствие и имя. Как бы вы это сделали?

…

…

…

…

…

Форма без деструктуризации будет выглядеть следующим образом

const saludo = arreglo[0]
const nombre = arreglo[2]

Но если мы используем деструктуризацию, мы можем назвать переменные прямым способом

const [saludo, , nombre ] = arreglo

Вы можете посмотреть эту небольшую демонстрацию здесь

Вы видели, что я там сделал?

При деструктуризации массива мы используем позицию элемента в массиве для присвоения, поэтому greeting эквивалентно array[0] . Это также позволяет нам «пропустить» элемент массива, который нас не интересует, просто пропуская его. Вместо того чтобы писать имя переменной, которая нас не интересует, в данном случае центральное положение или array[1], мы просто пишем соответствующие ,(запятая).

Как можно получить только имя, используя деструктуризацию?

Пришлите мне ссылку на ваше решение 😄

Рассмотрим более «интересный» пример

function doSomeCalc({x, y, z = 10}( {
  return Math.floor((x + y + z ) / 3)
}
// que es lo mismo que
function doSomCalc(obj) {
  const { x, y, z = 10 } = obj
  return Math.floor((x + y + z ) / 3)
}

Эта статья на MDN может дать вам больше информации.

После того как вы ознакомитесь с содержанием статьи, я предлагаю вам следующую задачу: рефакторить следующий код с помощью дескрипции.

function doSomeDestructuring(){
  const data = {
    title: 'Wanda Vision',
    protagonistas: [
      {
        name: 'Wanda Maximof',
        enemies: [
          {name: 'Grim Reaper'},
          {name: 'Nightmare' },
          {name: 'Agatha Harkness'},
          {name: 'Zelena', title: 'The Wicked Witch'},
        ],
      },
      {
        name: 'Vision',
        enemies: [
          { name: 'Doctor Doom' },
          { name: 'Ultron' }
        ]
      }
    ],
  }
  // const {} = data // <-- Reemplaza el uso de múltiples const con destructuring
  const title = data.title
  const protagonistName = data.protagonists[0].name
  const enemy = data.protagonists[0].enemies[3]
  const enemyName = enemy.name
  return `${title}: La protagonista ${protagnistName} lucha contra ${enemyName}`
}

✉️ Присоединяйтесь к Micro-bytes 🐦 Следите за мной в Twitter ❤️ Поддержите мою работу