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

1. Деструктуризация массива

Чтобы понять деструктурирование массива, см. фрагмент кода ниже:

Здесь все значения массива были присвоены переменным в массиве с левой стороны.

Деструктуризация упростила распаковку данных из массива, даже если у нас есть вложенный массив с 5-6 уровнями. Мы можем использовать литерал массива в левой части присваивания.

Если количество переменных, переданных в деструктурирующем массиве, меньше количества элементов в массиве, значение переменных, которые не сопоставлены ни с одним элементом массива, не определено.

Игнорирование некоторых значений

Если нам не нужно значение, мы его тоже игнорируем. Чтобы понять, посмотрите фрагмент кода ниже:

Использование оператора REST для включения оставшихся значений

Мы также можем использовать новый оператор REST (…) для присвоения оставшихся значений массиву.

Оператор распространения для значений массива SPREAD

Новый оператор Spread (…) также можно использовать в синтаксисе деструктурирования для распаковки некоторых значений массива и присвоения их переменной.

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

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

С помощью деструктуризации объектов мы можем присваивать значения объекта переменным в одной строке.

В приведенном выше примере свойства a, b и c присваиваются переменным animal1, animal2 и animal3 соответственно.

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

Установка значения по умолчанию

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

В приведенном выше примере мы присвоили значение по умолчаниюпустую строку значениепеременной «e», когда объект obj не содержит свойства «е».