JavaScript - Nested Destructuring

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир вложенного разборки. Не волнуйтесь, если это звучит немного устрашающе - я обещаю, что к концу этого урока вы будете разбирать вложенные структуры, как профессионал!

Вложенная разборка

Прежде чем мы окунемся в深海, давайте быстро освежим в памяти, что такое разборка. Представьте, что у вас есть коробка (объект или массив) fullfull goodies, и вы хотите вытащить конкретные предметы. Разборка похожа на то, что вы достаете руку в эту коробку и сразу берете exactly то, что вам нужно. Классно, правда?

Теперь, вложенная разборка - это когда у нас есть коробки внутри коробок, и мы хотим вытащить предметы из этих inner коробок тоже. Это как русская матрешка данных!

Давайте начнем с простых примеров и постепенно усложним.

Вложенная разборка объекта

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

const player = {
name: "Mario",
game: "Super Mario Bros",
details: {
age: 35,
occupation: "Plumber"
}
};

const { name, details: { age } } = player;

console.log(name);  // Output: Mario
console.log(age);   // Output: 35

В этом примере мы достаем руку в объект player, берем name с верхнего уровня, и затем ныряем в объект details, чтобы взять age. Это как сказать: "Дай мне имя, и, кстати, достань возраст из details."

Давайте попробуем что-то посложнее:

const game = {
title: "Final Fantasy VII",
platform: "PlayStation",
characters: {
protagonist: {
name: "Cloud Strife",
weapon: "Buster Sword"
},
antagonist: {
name: "Sephiroth",
weapon: "Masamune"
}
}
};

const { title, characters: { protagonist: { name: heroName, weapon: heroWeapon } } } = game;

console.log(title);       // Output: Final Fantasy VII
console.log(heroName);    // Output: Cloud Strife
console.log(heroWeapon);  // Output: Buster Sword

Здесь мы ныряем на два уровня! Мы берем title с верхнего уровня, затем идем в characters, затем в protagonist, и наконец берем name и weapon. Мы также.rename их в heroName и heroWeapon для ясности.

Вложенная разборка массива

Массивы могут быть вложенными! Давайте посмотрим на пример:

const coordinates = [10, 20, [30, 40]];

const [x, y, [z, w]] = coordinates;

console.log(x);  // Output: 10
console.log(y);  // Output: 20
console.log(z);  // Output: 30
console.log(w);  // Output: 40

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

Давайте попробуем что-то более сложное:

const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

const [[a, b, c], [d, e, f], [g, h, i]] = matrix;

console.log(a, e, i);  // Output: 1 5 9

Здесь мы разрегистрировываем 3x3 матрицу. Каждая вложенная массив в разрегистрировании соответствует строке нашей матрицы.

Массив внутри объекта - Вложенная разборка

Теперь давайте немного все смешаем. Что, если у нас есть массив внутри объекта?

const student = {
name: "Alice",
age: 20,
grades: [85, 90, 92]
};

const { name, grades: [firstGrade, ...otherGrades] } = student;

console.log(name);         // Output: Alice
console.log(firstGrade);   // Output: 85
console.log(otherGrades);  // Output: [90, 92]

В этом примере мы берем name из объекта, и затем разрегистрировываем массив grades. Мы берем первый балл separately, и затем используем оператор rest (...), чтобы собрать оставшиеся баллы в новый массив.

Объект внутри массива - Вложенная разборка

Наконец, давайте посмотрим на разрегистрирование объекта внутри массива:

const team = [
{ name: "John", role: "Developer" },
{ name: "Jane", role: "Designer" },
{ name: "Jack", role: "Manager" }
];

const [{ name: firstName }, , { role }] = team;

console.log(firstName);  // Output: John
console.log(role);       // Output: Manager

Здесь мы разрегистрировываем первый и третий объекты в массиве. Мы берем name из первого объекта (и rename его в firstName), пропускаем второй объект полностью (обратите внимание на дополнительную запятую), и затем берем role из третьего объекта.

Методы таблицы

Вот таблица, резюмирующая методы, которые мы рассмотрели:

Метод	Описание	Пример
Разборка объекта	Извлекайте значения из объектов	const { name, age } = person;
Разборка массива	Извлекайте значения из массивов	const [x, y] = coordinates;
Вложенная разборка объекта	Извлекайте значения из вложенных объектов	const { details: { age } } = player;
Вложенная разборка массива	Извлекайте значения из вложенных массивов	const [x, [y, z]] = nestedArray;
Смешанная разборка	Combining object and array destructuring	const { grades: [firstGrade] } = student;
Переименование	Назначайте разрегистрированные значения другим именам переменных	const { name: firstName } = person;
Оператор rest	Соберите оставшиеся значения в массив	const [first, ...rest] = numbers;

И вот и все,folks! Вы только что повысили свои навыки JavaScript с помощью вложенной разборки. Помните, что практика делает мастера, поэтому не бойтесь экспериментировать с этими концепциями в собственном коде. Счастливого кодирования!

Credits: Image by storyset