Синтаксис деструктурирующего присваивания (представлен в ES6) — это выражение JavaScript, которое позволяет нам извлекать данные из массивов, объектов и карт и задавать их в новые, отдельные переменные. Например,
До ES6:
Из ES6:
Примечание. При деструктурировании объектов следует использовать имя переменной, соответствующее ключу объекта. Порядок имени не имеет значения при деструктуризации объекта.
Если вы хотите назначить разные имена переменных для ключа объекта, вы можете использовать:
Разрушение массива
Вы также можете аналогичным образом выполнить деструктуризацию массива. Например,
Назначение значений по умолчанию
Вы можете назначить значения по умолчанию для переменных при использовании деструктуризации. Например,
В приведенной выше программе теги имеют только один элемент. Таким образом, переменная tag1 будет иметь значение Tower A, а переменная tag2 примет значение по умолчанию Flooring.
При деструктуризации объекта вы можете аналогичным образом передавать значения по умолчанию. Например,
Назначение отдельно от объявления
Переменной можно присвоить свое значение посредством деструктуризации, отдельно от объявления переменной.
Примечание. Круглые скобки ( … ) вокруг оператора присваивания необходимы при использовании деструктурирующего присваивания литерала объекта без объявления.
Вашему ( … )выражению должна предшествовать точка с запятой, иначе оно может использоваться для выполнения функции в предыдущей строке.
Замена переменных
Используя синтаксис деструктурирующего присваивания, вы можете легко поменять местами значения двух переменных в одном выражении. Без деструктурирования присваивания вам нужна временная переменная, чтобы поменять местами значения двух переменных.
Игнорировать значения
Вы можете игнорировать нежелательные значения в массиве, не назначая их локальным переменным. Например,
Присвоение остальной части объекта и массива переменной
При деструктурировании объекта и массива вы можете распаковать и присвоить оставшуюся часть объекта и массива переменной, используя шаблон rest. Например,
Примечание. Всегда рассмотрите возможность использования оператора rest (…) в качестве последнего элемента. SyntaxError будет сгенерировано, если запятая в конце используется справа от остаточного элемента.
Деструктуризация вложенных объектов и массивов
Вы также можете выполнять вложенную деструктуризацию объекта и массива. Например,
В приведенном выше примере переменные start_date и end_date являются вложенными свойствами объектной задачи, а переменные tag3 и tag4 являются вложенными элементами тегов.
Чтобы выполнить вложенное назначение деструктурирования для объектов, вы должны заключить переменные в структуру объекта (путем включения внутрь {}) и [] для массива.
Ресурсы:
Я надеюсь, что к настоящему моменту вы получили четкое представление о том, как работает деструктуризация в JavaScript. Итак, мы знаем, что деструктуризация проникает в ваше повседневное использование языка, незаметно делая ваш код немного короче и чище повсюду.
Я хотел бы услышать ваши мысли об использовании деструктуризации другими способами. Вы также можете поделиться фрагментом в комментариях ниже, чтобы помочь своим коллегам-разработчикам. Следите за частью 2, чтобы получить более глубокие знания о деструктуризации и ее применении.
Удачного кодирования!
