Глубокое копирование объекта в JavaScript

Копирование объектов в JavaScript может показаться нетривиальной задачкой. Современные версии языка предлагают нам новый подход к этому вопросу и одна функция structuredClone делает то, что раньше было доступно только с использованием внешних библиотек.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...

[@MrKirTer]

Михаил, спасибо. Адекватно, просто, информативно. И так по всему вашему контенту. 🤘

[@nikolaysmolov8031]

Здорово! Не знал про этот метод! Спасибо!

[@ДроновАлександр-г3б]

😀

[@Mikjagger1]

Как обычно , круто и полезно! Спасибо, надо ещё!

[@anonlog]

Очень полезно, новый метод клонирования, просто агонь))

[@АлексейФиленко-ф4к]

Как всегда коротко и полезно, спасибо)

[@ivanfadeev5389]

Не знал об этом! Спасибо! 🔥🔥🔥🔥

[@vladimirmuratov2220]

Большое спасибо. Как всегда интересно 🙂

[@vladtkachenko5095]

спасибо за видео! очень полезно, как всегда. И своевременно, тоже как всегда )

[@bagga_lev]

Михаил, спасибо за такое познавательное видео !

[@curillaenator]

Комментарий в поддержу👍

[@nardo988]

Большое спасибо за видео. Было очень полезно!

[@uncle_ara]

Спасибо за видео!

[@ДроновАлександр-г3б]

Круто!

[@AntonioBenderas]

Михаил просто чудотворец. Только вчера учил клонирование и не хватало дип клона и тут хоба

[@workaccount6372]

У меня так тоже было, когда нужно было на проекте забрать кастомные скроллы, и видео Михаила вышло на эту тему чуть ли не в тотрже день (видео про либу overlayScrollbars)

[@tukituk2759]

Спасибо большое!

[@iwannabekoshka]

Балдежное видео, полезное

[@exx-ns4tt]

не знал, благодарю!

[@workaccount6372]

Написать рекурсивную функцию глубокого копирования объектов -- и будет вам счастье)) Михаил, спасибо за видео!

[@EuegenTv]

В целом понятно, что Lodash - наше всё :D

[@awenn2015]

Либа отменная

[@КириллМохначевский-о3ю]

Не ставь лодаш полностью. А ставь конкретно утилиту

[@Kleo_Wyatt]

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

[@ertar0]

спасибо!

[@ВладиславСвидерский-г6й]

большое спасибо за видео! было очень полезно!

[@xman5911]

респект

[@Mexanikkmm]

Считаю, что нужно осторожно использовать этот метод, поскольку он поддерживается довольно свежими версиями браузеров. Если есть понимание, что этот продукт будут использовать более старые версии, то может быть проблемой

[@bebeto123g]

Думаю полифил из того же lodash уже есть)

[@tnsaturday]

Крепко обрейтузился

[@kot-duott]

Очень полезное видео, спасибо! Интересно, почему во всех мануалах в сети приводятся методы с ..., JSON или object.assign, но не этот

[@asmal832-hi]

Это достаточно новый метод в js.

[@7iomka]

deepmerge из npm берём и будет сказка)

[@RamaRama-qv3jo]

Михаил, вы упомянули про деструктуризацию и спред оператор для копирования , но она пригодна и для глубокого копирования со вложенностями. Раскройте эту тему тоже.

[@lessons3141]

Михаил, а что за ИДЕ и используете в видео? интересует как логи видно сразу сбоку без браузера консоли. это расширение в иде?

[@nikitazharinov2329]

Quokka расширение для vs code

[@philipryazankin1073]

Думаю это quokka c подпиской

[@mishanep]

Это Quokka без всяких подписок =)

[@AlexandruBejenari]

thx!!!

[@ashimov1970]

Михаил, большое спасибо за информацию. А есть ли встроенная функция у JS для глубокого сравнения объектов?

[@mishanep]

Не встречал.

[@some_body_qtyeeuy]

Круто! А как называется расширение, которое выводит логи прямо в редакторе?

[@andreynasuto9734]

quokka

[@sober4you1]

Может быть видео про immer js?

[@arti8572]

Подскажи, пожалуйста, что за расширение ты используешь не вызывая терминал, а видя результат вывода в консоль по правую сторону. Заранее благодарю)

[@aleksprimetv]

возможно quokka

[@mishanep]

Это Quokka. У нее есть ограничения в бесплатной версии, но в моем случае ее хватило.

[@user-artem-busyhin]

❤‍🔥

[@yushato]

Михаил, подскажите, как называется плагин, который сразу подсказывает что выведет ответ? Впервые увидела на видео, тоже хочу 😊

[@mishanep]

Это quokka

[@grantorino3465]

Что за плагин в vscode использовался для отображения результата?

[@gtaplayer379]

StructuredClone некоторыми браузерами не поддерживается. И как мне тогда глубоко копировать, и не применять при этом сторонние библиотеки?

[@АндрейПоляков-е5н]

Спасибо за ролик. Вопрос, почему все так пытаются избегать _. говоря - не тянуть же библиотеку ради одной функции, но на реальном проекте, скорее всего будет потребность не в одной, а в нескольких функциях из _. Может тогда просто смириться с этим?

[@mishanep]

Здесь возможны разные сценарии. Я работал и на проектах с lodash, и без него, но с Ramda, и без библиотек хэлперов вовсе. Lodash был мегаактуален, когда нативными средствами языка было сложнее что-то сделать. С развитием языка актуальность внешней библиотеки снижается. Это как с jQuery. Лично мне больше нравится Ramda за ее функциональный подход. Она, помимо функционала, делает читабельность кода совсем иной. А если мне нужен просто вызов функции с присвоением результата в переменную и я могу обойтись без библиотеки, то скорее всего я так и сделаю.

[@andTutin]

почему бы и нет, весь лодаш не пойдет в бандл

[@dzmitrysatsukevich805]

Ну у нас на проекте отдельно установлен только isEqual из лодаша, потому что только им пользуемся

[@yuriyula]

Или просто установить через npm i lodash.clonedeep, и тогда вся библиотека и не потянется)

[@IQ-120]

Ну, окей! А в каких случаях требуется копирование экземпляра? Чтобы так пыжить...? Вот, там была шняга с блобом и чем-то... Нафига ее копировать? Может по старинке - вспомнить про конструктор? Я на с# пишу.. там рефлекшен есть :) а это, прям извращения над функцией...

[@vladimirmuratov2220]

Михаил, вопрос не по теме: знакомы ли Вы с Flutter? Очень надеюсь что да... ☺

[@mishanep]

Здравствуйте, Владимир. Никогда с ним не работал =)

[@ДмитрийРева-щ3ф]

Подскажите, пожалуйста, если копия на методы не распространяется то повлияет вызов метода у копии на оригинальный обьект? Если да то можно ли избежать этого?

[@mishanep]

Копия на методы не распространяется - обычно обозначается, что у копии не будет методов как таковых. Разве что стандартные методы объекта, но без тех, что могли быть добавлены оригиналу.

[@ДмитрийРева-щ3ф]

@@mishanep Спасибо

[@dosenk109]

Good

[@my_zalizniak]

Как называется расширение, чтоб консоль лог результат в редакторе выводил?)

[@yuriyula]

quokka

[@awenn2015]

Вообще странно конечно что в js все присваивания по ссылке идут, этот процесс ведь никак не контролируется через всякие & верно?

[@mishanep]

Что вы имеете в виду под всякими & ?

[@awenn2015]

@@mishanep во многих яп это символ передачи переменной по ссылке, например в том же php, если тебе нужно работать с переменной например в функции то можно ее передать по ссылке, иначе она просто копируется в новый участок памяти

[@mishanep]

@@awenn2015 нет, такой штуки в JS нет.

[@awenn2015]

@@mishanep ну js это js у него много таких приколюх, даже то что в нем все объекты, что функции что массивы )

[@hhhhferttuhyrgsa]

Можно реальный пример на практике, когда нам пригодиться клонировать объект, теория хорошо, но мне интересно, где это вообще применяется в практике?

[@nade3282]

у тебя есть большая форма, для нее можно создать 2 переменные, одна будет для заполнения этой формы, вторая пустая, для последующей очистки формы

[@asmal832-hi]

Есть функция, которая создаёт новый объект из существующего. Если у существующего большой уровень вложенности, то этот приведёт к проблемам. Т. к. все изменения в существующем объекте будут происходить и в новом.

[@dimasheiko]

structuredClone безусловно крутой метод, но у него пока что очень плохая поддержка браузерами? Только относительно самые свежие. Разве не так?

[@mishanep]

JS доступен не только в браузерах. Плюс для браузеров существуют полифиллы. Я считаю, что неплохо как минимум узнавать про новые возможности, даже если мы не можем начать их использовать в своих проектах с сегодняшнего дня.

[@dimasheiko]

@@mishanep Безусловно. Спасибо за ответ!

[@Oevka]

А как тогда скопировать гетеры, методы и т.д.? Просто johnClone extends john?

[@mishanep]

Extends это уже про наследование в классах. Это немного о другом, но да - таким образом методы родительского класса, равно как геттеры/сеттеры, будет наследоваться.

[@Oevka]

спасибо!

[@alexalekseichuk5737]

Misha, Object.create() sozdaet novyi object, no ne kopiruet, a usaet argument kak prototype. assign i spread-operator kopiruiyt. tak? A to ty govorish, sho oni vse tri kopiruiyt.

[@mishanep]

Формально копирование - это и есть создание чего-то нового на основе чего-то ранее существовавшего. И так оно во всех случаях.

[@The14Some1]

А что за плагин показывает результат console log без запуска кода на выполнение? Как это вообще работает без запуска кода?

[@The14Some1]

Полистал внизу. Михаил, вам стоит снять про quokka ролик :)

[@pvinnie3827]

все хорошо, но звук как из трубы

[@asmal832-hi]

Забыли сказать, что метод, который клонирует все - очень медленный.

[@snatvb]

это не JS метод, а метод в браузере или другом окружении, в частности описан в спецификации HTML

[@dimon7511]

А кто нибудь пробовал написать функцию которая копировалабы обьект на любую вложенность с учетом геттеров, сеттеров, символьных полей, скрытых дескриптором полей, копировала методы, и сохранялабы прототипы для всех внутренних копируемых обьектов ? Ну тоесть чтобы прямо вообще делала полную копию.

[@hola-ig9gb]

Если такое будет нужно то прийдёться писать,а так ни разу не пригождалось,так то это не очень сложно.

[@AntonioBenderas]

А как это консоль выводится прямо в коде?

[@empatij1730]

автор в паре комментов ответил - quokka

[@paulos_swim]

Ну в общем, метод для полного копирования объекта в js всё ещё не подвезли.

[@romanmed9035]

все оно не так глубоко и правильно копирует. мне это практически рабочего места стоило. structuredClone так же не идеальный, как показал автор видео. лодаш в помощь.. странно что нет реально полноценного встроенного механизма.

[@stasostrin47]

Есть полезное, а есть и из разряда - мы не сможем какать через рот, потому что рот не предназначен для того что бы какать... Если надо клонировать класс - у класса должен быть такой метод

[@demimurych1]

Если Вы претендуете на то, чтобы учить чему-то других людей, то в рамках заявленной задачи в условиях языка JavaScript первое о чем следовало бы сказать, так это о том, что если Вам понадобилось глубокое копирование обьектка, то это означает что Вы делаете что-то не так. То есть задача с которой Вы работаете решается иным образом. Бывают исключения, которые касаются системного программирования. Но там, работают со структурами, которые лежат не в Object а в Typed Array где есть соотвествующие методы копирования. Решитесь взять на себя ответственность, за то чему Вы учите других. Тогда и Вы станете как специалист лучше, и Вам не будет стыдно за тех которых Вы чему то учили

[@andrew2340]

kzbin.info/www/bejne/gnaqmGR8bt54qKs - так копирование или глубокое копирование или и то и другое. вы уж определитесь

[@iGotton]

+

[@victormog]

В корне не правильное сравнение объекта и класса - они похожи только синтаксисом. Класс же по сути (в JS) - функция

[@mishanep]

Я не знаю где вы увидели сравнение объекта и класса. Речь шла о копировании объектов. Инстанс класса - есть объект.

[@victormog]

@@mishanep По большому счёту, в JS всё объекты...

[@ulietaight]

@@victormog чушь несёшь

[@victormog]

@@ulietaight это лучше, чем в чатах срать...

[@lesters]

я так понимаю полноценного варианта скопировать не существует, все какие то на костылях?