Rest и spread — идиоматичные массивы и объекты
Собирайте остальные значения и свойства, клонируйте и объединяйте данные с помощью spread и избегайте скрытых мутаций с помощью простых приёмов
«Rest и spread — идиоматичные массивы и объекты» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 2. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 2 уроков всего.
Введение
Цель: использовать rest для сбора дополнительных элементов и оператор ... для копирования или объединения.
- Оператор ... для массивов и объектов
- rest массива (начало и хвост)
- rest объекта (исключение некоторых ключей)
- Изменение и копирование
Основы оператора ... для массивов
[...arr] копирует массив; объединяйте массивы, распределяя их элементы в новом массиве.
// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];
const clone = [...a];
const merged = [...a, ...b];
console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
Шаблон rest массива
Элемент rest (…tail) собирает оставшиеся элементы в новый массив.
// Array rest collects the remaining items
const nums = [10, 20, 30, 40];
const [head, ...tail] = nums;
console.log("head:", head);
console.log("tail:", tail);
Основы оператора ... для объектов
Объединение объектов зависит от порядка: более поздние операторы ... перезаписывают более ранние ключи.
// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };
const copy = { ...base };
const merged = { ...base, ...override };
console.log("copy:", copy);
console.log("merged:", merged);
Шаблон rest объекта
Используйте { a, ...rest }, чтобы получить несколько свойств, а остальные сохранить вместе.
// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };
const { id, ...publicInfo } = user;
console.log("id:", id);
console.log("publicInfo:", publicInfo);
Как избежать изменения данных с помощью копии
Создавайте новый объект при изменении значений; это понятнее и безопаснее, чем изменение общих данных.
// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };
// Mutating version (avoid in shared state)
// settings.volume = 6;
// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };
console.log("settings:", settings);
console.log("updated:", updated);
Проверка rest объекта
Быстрая проверка: rest объекта.
Повторение
Повторение: оператор ... копирует и объединяет массивы и объекты, а rest собирает оставшиеся элементы. Предпочитайте копирование изменению данных, чтобы изменения оставались явными.
Часто задаваемые вопросы
Урок «Rest и spread — идиоматичные массивы и объекты» бесплатный?
Да — полный текст урока «Rest и spread — идиоматичные массивы и объекты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 2 уроков всего.
Чему я научусь в уроке «Rest и spread — идиоматичные массивы и объекты»?
Собирайте остальные значения и свойства, клонируйте и объединяйте данные с помощью spread и избегайте скрытых мутаций с помощью простых приёмов Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 2.
Сколько времени занимает урок «Rest и spread — идиоматичные массивы и объекты»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы деструктуризации массивов и объектов
- Rest и spread — идиоматичные массивы и объекты