деструктуризация в javascript

ES6 от Javascript принес с собой несколько новых интересных трюков; такие как Const и Let, оба предпочтительнее традиционных var из-за области действия, функций стрелок, шаблонных литералов и других. Но ничто из этого, на мой взгляд, не так захватывающе, как концепция деструктуризации массивов и объектов.

Вот как это определяется на веб-сайте Mozilla:

Синтаксис деструктурирующего присваивания - это выражение JavaScript, которое позволяет распаковывать значения из массивов или свойства из объектов в отдельные переменные.

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

player = {
  name: 'Kobe Bryant',
  team: 'Los Angeles Lakers',
  coach: 'Phil Jackson',
  alias: 'The Black Mamba',
  number: 24,
  titles: 5
};

Традиционно, если я хотел получить значения из объекта игрока, мне нужно было пойти

player.name;
player.team;

или сохраните их в переменных типа

const name = player.name;
const team = player.team;

С деструктурирующим синтаксисом ES6 я могу просто сделать это

const { name } = player; 
  //   console.log(name); <--- prints "Kobe Bryant"
const { team } = player;
  //   console.log(team); <--- prints "Los Angeles Lakers"

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

const {name, team, number, titles} = player
//   console.log(name); <--- prints "Kobe Bryant"
//   console.log(team); <--- prints "Los Angeles Lakers"

Это может показаться тривиальным, по крайней мере, для объектов одного измерения, но особенно эффективно и полезно при работе с вложенными массивами и объектами, обычно в случае использования объектов JSON с API. Рассмотрим этот пример ответа от API Google Книг.

response = {
  {
     "kind": "books#volume",
     "id": "AZ5J6B1-4BoC",
     "etag": "kIzQA7IUObk",
     "selfLink": "https://www.googleapis.com/books/v1/volumes/AZ5J6B1-4BoC",
     "volumeInfo": {
      "title": "The Girl Who Kicked the Hornet's Nest",
      "authors": [
       "Stieg Larsson"
      ],
      "publisher": "Knopf",
      "publishedDate": "2010-05-25",
      ...
    },
    {
     "kind": "books#volume",
     "id": "UvK1Slvkz3MC",
     "etag": "otKmdbRgdFQ",
     "selfLink": "https://www.googleapis.com/books/v1/volumes/UvK1Slvkz3MC",
     "volumeInfo": {
      "title": "The Girl who Played with Fire",
      "authors": [
       "Stieg Larsson"
      ],
      "publisher": "Knopf",
      "publishedDate": "2009-07-28",
      ...
    },
  }
         ................

Мы можем получить информацию обо всем в каждом ключе хэша ответа следующим образом:

for(key in response){
   const {title, authors, publisher, publishedDate} = key.volumeInfo
}
//   console.log(title); <--- prints "The Girl Who Kicked the Hornet's Nest"

Это экономит время при работе с большими объемами информации о некоторых данных, а код становится намного чище.

Другие способы использования деструктуризации

  1. Значения по умолчанию
    продолжение следует…