Основы деструктуризации массивов и объектов
Деструктуризация массивов и объектов: основы, пропуск элементов, значения по умолчанию, переименование и простой приём обмена значениями
«Основы деструктуризации массивов и объектов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 2. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 2 уроков всего.
Введение
Цель: аккуратно извлекать значения из массивов и объектов.
- Деструктуризация массива
- Пропуск элементов и значения по умолчанию
- Деструктуризация объекта
- Переименование и обмен значениями
Основы массивов
Шаблоны массивов сопоставляются с позициями. Первый элемент попадает в первую переменную, второй — во вторую и так далее.
// Array destructuring: assign by position
const pair = [10, 20];
const [x, y] = pair;
console.log("x:", x);
console.log("y:", y);
Пропуск элементов и значения по умолчанию
Используйте запятые, чтобы пропускать позиции. Добавляйте = default для неопределённых или отсутствующих элементов.
// Skip items with commas and provide defaults
const triple = [5, undefined, 9];
// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;
console.log("first:", first);
console.log("third with default:", third);
Приём с обменом значений
Однострочный обмен значениями позволяет обойтись без временной переменной.
// Swap values with destructuring
let a = "left";
let b = "right";
[a, b] = [b, a];
console.log("a:", a);
console.log("b:", b);
Основы объектов и переименование
Объекты сопоставляются по key. Переименовывайте свойства с помощью key: localName и при необходимости добавляйте = default.
// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };
// Basic
const { name, active } = user;
// Renaming and default
const { level: userLevel = 0 } = user;
console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);
Вложенные поля (кратко)
Вложенные поля можно прочитать за один шаг. Для удобства чтения на мобильном экране делайте шаблоны небольшими.
// Nested destructuring (keep it simple)
const config = {
theme: { primary: "blue", contrast: "white" },
flags: { compact: true }
};
const { theme: { primary }, flags: { compact } } = config;
console.log("primary:", primary);
console.log("compact:", compact);
Проверка синтаксиса обмена
Быстрая проверка: обмен значениями с помощью деструктуризации.
Повторение
Повторение: массивы деструктурируются по позиции, а объекты — по ключу. Вы пропускали элементы, использовали значения по умолчанию, переименовывали ключи и обменивали значения в одной строке.
Часто задаваемые вопросы
Урок «Основы деструктуризации массивов и объектов» бесплатный?
Да — полный текст урока «Основы деструктуризации массивов и объектов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 2 уроков всего.
Чему я научусь в уроке «Основы деструктуризации массивов и объектов»?
Деструктуризация массивов и объектов: основы, пропуск элементов, значения по умолчанию, переименование и простой приём обмена значениями Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 2.
Сколько времени занимает урок «Основы деструктуризации массивов и объектов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы деструктуризации массивов и объектов
- Rest и spread — идиоматичные массивы и объекты