Используйте деструктурирование объектов 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{}

  1. Разрушение нулевого объекта

Используйте оператор 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);

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