Деструктуризация упрощает JavaScript код (значительно уменьшает его количество) и применяется для разбивки объектов или массивов на простые части.
Деструктуризация появилась в новом синтаксисе стандарта ES6. С ее помощью можно "распаковывать" объекты и массивы, копируя их необходимые составляющие в переменные и не изменяя исходник.
Приведу примеры удобства использования деструктуризации.
Обмен значениями у переменных
Привычный верный синтаксис:
Если решать задачу обмена значениями без ввода временной переменной, то у нас ничего не получится:
Благодаря деструктуризации задача с обменом данных решается логически проще и короче в написании:
Извлечение данных из массива
Использование синтаксиса ES5
Благодаря деструктуризации код значительно можно упростить без повторов:
Получение данных из объекта
Использование синтаксиса ES5
При деструктуризации объекта мы можем достать только те переменные, которые нам необходимы по ключу.
Если необходимо извлечь вложенные свойства объекта, то деструктуризация так же способна облегчить этот процесс:
То есть деструктуризация позволяет с минимальными усилиями получать значения из массивов и объектов, менять эти значения местами и поддерживает заложенную изначально вложенность.
Получение "остаточных параметров"
Бывают ситуации, когда нужно получить какой-то определенный параметр + все остальные. В таком случае помогает оператор "остаточные параметры" (троеточие "..."), который используется с любой переменной, в которую будут получены оставшиеся значения (элементы rest) и в деструктурирующем присваивании эта переменна должна стоять в конце.
В данном примере переменная all является объектом из оставшихся элементов
Значения по умолчанию (дефолтные)
Иногда при присваивании можно столкнуться с отсутствующими значениями. В таком случае ошибка не возникает, их значения просто считаются неопределенными.
Но можно использовать дефолтное значение, которое будет применяться, только если ключ не определен.
Клонирование массивов
В JavaScript массивы назначаются присваиванием вместо копирования.
В данном примере переменные обоих массивов arr и newArr указывают на один и тот же массив в памяти, значит любые манипуляции, проделанные с элементами массива arr, затронут элементы массива newArr
Используя метод slice мы можем клонировать массив, в таком случае изменяя структуру массива arr мы не затронем массив newArr
Деструктуризация и оператор "..." позволяет так же получать клон массива без использования методов