деструктуризация в 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"
Это экономит время при работе с большими объемами информации о некоторых данных, а код становится намного чище.
Другие способы использования деструктуризации
- Значения по умолчанию
продолжение следует…