0Pricing
JavaScript Academy · Урок

Клонирование и объединение — spread и Object.assign

Клонируйте и объединяйте объекты и массивы с помощью spread и Object.assign; разберитесь в поверхностном копировании и порядке перезаписи

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

Введение

Цель: безопасно клонировать и объединять объекты и массивы.

  • Оператор ... для клонирования и объединения
  • Object.assign
  • Порядок перезаписи
  • Особенность поверхностной копии
Клонирование и объединение — spread и Object.assign — иллюстрация 1

Оператор ...: клонирование объекта

Используйте {...obj} для поверхностного клонирования. Изменение клона не меняет поля верхнего уровня в исходном объекте.

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
Клонирование и объединение — spread и Object.assign — иллюстрация 2

Object.assign: клонирование

Object.assign({}, obj) также создаёт поверхностный клон. Чтобы не изменять источник, присваивайте свойства пустому объекту.

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
Клонирование и объединение — spread и Object.assign — иллюстрация 3

Объединение: порядок важен

Объединение зависит от порядка: более поздние источники перезаписывают более ранние ключи (b здесь становится равным 9).

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Клонирование и объединение — spread и Object.assign — иллюстрация 4

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

[...arr] клонирует массив. Объединяйте массивы с помощью [...a, ...b], не изменяя исходные данные.

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Клонирование и объединение — spread и Object.assign — иллюстрация 5

Поверхностная и глубокая копии

Поверхностная копия: вложенные объекты и массивы являются общими. Для глубоко вложенных структур явно копируйте внутренние уровни.

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
Клонирование и объединение — spread и Object.assign — иллюстрация 6

Проверка способа клонирования

Быстрая проверка: поверхностное клонирование без изменения исходных данных.

Клонирование и объединение — spread и Object.assign — иллюстрация 7

Повторение

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

Клонирование и объединение — spread и Object.assign — иллюстрация 8

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

Урок «Клонирование и объединение — spread и Object.assign» бесплатный?

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

Чему я научусь в уроке «Клонирование и объединение — spread и Object.assign»?

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

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

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

Сколько времени занимает урок «Клонирование и объединение — spread и Object.assign»?

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

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

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

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

  1. Операции CRUD с массивами и итерация; основы объектов и доступ к ним
  2. Клонирование и объединение — spread и Object.assign
← Назад к JavaScript Academy