Глубокое копирование объектов, тема на которой может споткнуться и бывалый программист. Лучше основательно вникнуть в нюансы, чтобы избежать часы мучений в поисках ошибки.
Spread-оператор для копирования объектов JavaScript
Каждый JavaScript-программист знает, что копирование объектов происходит по ссылке, а не по значению.
Проблема легко решается с использование Spread-оператора. Вместо прямого копирования в строке «const ObjB = ObjA», достаточно написать «const ObjB = {...ObjA}» и проблема будет решена. Теперь объекты отделены друг от друга. Но что, если мы в свойство «country» захотим добавить свои свойства? Например, так:
Ой... а что случилось? Почему значения поменялись в обоих объектах? Мы же копировали с использование спред-оператора...
Догадывались о таком поведении или удивлены? Напишите в комментаряих!
Все верно. Оператор скопировал значения, но значением свойства «country» является объект. Соответственно, в обоих случаях свойство ссылается на один участок памяти. Нюансик, не правда ли?
Конечно же, можно занять мартышкиным трудом и начать разворачивать каждое свойство. Но лучше по другом.
Реклама
Мечтаете научиться программировать и зарабатывать хорошие деньги в разработке? Хватит мечтать, пора действовать. Записывайтесь на факультет «Fullstack JavaScript» от GeekBrains. Освойте с нуля язык программирования JavaScript, чтобы стать Fullstack-разработчиком. Вы научитесь создавать сайты, мобильные приложения и высоконагруженные сервисы.
Сейчас действует скидка, вы можете сэкономить 25% Тем более, обучение можно купить в рассрочку.
К сведению, зарплата Fullstack JavaScript легко достигает 250 000 руб., а устроиться можно удаленно из любой точки мира. GeekBrains еще и с трудоустройством помогает.
Хватит откладывать, переходите по ссылке и записывайтесь!
JSON Parse & Stringify
Мы можем воспользоваться простой хитростью. Сначала конвертировать объект в строку, после распарсить обратно. Таким образом, получим два абсполютно независимых объекта. Копирование объекта, в прямом смысле слова не происходило. Объект создан заново из строки. Выглядеть код будет таким образом:
Добились того, чего хотели. Но, в современном JavaScript, это решение не лучшее. Как минимум, не очень красиво выглядит, а значит затруднит чтение и понимание кода.
Метод для копирования объектов structuredClone()
Как понятно из названия метода, он создан специально для глубокого копирования объектов. Итоговый код будт выглядеть следующим образом:
Красиво, надежно и читабельно. На мой взгляд, так гораздо лучше. Конечно же, если ваши пользователи не используют древние браузеры, которые н обновлялись со времен царя гороха.
А вы каким способом предпочитаете копирвоать объекты? Напишите в комментариях!