Деструктуризация в JavaScript

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

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

Синтаксис деструктуризации без использования объемного (сложного) кода позволяет:

  • получить доступ к элементам сложных объектов;
  • управлять вложенными структурами объектов.

Обычно операции присваивания следуют шаблону target = source или target: source, но для деструктуризации действителен шаблон source: target (значение: переменная).

Рассмотрим пример:

Если имя сопоставляемого свойства совпадает с именем переменной, вы можете использовать сокращение, например:

Возможности деструктуризации:

1) работает с любым итерируемым (перебираемым) объектом с правой стороны присваивания;

[свернуть]
2) работает с любым объектом с левой стороны.

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

[свернуть]

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

Обзорные примеры

[свернуть]
Использование деструктуризации объекта при инициализации переменных или констант

Пусть имеется некоторый объект user:

Для получения значений свойств объекта, например, с ключами firstName и lastName без использования деструктуризации  можно записать следующий код:

Тоже самое можно сделать, упростив код с помощью деструктуризации. Деструктурируем объект user и получим значения свойств firstName, lastName и age:

где firstName, lastName, age - ключи соответствующих свойств деструктурируемого объекта user.

В приведенном выше примере мы использовали синтаксис деструктуризации для инициализации трех переменных (firstName, lastName и age) с присвоением значений из соответствующих свойств в объекте user.

[свернуть]
Синтаксис деструктуризации при инициализации цикла

[свернуть]
Замена значений переменных с помощью деструктуризации

Синтаксис деструктуризации может использоваться как при присвоении (назначении) переменных, так и при изменении их значений:

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

В выражении деструктуризации мы использовали пару закрывающих скобок ( ... ) , их отсутствие приведет к ошибке (блоки не могут находиться в левой стороне присвоения, так как JavaScript обрабатывает блок  { ... } в основном потоке кода (не внутри другого выражения) как блок кода, например, для группировки операторов, а у нас - деструктуризация).

[свернуть]

Использование при деструктуризации дефолтных значений (значений по умолчанию)

Пытаясь в выражении деструктуризации назначить переменную, соответствующую несуществующему в объекте ключу, мы получим значение undefined

Для устранения этого положения переменной age необходимо передать значение по умолчанию (пример для объекта выше):

[свернуть]

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

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

{  [object_key]  :  [variable_name]  } 

или {  [object_key]  :  [variable_name]  =  [default_value]  }

В приведенном выше примере созданы три переменных name, lastName, years, которые соответственно привязаны к ключам firstName, lastName, age свойств объекта user. Переменной years передано значение по умолчанию (40).

[свернуть]

Деструктуризация вложенного объекта

Используя деструктуризацию, мы можем получить доступ и к вложенным структурам объекта. Например:

Пустой вложенный литерал объекта в указанном выше примере при деструктуризации не делает никаких назначений (хотя ошибки тоже не выдаст).

Ещё пример:

 

[свернуть]

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

[свернуть]

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

Для синтаксиса деструктуризации массивов действителен шаблон:

[  значение[ i ]  :  именование ]  =  [ значение[ i ]  ]

При деструктуризации массивов с левой стороны выражения назначения используется литерал массива, а значения переменных (элементов) в этом литерале массива соответствуют значениям элементов с таким же индексом в деструктурируемом массиве:

Или

Ещё пример:

Особенности деструктуризации массивов:

  1. Если количество элементов в деструктурируемом массиве больше, чем количество переменных, инициализируемых в литерале нового массива, то лишние элементы деструктурируемого массива не учитываются.
  2. Если количество переменных, инициализируемых в литерале нового массива, превышает количество элементов в деструктурируемом массиве, то каждая лишняя переменная будет иметь значение undefined, кроме тех которым назначено значение по умолчанию.
  3. Возможно пропустить ненужные элементы массива и назначить переменным только те, которые необходимы.

Обмен переменными при деструктуризации массивов

Ещё пример отсюда

Представьте, что вы делаете приложение манипуляций с фото и хотите менять размеры  height и width при изменении вида с landscape на portrait. 

Старый способ

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

[свернуть]

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

[свернуть]

Деструктуризация вложенного массива

Для массивов доступна деструктуризация вложенных массивов. Деструктурируемый элемент должен быть массивом:

Ещё пример:

[свернуть]

Использование операторов rest и spread ( ... )

Читай также Операторы rest и spread ( … ) в JavaScript

Оператор  (rest или spread) используется по-разному, в зависимости от контекста применения:

  • rest (остаток) - для соединения отдельных значений (элементов) в массив (объект) ( rest оператор всегда возвращает массив, а не псевдомассив);
  • spread (распространение) - для разделения коллекций значений на отдельные элементы.

rest оператор в деструктурирующем приравнивании может располагаться только в конце выражения (перед закрывающей квадратной скобкой).

Оператор rest применяется, например, при назначении некоторых значений элементов массива переменным с одновременной передачей оставшихся элементов в массив:

Клонирование массивов
[свернуть]

Получение клона массива с использованием оператора spread

Клонирование массива с добавлением (изменением) элементов:

[/spoiler]

Смешанная деструктуризация объектов

При работе со сложным объектом (массивом) для получения различных частей этой структуры можно использовать комбинации деструктуризации объектов и массивов. Например:

Ещё пример:

Деструктуризация при работе с аргументами функции

Пример:

Ещё примеры

отсюда

Ещё пример:

[свернуть]
Еще пример

Отсюда

Создадим функцию quote(subject, config), обертывающую строку в кавычки, где

  • subject - первый аргумент как строка, которую нужно обернуть;
  • config   - второй аргумент, объект со следующими свойствами:
    1. char — символ цитаты, например, ' (одинарная кавычка) или " (двойная кавычка); по умолчанию — ";
    2. skipIfQuoted — логическое значение для пропуска цитирования, если строка уже цитируется; по умолчанию — true.

Применяя преимущества деструктурирования объекта, давайте реализуем quote():

Код const { char = '"', skipIfQuoted = true } = config в одной строкe извлекает свойства char и skipIfQuoted из объекта config. Если некоторые свойства недоступны в объекте config, деструктурирование задает значения по умолчанию: '"' для char и false для skipIfQuoted.

Функцию можно улучшить, переместив деструктурирование прямо в раздел параметров, и установив значение по умолчанию (пустой объект { }) для параметра config, чтобы пропустить второй аргумент, когда будет достаточно значений по умолчанию.

Обратите внимание, что деструктурирующее присваивание заменяет параметр config в сигнатуре функции. Это позволяет сделать параметр quote() на одну строку короче. Параметр = {} в правой части деструктурирующего присваивания гарантирует, что используется пустой объект, если второй аргумент не указан вообще (например, quote('Sunny day')).

[свернуть]

Оператор rest можно использовать при работе с аргументами внутри функции:

Последовательное присваивание при деструктуризации

Возвращаемое значение любого деструктурирующего выражения - это исходный объект (массив). Посмотрим, что это значит на практике:

Благодаря переносу содержимого (значения) деструктурируемого объекта из выражения в выражение, вы можете создавать последовательности деструктурирующих выражений:

Выражения [a, b] = [c] = [1, 2, 3] и ( {x} = {y,z} = {x: 4, y: 5, z: 6} ) вычисляются справа налево (т.е. возвращаемое значение [c] = [1, 2, 3] присваивается [a, b],  а возвращаемое значение {y, z} = {x: 4, y: 5, z: 6} присваивается {x}.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.