Появившийся в ES6 синтаксис деструктурирующего присваивания — это своего рода ярлык, призванный минимизировать количество написанного кода. Короче говоря, он извлекает данные как из массивов, так и из объектов, облегчая управление ими.
В этом учебнике я рассмотрю идею деструктуризации объектов и массивов.
Деструктуризация массивов:
Один из способов извлечь элемент из массива — сделать этот элемент переменной и присвоить ему соответствующий индекс.
Для приведенного ниже массива мы хотим получить первый элемент.
Мы превратили john в переменную, затем присвоили индекс index[0] переменной name. Мы просим вытащить самый первый элемент.
Так это обычно делается, но есть гораздо более простой способ сделать все это благодаря синтаксису деструктуризации!
Допустим, мы хотим вытащить первые три элемента массива.
Вместо того, чтобы делать это,
мы можем поступить следующим образом,
Вы просто берете элемент, который хотите деструктурировать, и помещаете его справа от знака равенства, затем помещаете элементы, которые хотите захватить, внутрь скобок массива.
Используя литерал массива, каждая переменная сопоставляется с одним и тем же элементом в одном и том же индексе массива.
Допустим, вы хотите пропустить элемент и взять только индекс[0] и индекс[3].
По сути, это означает «пропустить элемент два и три!».
Деструктуризация объектов:
Здесь у нас есть два объекта, contactOne и contactTwo со свойствами name, age и address. Свойство адреса имеет свои собственные свойства, город и штат.
Вы помещаете свойство, которое пытаетесь захватить, внутрь фигурных скобок, а место, откуда вы его захватываете, — справа от знака равенства.
При деструктуризации объектов вместо [скобок] используются {курчавые скобки}.
В объектах можно также использовать значение по умолчанию,
например:
console.log(occupation); // LOG: unknown
Все, что вам нужно сделать, это создать новое свойство occupation, а затем установить значение по умолчанию «неизвестно». Как вы видите, по умолчанию свойство occupation имеет значение «unknown».
Напротив, вы также можете добавить свойство occupation непосредственно внутри contactTwo и получить вывод личного занятия каждого отдельного контакта.
console.log(occupation); // LOG: Software Engineer I
Деструктуризация может показаться мелочью при работе с несколькими параметрами, но в ситуациях, когда вам приходится работать с большим количеством параметров, этот метод оказывается весьма полезным.