0Pricing
Frontend Academy · Урок

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

Извлекайте свойства объектов с помощью деструктуризации, клонируйте и объединяйте объекты оператором spread и используйте rest-параметры в сигнатурах функций.

«Деструктуризация и spread для объектов» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое деструктуризация

Деструктуризация извлекает значения из объектов и массивов в именованные переменные. Это сокращённая запись нескольких обращений к свойствам — она делает код лаконичным и ясно показывает, какие свойства используются.

Основы деструктуризации объектов

Используйте фигурные скобки слева от присваивания, чтобы извлечь именованные свойства.

const user = { name: 'Alice', age: 30, role: 'admin' };

// Without destructuring:
const name = user.name;
const age = user.age;

// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age);  // 30

Переименование переменных при деструктуризации

Используйте синтаксис property: newName, чтобы переименовать свойство во время деструктуризации. Это полезно, когда имя свойства совпадает с уже существующей переменной или недостаточно точно описывает значение.

const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'

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

Если свойство имеет значение undefined, используется значение по умолчанию. Переименование можно объединить с этим приёмом.

const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)

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

Деструктурируйте вложенные объекты, задавая вложенные шаблоны.

const order = {
  id: 42,
  customer: { name: 'Bob', email: 'bob@example.com' },
  total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'

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

Используйте квадратные скобки, чтобы деструктурировать массивы по позициям. Пропускайте элементы с помощью запятых.

const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first);  // 10
console.log(second); // 20
console.log(fourth); // 40

// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

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

Деструктурируйте значения непосредственно в параметрах функций, чтобы интерфейсы функций были понятнее, а код — самодокументируемым. Это очень распространённый приём в функциях компонентов React.

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' });          // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'

Оператор расширения для объектов

Оператор расширения { ...obj } создаёт неглубокую копию объекта и может объединять объекты. При совпадении ключей более поздние значения заменяют более ранние.

const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }

Оператор расширения для массивов

[...arr] создаёт неглубокую копию массива. Используйте spread для объединения массивов и добавления элементов в начало или конец без изменения исходного массива.

const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base];   // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]

Синтаксис остатка при деструктуризации

Синтаксис остатка собирает оставшиеся свойства или элементы в новый объект или массив. Остаток должен быть последним шаблоном.

const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }

const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

Неглубокая и глубокая копия

И оператор расширения, и деструктуризация создают неглубокие копии. Вложенные объекты и массивы по-прежнему остаются общими ссылками. Глубоко клонируйте данные с помощью structuredClone(obj) (современный способ) или JSON.parse(JSON.stringify(obj)) (устаревший способ).

const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99;           // a.x is still 1 (shallow copy OK)
b.nested.y = 99;    // a.nested.y is now 99! (reference shared)

Быстрая проверка

Что делает const { a, ...rest } = obj?

Повторение: деструктуризация и оператор расширения

Деструктуризация объектов извлекает именованные свойства. Деструктуризация массивов извлекает значения по позициям. Переименовывайте свойства с помощью двоеточия, задавайте значения по умолчанию с помощью =. Используйте вложенные шаблоны для глубоких объектов. Оператор расширения создаёт неглубокие копии и объединяет объекты или массивы. Синтаксис остатка собирает оставшиеся свойства или элементы.

Часто задаваемые вопросы

Урок «Деструктуризация и spread для объектов» бесплатный?

Да — полный текст урока «Деструктуризация и spread для объектов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Деструктуризация и spread для объектов»?

Извлекайте свойства объектов с помощью деструктуризации, клонируйте и объединяйте объекты оператором spread и используйте rest-параметры в сигнатурах функций. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Деструктуризация и spread для объектов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Методы массивов: map, filter, reduce, find
  2. Деструктуризация и spread для объектов
  3. Шаблонные строки и optional chaining
  4. Модули: import и export
← Назад к Frontend Academy