Руслан Куянец | Reactify
5.86K subscribers
697 photos
52 videos
39 files
277 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Способы копирования объектов в JavaScript[2]

🔍 Глубокое копирование - это создание дубликата исходного объекта, при этом копируются не только сам объект и его примитивные свойства, но и все вложенные объекты, массивы, функции, и другие ссылочные типы данных. Это означает, что каждый элемент исходного объекта, включая все уровни вложенности, будет скопирован в новый, независимый объект. Таким образом, изменения в копии не повлияют на исходный объект и наоборот.

Допустим, у нас есть объект машины:

const car1 = {
brand: "Toyota",
model: "Camry",
owner: {
name: "Ruslan",
passport: "AB123456"
}
};


Если мы попробуем просто скопировать этот объект, то получим новую машину, НО владельцем будет все тот же Ruslan с паспортом AB123456. То есть, если мы решим поменять имя владельца car2, то имя владельца car1 также изменится, потому что оба объекта ссылаются на один и тот же объект владельца.

Один из способов сделать глубокую копию:

const stringObj = JSON.stringify(car1);
const car3 = JSON.parse(stringObj);


Логика такая, что мы объект сначала превратили в строку, разумеется тут не может идти речи о сохранении ссылок. Далее мы эту строку преобразуем обратно в объект. На выходе получаем глубокую копию исходного объекта.

Это подход работает в большинстве случаев, НО стоит знать, что он имеет свои ограничения. Например, он не сможет корректно скопировать функции и объекты, содержащие циклические ссылки, поскольку JSON не поддерживает эти структуры данных. Так же если объект содержит свойства со значением undefined, то они будут пропущены в строковом представлении.

#JavaScript #обучающийПост #Objects #clone #copy #deepCopy
👍72🤝1
Функция для глубокого копирования объектов

1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли obj и является ли он объектом.
Если obj равен null или его тип данных не 'object', функция возвращает obj, не производя дополнительных действий.
Здесь мы гарантируем, что функция будет применена только к объектам или массивам.

2️⃣ Обработка массивов
Устанавливаем, является ли obj массивом.
Создаем новый пустой массив arrCopy и проходим по всем элементам obj. Примитивные значения копируются напрямую, а для объектов вызывается функция deepClone рекурсивно.
Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.

3️⃣ Обработка объектов
Если obj не массив, но объект, начинаем процесс копирования объекта.
Создаем пустой объект objCopy. Для каждого свойства obj, проверяем, является ли оно собственным с помощью метода hasOwnProperty. Собственные свойства копируются. Если значение свойства - объект, функция deepClone вызывается рекурсивно.
Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.

#JavaScript #code #Objects #deepCopy
👍4