С помощью чего копируют объект в JavaScript

Вопрос

С помощью чего копируют объект в JavaScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает разницу между поверхностным и глубоким копированием, знает стандартные методы (spread, Object.assign) и альтернативы (библиотеки, ручное копирование). Важно упомянуть ограничения каждого подхода (например, JSON.stringify с функциями).

Ключевые тезисы

• Поверхностное копирование: Object.assign({}, obj) или spread оператор {...obj} — создают новый объект с копией свойств исходного, но вложенные объекты остаются ссылками.
• Глубокое копирование: JSON.parse(JSON.stringify(obj)) — создает полную копию, включая вложенные объекты, но не работает с функциями, Symbol и undefined.
• Библиотеки: Lodash (_.cloneDeep) или structuredClone (современный API) — обеспечивают надежное глубокое копирование с поддержкой сложных типов.
• Ручная реализация: Рекурсивное копирование свойств с проверкой типов — гибкий, но трудоемкий метод.

Подробный ответ

В JavaScript копирование объектов может быть поверхностным или глубоким. Поверхностное копирование создает новый объект, который копирует только верхний уровень свойств исходного объекта. Это можно сделать с помощью методов Object.assign({}, obj) или spread оператора {...obj}. Однако, если объект содержит вложенные объекты, они остаются ссылками, и изменения в них будут отражаться в обоих объектах. Глубокое копирование, напротив, создает полную копию объекта, включая все вложенные объекты. Один из простых способов глубокого копирования — использование JSON.parse(JSON.stringify(obj)), но этот метод не работает с функциями, Symbol и undefined. Для более надежного глубокого копирования можно использовать библиотеки, такие как Lodash (_.cloneDeep) или современный API structuredClone, который поддерживает сложные типы данных. Ручная реализация глубокого копирования может быть выполнена через рекурсивное копирование свойств с проверкой типов, что требует больше усилий, но предоставляет гибкость.

Практические примеры

Пример 1

Пример поверхностного копирования: const obj = { a: 1, b: { c: 2 } }; const shallowCopy = { ...obj }; shallowCopy.b.c = 3; console.log(obj.b.c); // Выведет 3, так как вложенный объект остался ссылкой.

Пример 2

Пример глубокого копирования с использованием JSON: const obj = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(obj)); deepCopy.b.c = 3; console.log(obj.b.c); // Выведет 2, так как создана полная копия объекта.

Пример 3

Пример использования structuredClone: const obj = { a: 1, b: { c: 2 } }; const deepCopy = structuredClone(obj); deepCopy.b.c = 3; console.log(obj.b.c); // Выведет 2, так как structuredClone создает глубокую копию.

Частые ошибки

• Типичная ошибка — использование поверхностного копирования, когда требуется глубокое, что приводит к неожиданным изменениям в исходном объекте.
• Использование JSON.parse(JSON.stringify(obj)) для объектов, содержащих функции или Symbol, что приводит к потере этих значений.

Связанные темы

• Работа с прототипами и наследованием в JavaScript.
• Использование иммутабельных структур данных для управления состоянием.

Follow-up вопросы

В чем разница между поверхностным и глубоким копированием?

Уровень: basic

Поверхностное копирование создает новый объект, но вложенные объекты остаются ссылками. Глубокое копирование рекурсивно копирует все вложенные объекты, создавая полностью независимую копию.

Какие ограничения у метода JSON.parse(JSON.stringify(obj)) для глубокого копирования?

Уровень: intermediate

Этот метод не копирует функции, Symbol, undefined и циклические ссылки. Также он может потерять информацию о прототипе и преобразовать Date в строку.

Когда стоит использовать structuredClone вместо других методов глубокого копирования?

Уровень: advanced

structuredClone стоит использовать, когда нужна поддержка сложных типов (включая Map, Set, Date) и циклических ссылок, а также когда важна производительность (он работает быстрее, чем JSON методы).

Как можно реализовать глубокое копирование вручную?

Уровень: intermediate

Нужно написать рекурсивную функцию, которая будет проверять тип каждого свойства и создавать новые объекты/массивы для вложенных структур. Для сложных типов (Date, Map и т.д.) нужна специальная обработка.

Почему spread оператор и Object.assign() не подходят для глубокого копирования?

Уровень: basic

Они копируют только свойства первого уровня, а вложенные объекты остаются ссылками на оригинал. Изменения во вложенных объектах будут видны и в копии, и в оригинале.