Назначение деструктурирования Javascript

Хотя деструктурирование присваивания является новой концепцией в мире Javascript, это проверенный метод во многих других языках программирования, просто под разными именами. Например:

Ruby: параллельное назначение
PHP: листинг
Python: распаковка

Здесь я расскажу только о нескольких основных случаях задания по деструктурированию, но для получения дополнительной информации по этой конкретной теме ознакомьтесь с главой 10 изучения JS и этой великолепной презентацией.

Пример 1, обычная деструктуризация старого объекта:

Учитывая пользовательский объект:

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m'
};

Типичный способ доступа и использования свойств этого объекта:

const name = user.name;
const age = user.age;
const shirtSize = user.shirtSize;

Это хорошо и все, но кажется мне немного многословным и уродливым. Давайте попробуем деструктурировать этот объект способом ES6!

const {
    name,
    age,
    shirtSize
} = user;

И вот, у нас теперь есть 3 переменные, доступные в этой области user, age, and shirtSize, все они получены из пользовательского объекта.

Пример 2, переименование:

Итак, используя тот же объект, что и в предыдущем примере,

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m'
};

Допустим, мы хотим использовать эти переменные, но с более описательным именем:

const {
    name: userName,
    age: theAge,
    shirtSize: size
} = user;

И точно так же у нас есть 3 переменные в нашей области видимости userName, theAge, and size. Чтобы было ясно, теперь мы можем использовать эти переменные как обычные объявления:

if (theAge < 30 && size === 's/m') {
    console.log("I am hit.");
}

Пример 3, доступ к вложенным свойствам:

Допустим, наш пример объекта становится немного сложнее,

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m',
    state: {
        isLoggedIn: true,
        profile: {
            theme: 'dark',
            textSize: '10px'
        }
    }
};

но мы подсели на деструктурирование объектов и хотим продолжать его использовать. Мы можем это сделать!

const {
    name,
    age: userAge,
    size: shirtSize,
    state: {
        profile: {
            theme: userTheme,
            textSize
        }
    }
} = user;
console.log(userTheme) // prints 'dark'
console.log(textSize) // prints '10px'

Приведенный выше оператор создает 5 новых переменных name, userAge, userTheme, and textSize. Довольно аккуратно, да? Как насчет нулевой/неопределенной безопасности?

Пример 4, использование значений по умолчанию при деструктуризации:

Так что, если мы не уверены, что объект профиля пользователя из нашего примера будет чистым? Нравится:

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m',
    state: {
        isLoggedIn: true,
        profile: undefined
    }
};

Мы можем просто сделать это, чтобы защитить нас без ошибок:

const {
    name,
    age: userAge,
    size: shirtSize,
    state: {
        profile: {
            theme: userTheme,
            textSize
        } = {} // psst the magic is happening here
    }
} = user;
console.log(userTheme); //undefined
console.log(textSize); //undefined

Обозначение параметра по умолчанию можно использовать на любом этапе деструктуризации:

const {
    name,
    age: userAge,
    size: shirtSize,
    state: {
        profile: {
            theme: userTheme = 'Mikey',
            textSize = '15px'
        } = {}
    }
} = user;
console.log(userTheme); //'Mikey'
console.log(textSize); //'15px'

Где еще мы можем использовать это обозначение?

Пример 5, параметры функции деструктурирования:

Синтаксис деструктурирования удобен и все такое, но можете ли вы использовать его где-нибудь еще? Конечно! Вы можете использовать синтаксис деструктурирования практически везде, где вы объявляете переменные. Здесь вы можете увидеть, как он используется в функции с параметром объекта:

const user = {
    name: 'Pauly-D',
    age: 25
};
const validateUser = ({ name, age: userAge, shirtSize = 's' }) => {
    console.log('name', name);
    console.log('userAge', userAge);
    console.log('shirtSize', shirtSize);
};
validateUser(user);
// logs
// name: 'Pauly-D'
// age: 25
// shirtSize: 's'

Назначение деструктурирования Javascript