Деструктуризация


Деструктуризация - это функция ES6, введенная для упрощения и очистки некоторых повторяющихся операций и назначений, выполняемых в JS.

С деструктуризацией мы можем получать данные из более глубокого рычага внутри массива / объекта с более кратким синтаксисом, даже давая этим «извлеченным» данным другое имя в той же операции.

В JavaScript мы можем добиться этого очень просто:

// Consider this object
const person = {
    head: {
        eyes: 'x',
        mouth: {
            teeth: 'x',
            tongue: 'x'
        }
    },
    body: {
        shoulders: 'x',
        chest: 'x',
        arms: 'x',
        hands: 'x',
        legs: 'x'
    }   
};

// If we want to get head, the old way:
let head = person.head;

// ES6 Destructuring
let { head } = person;

// We can give other name as if a variable was declared, in the same line
let { head : myHead } = person;

// So we can do...
console.log(myHead);            // prints '{ eyes, mouth: { ... } }'

С массивами:

let numbers = ['2', '3', '7'];

// Old way
let two = numbers[0];
let three = numbers[1];

// ES6 Destructuring
let [two, three] = numbers;

// We can give them other names too
let [two: positionZero, three: positionOne] = numbers;

console.log(positionZero)       // prints '2'
console.log(positionOne)        // prints '3'

Мы можем сделать это и с параметрами функции:

// Old way
function getHeadAndBody(person) {

    let headAndBody = {
        head: person.head,
        body: person.body
    }

    return headAndBody;
}

// ES6 Destructuring
function getHeadAndBody({ head, body }) {
    return { head, body }
}

// With arrow functions
let getHeadAndBody = ({ head, body }) => { head, body };

Предупреждение: будьте осторожны с деструктуризацией, если вы не уверены, получит ли функция объект с этими параметрами, лучше использовать старый способ, чтобы не допустить ошибок. Вы можете избежать этого типа ошибок при использовании ES6 Destructuring, задавая функции параметры по умолчанию, поэтому вы можете быть уверены, что свойства будут существовать, не будучи обязанными полагаться на полученные параметры.head / body is undefined

// I'm not sure if head and body will be present in some cases...
// Now we are sure that head or body will be equal to '' if the real parameter doesn't have that properties inside
function getHeadAndBody({ head = '', body = '' }) {
    return { head, body }
}

Вы можете деструктурировать настолько глубоко, насколько захотите, всегда учитывая, существует ли это свойство.

// Deep destructuring
let computer = {
    processor: {
        transistor: {
            silicon: {
                thickness: '9nm'
            }
        }
    }
}

let {
    processor: 
        { 
            transistor: { 
                silicon: { 
                    thickness 
                }
            }
        } 
} = computer;

// Making it cleaner
let { thickness: inteli9Thickness } = computer.processor.transistor.silicon;

console.log(inteli9Thickness)          // prints '9nm'

Упражнение

Получите legsсвойство и получите данные внутри третьей позиции с numbersпомощью деструктуризации. Дайте ему имена myLegsи thirdPositionсоответственно.