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

В этом руководстве вы узнаете о деструктуризации объектов 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.