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

До выхода ECMAScript 6 (ES6) деструктуризация объектов в JS (JavaScript) была намного сложнее. В настоящее время возможность деструктурировать объект одной строкой кода открывает множество возможностей.

Базовая стилистика

Основная стилистика деструктуризации выглядит следующим образом. Например:

// До выхода ES6
var ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
var john = ivoryKnightMembers[0], 
 rob = ivoryKnightMembers[1],
 George = ivoryKnightMembers[2], 
 Steve = ivoryKnightMembers[3];

// После выхода ES6
let ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
let [john, rob, george, steve] = ivoryKnightMembers;

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

Приведённый выше фрагмент кода является примером деструктуризации массива при присвоении переменной. Поскольку объекты JS хранят свои атрибуты в виде ассоциативных массивов, мы также можем поместить объектный литерал в левую часть выражения присваивания.

const band = {
 drummer: 'George',
 bassist: 'Steve',
 guitarist: 'Rob',
 vocalist: 'John'
};

// Деструктуризация
const { drummer, bassist, guitarist, vocalist } = band;

// Результат
console.log(drummer, bassist, guitarist, vocalist); 

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

Следующий фрагмент показывает, как используется деструктуризация объектов в JS для присвоения новых значений локальным переменным. Обратите внимание, что мы должны использовать пару скобок (()) в выражении присваивания. В противном случае литерал объекта будет определён как оператор block, который выдаст ошибку, поскольку он не будет доступен в левой части выражения присваивания.

// Инициализация локальных переменных
let drummer = 'George';
let bassist = 'Steve';
let guitarist = 'Rob';
let vocalist = 'John';

const band = {
 drummer: 'George',
 bassist: 'Steve',
 guitarist: 'Rob',
 vocalist: 'John'
};

// Переназначение имени и фамилии с помощью деструктуризации
// Заключаем в круглые скобки, поскольку это выражение присваивания
({ drummer, guitarist } = band);

// Результат "George, Steve, Rob, John"
console.log(drummer, bassist, guitarist, vocalist); 

Присвоение значений по умолчанию и деструктуризация в JS

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

const band = {
 drummer: 'George',
 bassist: 'Steve',
 guitarist: 'Rob',
 vocalist: 'John'
};

// Присвоение значение по умолчанию 'Allan' для keyboardist, если оно не определено
const { drummer, bassist, guitarist, keyboardist = 'Allan', vocalist } = band;

// Список участников группы с использованием литералов шаблона ES6
// Результат "Ivory Knight are George, Steve, Rob, Allan, and John"
console.log(`Ivory Knight are ${drummer}, ${bassist}, ${guitarist}, ${keyboardist}, and ${vocalist}.`);

Деструктуризация объектов в JS: изменение названия переменных

В процессе деструктуризации объектов разработчики не ограничены переменными, которые могут иметь то же имя, что и соответствующий им ключ объекта. Программисты могут присваивать другим переменным имена, используя синтаксис [object_key]:[variable_name]. Если требуется установить некоторые значения по умолчанию, можно присвоить их следующим способом [object_key]:[variable_name] = [default_value].

const band = {
 drummer: 'George',
 bassist: 'Steve',
 guitarist: 'Rob',
 vocalist: 'John'
};

// Присвоение значения 'Allan' по умолчанию, если оно не определено
const { drums: drummer, bass: bassist = 'New guy', guitars: guitarist, keyboards = 'Allan', vocals: vocalist } = band;

// Список членов группы посредством литералов шаблонов (ES6)
// Результат "Ivory Knight are George, New guy, Rob, Allan, and John"
console.log(`Ivory Knight are ${drums}, ${bass}, ${guitars}, ${keyboards}, and ${vocals}.`);

Читайте также: Как определить заглавные буквы на JavaScript.

Вне всякого сомнения, такой подход существенно упрощает написание кода.

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

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

const band = {
 drummer: 'George',
 bassist: 'Steve',
 guitarist: 'Rob',
 vocalist: 'John',
 backupVocals: {
 lowBackups: 'Steve',
 highBackups: 'Rob'
 }
};

// Присвоение значений локальным переменным
const { drummer, bassist, guitarist, vocalist, backupVocals: {lowBackups, midBackups = 'N/A', highBackups} } = band;

// Результат "Backup vocals performed by Steve, N/A, Rob."
console.log(`Backup vocals performed by ${lowBackups}, ${midBackups}, ${highBackups}.`);

Заключение

Безусловно, подробнее о деструктуризации объектов в JavaScript можно узнать в официальной документации MDN.