В этом руководстве вы узнаете о деструктуризации объектов JavaScript, которая присваивает свойства объекта отдельным переменным.
Предположим, у вас есть объект person
с двумя свойствами: firstName
и lastName:
let person = { firstName: 'John', lastName: 'Doe' };
До ES6, когда вы хотели присвоить свойства объекта person
переменным, вы обычно делали это следующим образом:
let firstName = person.firstName; let lastName = person.lastName;
ES6 вводит синтаксис деструктуризации объекта, который предоставляет альтернативный способ присвоения свойств объекта переменным:
let { firstName: fname, lastName: lname } = person;
В этом примере свойства firstName
и lastName
назначаются переменным fName
и lName
соответственно.
Синтаксис:
let { property1: variable1, property2: variable2 } = object;
Идентификатор перед двоеточием( :
) является свойством объекта, а идентификатор после двоеточия является переменной.
Обратите внимание, что имя свойства всегда находится слева, будь то литерал объекта или синтаксис деструктурирования объекта.
Если переменные имеют те же имена, что и свойства объекта, вы можете сделать код более кратким следующим образом:
let { firstName, lastName } = person; console.log(firstName); // 'John' console.log(lastName); // 'Doe'
В этом примере мы объявили две переменные firstName
и lastName
и присвоили свойства объекта person переменным в том же операторе.
Можно разделить декларацию и присваивание. Однако вы должны заключать переменные в круглые скобки:
({firstName, lastName} = person);
Если вы не используете круглые скобки, механизм JavaScript интерпретирует левую часть как блок и выдает синтаксическую ошибку.
Когда вы присваиваете несуществующее свойство переменной с помощью деструктуризации объекта, переменной присваивается значение undefined
. Например:
let { firstName, lastName, middleName } = person; console.log(middleName); // undefined
В этом примере свойство middleName
не существует в объекте person
, поэтому переменная middleName
не undefined
.
Установка значений по умолчанию
Вы можете присвоить переменной значение по умолчанию, когда свойство объекта не существует. Например:
let person = { firstName: 'John', lastName: 'Doe', currentAge: 28 }; let { firstName, lastName, middleName = '', currentAge: age = 18 } = person; console.log(middleName); // '' console.log(age); // 28
В этом примере мы назначаем пустую строку переменной middleName
когда объект person не имеет свойства middleName
.
Кроме того, мы назначаем свойство currentAge
переменной age
со значением по умолчанию 18.
Однако если у объекта person есть свойство middleName
, присваивание работает как обычно:
let person = { firstName: 'John', lastName: 'Doe', middleName: 'C.', currentAge: 28 }; let { firstName, lastName, middleName = '', currentAge: age = 18 } = person; console.log(middleName); // 'C.' console.log(age); // 28
Деструктуризация объекта null
В некоторых ситуациях функция может возвращать объект или null. Например:
function getPerson() { return null; }
И вы используете назначение деструктуризации объекта:
let { firstName, lastName } = getPerson(); console.log(firstName, lastName);
Код TypeError
:
TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.
Чтобы избежать этого, вы можете использовать оператор OR
( ||
), чтобы заменить null
объект на пустой объект:
let { firstName, lastName } = getPerson() || {};
Теперь ошибки не будет. И firstName
и lastName
будут undefined
.
Деструктуризация вложенных объектов
Предполагая, что у вас есть объект employee
, который имеет объект name
в качестве свойства:
let employee = { id: 1001, name: { firstName: 'John', lastName: 'Doe' } };
Следующий оператор деструктурирует свойства вложенного объекта name
в отдельные переменные:
let { name: { firstName, lastName } } = employee; console.log(firstName); // John console.log(lastName); // Doe
Можно выполнить многократное присвоение свойства нескольким переменным:
let employee = { id: 1001, name: { firstName: 'John', lastName: 'Doe' } }; let { name: { firstName, lastName }, name } = employee; console.log(firstName); // John console.log(lastName); // Doe console.log(name); // { firstName: 'John', lastName: 'Doe' }
Аргументы
Предположим, у вас есть функция, которая отображает объект человека:
let display = (person) = > console.log(`$ { person.firstName } $ { person.lastName }`); let person = { firstName: 'John', lastName: 'Doe' }; display(person);
Аргумент объекта, переданный в функцию, можно деструктурировать следующим образом:
let display = ({ firstName, lastName }) = > console.log(`$ { firstName } $ { lastName }`); let person = { firstName: 'John', lastName: 'Doe' }; display(person);
Это выглядит менее подробным, особенно когда вы используете много свойств объекта-аргумента. Этот метод часто используется в React.