Используйте деструктурирование объектов JavaScript для сохранения строк кода
Введение в назначение деструктуризации объектов JavaScript
Предположим, у вас есть объект person с двумя свойствами firstName и lastName.
let person = { firstName: 'Jack', lastName: 'Sparrok' };
До ES6, когда вы хотите присвоить свойства объекта person
переменным, вы обычно делаете это следующим образом:
let firstName = person.firstName; let lastName = person.lastName;
Но ES6 вводит синтаксис деструктуризации объекта, который предоставляет альтернативный способ присвоения свойств объекта переменным:
let { firstName: fname, lastName: lname } = person;
Здесь свойства firstName и lastName назначаются переменным fname и lname.
Синтаксис гласит: идентификатор перед двоеточием (:
) является свойством объекта, а идентификатор после двоеточия является переменной.
Примеры деструктуризации объектов JavaScript{}
- Разрушение нулевого объекта
Используйте оператор OR
(||
), чтобы откатить объект null
к пустому объекту, иначе он выдаст ошибку.
function getPerson() { return null; } let { firstName, lastName } = getPerson() || {};// OR Operator
2. Деструктуризация вложенных объектов
const employeeObject = { id: 1001, name: { firstName: 'Jack', lastName: 'Sparrow' } }; let { name: { firstName, lastName }, name } = employee; console.log(fistName);// Jack console.log(lastName);// Sparrow console.log(name);// {firstName: Jack, lastName: Sparrow}
3. Аргумент деструктурирующей функции
const person = { firstName: 'Jack', lastName: 'Sparrow' }; const display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`); display(person);
Примечание. При деструктуризации объекта свойства объекта по умолчанию назначаются переменным с одинаковыми именами.