Урок 06

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

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

Массивы

const [a, b, c] = [1, 2, 3];
// a = 1, b = 2, c = 3

Пропуск:

const [, second, , fourth] = [1, 2, 3, 4];
// second = 2, fourth = 4

Rest:

const [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]

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

const [a = 10, b = 20] = [1];
// a = 1, b = 20

Объекты

const { name, age } = { name: 'Алиса', age: 25 };

Переименование:

const { name: userName, age: userAge } = user;

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

const { name = 'Гость', age = 0 } = user;

Переименование + дефолт:

const { name: userName = 'Гость' } = user;

Rest:

const { name, ...rest } = user;
// rest = всё кроме name

Вложенная

const user = {
    name: 'Алиса',
    address: {
        city: 'Москва',
        zip: '101000',
    },
};

const { address: { city, zip } } = user;

С дефолтами:

const { address: { city = 'Неизвестно' } = {} } = user;

В параметрах функций

function print({ name, age }) {
    console.log(name, age);
}

print({ name: 'Алиса', age: 25 });

С дефолтами:

function print({ name = 'Гость', age = 0 } = {}) {
    console.log(name, age);
}

print();      // Гость 0
print({});    // Гость 0

Массив в параметрах:

function printCoords([x, y]) {
    console.log(x, y);
}

В циклах

for (const [key, value] of Object.entries(user)) {
    console.log(key, value);
}

for (const [index, item] of items.entries()) {
    console.log(index, item);
}

Обмен переменных

let a = 1, b = 2;
[a, b] = [b, a];

Возврат из функции

function minMax(arr) {
    return [Math.min(...arr), Math.max(...arr)];
}

const [min, max] = minMax([1, 2, 3]);
function getUser() {
    return { name: 'Алиса', age: 25 };
}

const { name } = getUser();

Вложенные массивы в объектах

const data = {
    users: [
        { name: 'Алиса', age: 25 },
        { name: 'Боб', age: 30 },
    ],
};

const { users: [firstUser, secondUser] } = data;
// firstUser = { name: 'Алиса', age: 25 }

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

Нужны скобки:

let name, age;
({ name, age } = user);

Без скобок — синтаксическая ошибка.

Глубокие дефолты

const config = {};
const {
    server: { host = 'localhost', port = 3000 } = {},
} = config;

Пропуск в объектах

Нельзя пропустить, как в массивах. Только переименовать:

const { name: _, ...rest } = user;

Итоги

  • Массивы: [a, b], пропуск, rest
  • Объекты: { a, b }, переименование, дефолт
  • Вложенная работает
  • В параметрах функций удобно
  • Обмен переменных одной строкой
  • Скобки при деструктуризации без объявления