Глубокое копирование объекта в JavaScript
Vložit
- čas přidán 26. 08. 2024
- Копирование объектов в JavaScript может показаться нетривиальной задачкой. Современные версии языка предлагают нам новый подход к этому вопросу и одна функция structuredClone делает то, что раньше было доступно только с использованием внешних библиотек.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru...
paypal.me/mish...
Здорово! Не знал про этот метод! Спасибо!
😀
Михаил, спасибо. Адекватно, просто, информативно. И так по всему вашему контенту. 🤘
Очень полезно, новый метод клонирования, просто агонь))
Как обычно , круто и полезно! Спасибо, надо ещё!
Как всегда коротко и полезно, спасибо)
Михаил просто чудотворец. Только вчера учил клонирование и не хватало дип клона и тут хоба
У меня так тоже было, когда нужно было на проекте забрать кастомные скроллы, и видео Михаила вышло на эту тему чуть ли не в тотрже день (видео про либу overlayScrollbars)
Не знал об этом! Спасибо! 🔥🔥🔥🔥
В целом понятно, что Lodash - наше всё :D
Либа отменная
Не ставь лодаш полностью. А ставь конкретно утилиту
Вроде как если исходный объект содержит циклические ссылки, то могут быть ошибки при использовании данного метода
спасибо за видео! очень полезно, как всегда. И своевременно, тоже как всегда )
Мощный урок, топчик !
Большое спасибо. Как всегда интересно 🙂
Круто!
Считаю, что нужно осторожно использовать этот метод, поскольку он поддерживается довольно свежими версиями браузеров. Если есть понимание, что этот продукт будут использовать более старые версии, то может быть проблемой
Думаю полифил из того же lodash уже есть)
Михаил, спасибо за такое познавательное видео !
Комментарий в поддержу👍
Большое спасибо за видео. Было очень полезно!
Очень полезное видео, спасибо! Интересно, почему во всех мануалах в сети приводятся методы с ..., JSON или object.assign, но не этот
Это достаточно новый метод в js.
Написать рекурсивную функцию глубокого копирования объектов -- и будет вам счастье)) Михаил, спасибо за видео!
Спасибо за видео!
Спасибо большое!
респект
не знал, благодарю!
Балдежное видео, полезное
Михаил, вы упомянули про деструктуризацию и спред оператор для копирования , но она пригодна и для глубокого копирования со вложенностями. Раскройте эту тему тоже.
спасибо!
Крепко обрейтузился
deepmerge из npm берём и будет сказка)
Михаил, а что за ИДЕ и используете в видео? интересует как логи видно сразу сбоку без браузера консоли. это расширение в иде?
Quokka расширение для vs code
Думаю это quokka c подпиской
Это Quokka без всяких подписок =)
Подскажи, пожалуйста, что за расширение ты используешь не вызывая терминал, а видя результат вывода в консоль по правую сторону. Заранее благодарю)
возможно quokka
Это Quokka. У нее есть ограничения в бесплатной версии, но в моем случае ее хватило.
StructuredClone некоторыми браузерами не поддерживается. И как мне тогда глубоко копировать, и не применять при этом сторонние библиотеки?
Круто! А как называется расширение, которое выводит логи прямо в редакторе?
quokka
это не JS метод, а метод в браузере или другом окружении, в частности описан в спецификации HTML
большое спасибо за видео!
было очень полезно!
thx!!!
Может быть видео про immer js?
Что за плагин в vscode использовался для отображения результата?
Спасибо за ролик. Вопрос, почему все так пытаются избегать _. говоря - не тянуть же библиотеку ради одной функции, но на реальном проекте, скорее всего будет потребность не в одной, а в нескольких функциях из _. Может тогда просто смириться с этим?
Здесь возможны разные сценарии. Я работал и на проектах с lodash, и без него, но с Ramda, и без библиотек хэлперов вовсе. Lodash был мегаактуален, когда нативными средствами языка было сложнее что-то сделать. С развитием языка актуальность внешней библиотеки снижается. Это как с jQuery.
Лично мне больше нравится Ramda за ее функциональный подход. Она, помимо функционала, делает читабельность кода совсем иной. А если мне нужен просто вызов функции с присвоением результата в переменную и я могу обойтись без библиотеки, то скорее всего я так и сделаю.
почему бы и нет, весь лодаш не пойдет в бандл
Ну у нас на проекте отдельно установлен только isEqual из лодаша, потому что только им пользуемся
Или просто установить через npm i lodash.clonedeep, и тогда вся библиотека и не потянется)
Михаил, большое спасибо за информацию. А есть ли встроенная функция у JS для глубокого сравнения объектов?
Не встречал.
Михаил, подскажите, как называется плагин, который сразу подсказывает что выведет ответ? Впервые увидела на видео, тоже хочу 😊
Это quokka
Михаил, вопрос не по теме: знакомы ли Вы с Flutter? Очень надеюсь что да... ☺
Здравствуйте, Владимир. Никогда с ним не работал =)
Как называется расширение, чтоб консоль лог результат в редакторе выводил?)
quokka
❤🔥
Good
А что за плагин показывает результат console log без запуска кода на выполнение? Как это вообще работает без запуска кода?
Полистал внизу. Михаил, вам стоит снять про quokka ролик :)
Подскажите, пожалуйста, если копия на методы не распространяется то повлияет вызов метода у копии на оригинальный обьект? Если да то можно ли избежать этого?
Копия на методы не распространяется - обычно обозначается, что у копии не будет методов как таковых. Разве что стандартные методы объекта, но без тех, что могли быть добавлены оригиналу.
@@mishanep Спасибо
А как тогда скопировать гетеры, методы и т.д.? Просто johnClone extends john?
Extends это уже про наследование в классах. Это немного о другом, но да - таким образом методы родительского класса, равно как геттеры/сеттеры, будет наследоваться.
спасибо!
А как это консоль выводится прямо в коде?
автор в паре комментов ответил - quokka
Можно реальный пример на практике, когда нам пригодиться клонировать объект, теория хорошо, но мне интересно, где это вообще применяется в практике?
у тебя есть большая форма, для нее можно создать 2 переменные, одна будет для заполнения этой формы, вторая пустая, для последующей очистки формы
Есть функция, которая создаёт новый объект из существующего. Если у существующего большой уровень вложенности, то этот приведёт к проблемам. Т. к. все изменения в существующем объекте будут происходить и в новом.
structuredClone безусловно крутой метод, но у него пока что очень плохая поддержка браузерами? Только относительно самые свежие. Разве не так?
JS доступен не только в браузерах. Плюс для браузеров существуют полифиллы.
Я считаю, что неплохо как минимум узнавать про новые возможности, даже если мы не можем начать их использовать в своих проектах с сегодняшнего дня.
@@mishanep Безусловно. Спасибо за ответ!
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.
Формально копирование - это и есть создание чего-то нового на основе чего-то ранее существовавшего. И так оно во всех случаях.
Вообще странно конечно что в js все присваивания по ссылке идут, этот процесс ведь никак не контролируется через всякие & верно?
Что вы имеете в виду под всякими & ?
@@mishanep во многих яп это символ передачи переменной по ссылке, например в том же php, если тебе нужно работать с переменной например в функции то можно ее передать по ссылке, иначе она просто копируется в новый участок памяти
@@awenn2015 нет, такой штуки в JS нет.
@@mishanep ну js это js у него много таких приколюх, даже то что в нем все объекты, что функции что массивы )
Если Вы претендуете на то, чтобы учить чему-то других людей, то в рамках заявленной задачи в условиях языка JavaScript первое о чем следовало бы сказать, так это о том, что если Вам понадобилось глубокое копирование обьектка, то это означает что Вы делаете что-то не так. То есть задача с которой Вы работаете решается иным образом.
Бывают исключения, которые касаются системного программирования. Но там, работают со структурами, которые лежат не в Object а в Typed Array где есть соотвествующие методы копирования.
Решитесь взять на себя ответственность, за то чему Вы учите других.
Тогда и Вы станете как специалист лучше, и Вам не будет стыдно за тех которых Вы чему то учили
А кто нибудь пробовал написать функцию которая копировалабы обьект на любую вложенность с учетом геттеров, сеттеров, символьных полей, скрытых дескриптором полей, копировала методы, и сохранялабы прототипы для всех внутренних копируемых обьектов ? Ну тоесть чтобы прямо вообще делала полную копию.
Если такое будет нужно то прийдёться писать,а так ни разу не пригождалось,так то это не очень сложно.
все хорошо, но звук как из трубы
Ну в общем, метод для полного копирования объекта в js всё ещё не подвезли.
lodash.
+
czcams.com/video/LEGg1F9yErI/video.html - так копирование или глубокое копирование или и то и другое. вы уж определитесь
все оно не так глубоко и правильно копирует. мне это практически рабочего места стоило. structuredClone так же не идеальный, как показал автор видео. лодаш в помощь.. странно что нет реально полноценного встроенного механизма.
Есть полезное, а есть и из разряда - мы не сможем какать через рот, потому что рот не предназначен для того что бы какать... Если надо клонировать класс - у класса должен быть такой метод
В корне не правильное сравнение объекта и класса - они похожи только синтаксисом.
Класс же по сути (в JS) - функция
Я не знаю где вы увидели сравнение объекта и класса. Речь шла о копировании объектов. Инстанс класса - есть объект.
@@mishanep
По большому счёту, в JS всё объекты...
@@victormog чушь несёшь
@@ulietaight это лучше, чем в чатах срать...
я так понимаю полноценного варианта скопировать не существует, все какие то на костылях?