Деструктурирующее присваивание в JavaScript

Понимание деструктуризации в JavaScript

Деструктурирующее присваивание — это синтаксис, позволяющий извлекать значения из array или свойства из object в отдельные переменные в одном компактном выражении. Появившись в ES6 (ES2015), он заменяет повторяющийся поочерёдный доступ к свойствам и делает код, работающий со структурированными данными, значительно легче для чтения.

Без деструктуризации код выглядит так:

С деструктуризацией тот же смысл умещается в одну строку. В остальной части этой главы рассматриваются формы для array и object, значения по умолчанию, переименование, вложенные шаблоны, rest-паттерн, обмен переменных, деструктуризация параметров функций и распространённая ловушка ({ a } = {}).

Деструктуризация array: извлечение элементов

Деструктуризация array присваивает элементы array отдельным переменным по их позиции (индексу). Переменные слева отражают порядок значений справа. Это особенно удобно для возвращаемых значений функций и при итерации по парам ключ/значение.

Базовая деструктуризация array

Переменная без соответствующего элемента становится undefined — именно здесь на помощь приходят значения по умолчанию (см. ниже).

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

Оставьте «дыру» (пустой слот между запятыми), чтобы пропустить ненужные элементы. Добавьте = value, чтобы задать переменной запасное значение, которое используется только тогда, когда извлечённое значение равно undefined:

Поскольку деструктуризация работает с любым итерируемым объектом, она естественным образом сочетается с rest-паттерном для сбора оставшихся элементов:

Деструктуризация object: извлечение свойств

Деструктуризация object предоставляет удобный способ извлекать несколько свойств из object. Этот подход упрощает работу с объектами конфигурации или обработку данных из сложных структур.

Простая деструктуризация object

В отличие от array, деструктуризация object сопоставляет по имени свойства, а не по позиции, поэтому порядок ключей в шаблоне не имеет значения.

Переименование переменных и установка значений по умолчанию

Используйте синтаксис propertyName: newName, чтобы присвоить свойство переменной с другим именем — это полезно, когда имя свойства конфликтует с уже существующей переменной или не является допустимым идентификатором. Значения по умолчанию работают так же, как и с array:

Можно одновременно переименовать и задать значение по умолчанию с помощью property: newName = default:

Продвинутые техники деструктуризации

Продвинутая деструктуризация включает вложенные структуры и использование rest-параметра для агрегирования оставшихся свойств или элементов.

Вложенная деструктуризация

Шаблоны могут быть вложенными, чтобы одновременно проникать вглубь object и array. Форма шаблона просто отражает форму данных:

Обратите внимание, что size: и items: здесь — не переменные, а лишь путь в структуре. Переменными становятся только width, height, item1 и item2.

Использование rest-паттерна

Rest-паттерн (...name) собирает все оставшиеся, ещё не деструктурированные свойства в новый object. Подробнее читайте в Rest-параметры и Spread-синтаксис:

Практическое применение деструктуризации

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

1. Обмен переменных: упрощает процесс обмена значениями между переменными.
2. Управление параметрами функций: улучшает обработку множества параметров, особенно для функций с большим количеством необязательных параметров.

Обмен переменных

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

Параметры функций

Деструктуризация параметра позволяет функции принимать «объект настроек» и извлекать именованные параметры с разумными значениями по умолчанию — это намного чище, чем длинный список параметров с жёстким порядком. Завершающий = {} позволяет вызывающему коду полностью опустить аргумент:

Подробнее о параметрах читайте в главе Функции JavaScript.

Ловушка ({ a } = {})

Когда вы деструктурируете уже существующую переменную (не в объявлении const/let), необходимо обернуть выражение в скобки. Иначе JavaScript воспринимает открывающую { как начало блока кода, а не шаблона object, и выбрасывает синтаксическую ошибку:

Скобки нужны только при деструктуризации object в уже объявленные переменные. Деструктуризация array ([a, b] = [1, 2]) этой проблемы не имеет, потому что [ никогда не начинает блок оператора.

Связанная ловушка: когда и переменная, и её значение по умолчанию берутся из потенциально отсутствующего источника, задайте всему параметру значение по умолчанию {} (как в drawChart выше). Без этого вызов функции без аргумента приведёт к ошибке, поскольку нельзя читать свойство из undefined.

Заключение

Деструктуризация в JavaScript — это мощная возможность, которая делает код более читаемым, лаконичным и простым в сопровождении. Применяя этот подход, разработчики могут эффективно извлекать данные из array и object, что приводит к более чистым и эффективным структурам кода.

Практика