Деструктуризация в JavaScript (ES6)

Mar 11, 2018

Деструктуризация - упрощает извлечение данных из массивов или объектов.

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

let animal = ['cat', 'dog', 'monkey'];

Извлечем данные из массива animal при помощи деструктуризации:

let c, d, m;
[c, d, m] = animal;
console.log(c, d, m); // cat dog monkey
// Таким образом переменные получили соотв-е значения из массива

Сокращенная запись:

let [c, d, m] = animal;
console.log(c, d, m); // cat dog monkey

Игнорируем переменную при деструктуризации

Например, опустим переменную d:

let [c, , m] = animal;
console.log(c,  m); // cat monkey

Деструктуризация и оставшиеся параметры

let [c, ...rest] = animal;
console.log(rest); // [ "dog", "monkey" ]

Деструктуризация массивов и значения по умолчанию

let animalPro = ['cat', 'dog'];
let [c, d, m = 'Kong'] = animalPro;
console.log(c, d, m); // cat dog Kong

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

Для того чтобы получить значения из вложенного массива мы используем []:

let animalInnerArr = ['cat', 'dog', ['bird', 'wolf']];
let [c1, d1, [m1, m2]] = animalInnerArr;
console.log(c1, d1, m1, m2); // cat dog bird wolf

Деструктуризация массивов и параметры функции

Для того чтобы получить значения из массива, который мы передадим в функцию как параметр, применим деструктуризацию:

function sum([a, b]) {
    console.log(a, b); // 12 13
}

sum([12,13]);

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

function getData() {
    return [1,2,3];
}

let [a, b, c] = getData();
console.log(a, b, c); // 1 2 3

Меняем значения у переменных при помощи деструктуризации

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

let ko = 'ko',
so = 'so';

[ko, so] = [so, ko];
console.log(ko, so); // so ko

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

let animal = {
    cat: 'Bars',
    dog: 'Ashot'
}

let { cat, dog } =  animal;
console.log(cat, dog); // Bars Ashot

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

Меняем имя на не совпадающее с именем свойства объекта

let { cat: c, dog: d } =  animal;
console.log(c, d); // Bars Ashot

Значения по умолчанию

let animalShort = {
    cat: 'Bars',
}
let { cat = 'Batman', dog = 'Ashot Junior' } =  animalShort;
console.log(cat, dog); // Bars Ashot Junior

Извлекаем значения свойств вложенных объектов

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

let animalLong = {
    cat: 'Bars',
    dog: 'Ashot',
    subAnimal: {
        bug: 'Moly'
    }
}

let { cat = 'Batman', dog = 'Ashot Junior', subAnimal: { bug } } =  animalLong;
console.log(cat, dog, bug);  // Bars Ashot Moly

Деструктуризация объектов и параметры функции

function getData(word, { name, family }) {
    console.log(`${word}, ${name} ${family}`); // Hello, John Doe
}

let data = getData('Hello', { name: 'John', family: 'Doe' });

и вложенные объекты

function getData(word, { data: { name, family } }) {
    // параметр data мы используем, чтобы получить доступ к name, family
    console.log(`${word}, ${name} ${family}`); // Hello, John Doe
}
let user = { name: 'John', family: 'Doe' };
let data = getData('Hello', { data: user });

и возврат значения из функции

function getDataSecond() {
    return {
        cat: 'Bars',
        dog: 'Ashot',
        subAnimal: {
            bug: 'Moly'
        }
    }
}
let { cat, dog, subAnimal: { bug }} = getDataSecond();
console.log(cat, dog, bug); // Bars Ashot Moly

Деструктуризация объекта: создаем новый объект (иммутабельный)

let criteria = {
    op: 12,
    as: 13
};
let user = "John",
    ticket = "Boston science",
    test = { ...criteria, user, ticket };
console.log('test: ', test); 
// {op: 12, as: 13, user: "John", ticket: "Boston science"}
Добавить комментарий