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

04.02.2019


Деструктуризация (destructuring assignment) в JavaScript – это особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части. Иными словами: Это создание новых переменных, путем извлечения данных из объектов и массивов.

Деструктуризация помогает сократить код и сделать его более читаемым.

У нас имеется объект с данными пользователя:

const user = {
    login: 'ivanpetrov',
    firstName: 'Ivan',
    lastName: 'Petrov',
    age: 42,
    sex: 'Male',
}

Нам необходимо из этого объекта извлечь данные. Без деструктирования мы можем поступить так:

const login = user.login;
const firstName = user.firstName;
const lastName = user.lastName;
const age = user.age;
const sex = user.sex;

console.log(login); // ivanpetrov
console.log(firstName); // Ivan
console.log(lastName); // Petron
console.log(age); // 42
console.log(sex); // Male

А если мы применим деструктурирование, то наш код будет выглядеть так:

const { login, firstName, lastName, age, sex } = user;

console.log(login); // ivanpetrov
console.log(firstName); // Ivan
console.log(lastName); // Petron
console.log(age); // 42
console.log(sex); // Male

всего одна строка - просто и кратко. А теперь, тот же самый объект, но задача усложнилась:

// Без деструктурирования
const login = user.login;
const name = user.firstName;
const lastName = user.lastName;
const age = user.age;
const sex = user.sex;
const city = user.city || 'Moscow';


// Используем деструктурирование
const {  login, firstName: name, lastName, age, sex, city = 'Moscow' } = user;

console.log(login); // ivanpetrov
console.log(name); // Ivan
console.log(lastName); // Petron
console.log(age); // 42
console.log(sex); // Male
console.log(city); // Moscow

Деструктурирование можно применять для извлечения параметров объектов в функциях:

// Без деструктурирования
function fullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
    return firstName + ' ' + lastName;
}

console.log(fullName(user)); // Ivan Petron


// Используем деструктурирование с обычной функцией
function fullName({firstName, lastName}) {
    return firstName + ' ' + lastName;
}
console.log(fullName(user)); // Ivan Petron


// Используем деструктурирование со стрелочной функцией
const fullName = ({firstName, lastName}) => firstName + ' ' + lastName;

console.log(fullName(user)); // Ivan Petron

Число строк кода заметно сократилось: с пяти строк до трех при использовании обычной функции и до одной при использовании стрелочной.

А теперь массивы:

const myArray = ['One', 'Two', 'Three'];

// Без деструктурирования
const a = myArray[0];
const b = myArray[1];
const c = myArray[2];

// Используем деструктурирование
const [a, b, c] = myArray;

console.log(a) // One
console.log(b) // Two
console.log(c) // Three

И не забываем, что мы можем применить оператор Spread/rest

const myArray = ['One', 'Two', 'Three'];

// Используем деструктурирование
const [a, ...rest] = myArray;

console.log(a) // One
console.log(rest) // ["Two", "Three"]

Более того, мы можем использовать вложенную деструктуризацию:

'use strict';

let options = {
    title: 'Блок',
    size: {
        width: 100,
        height: 200
    },
    items: ['One', 'Two', 'Three']
}

const { title, size: {width, height}, items: [item1, item2]} = options;

console.log(title);  // Блок
console.log(width);  // 100
console.log(height); // 200
console.log(item1);  // One
console.log(item2);  // Two

Вложенная деструктуризация с оператором Spread/rest:

// мы немного изменили объект
let options = {
    title: 'Блок',
    size: {
        width: 100,
        height: 200,
        z: 300
    },
    items: ['One', 'Two', 'Three']
}

const { title, size: {width, height}, items: [item1, item2]} = options;
console.log(rest); // {}

const { title, size: {width, height, ...rest}, items: [item1, item2]} = options;
console.log(rest); // {z: 300} 

const { title, size: {width, height, ...rest}, items: [item1, item2]} = options;
console.log(rest); // ["Three"]

Пользуйтесь деструктуризацией - она удобна и полезна!