46 - React JS практика - копия глубокая vs поверхностная (deep copy vs shallow copy)

Подписаться 182 тыс.

Просмотров 71 тыс.

50% 1

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
Поверхностная копия, которую мы делаем с помощью оператора распространения - spread operator), не совсем та копия, которая, нам нужна. Так как мы с вами проповедуем функциональное программирование, нам нужно копировать объекты так, чтобы внося изменения в копию, мы не затрагивали ихсодный объект (так называемая неизменяемость - имьютабельность - immutablility)
В данном уроке мы рассмотрим, что как и почему ;)
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#reactJS #практика #примеры #уроки #курс

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 535

@АлександрКлименко-д8с 4 года назад

Фраза "важнейшая херня, ..." - реально прорыв в педагогике)))

@КоровайченкоАлександр 2 года назад

А есть еще "Неведомая херня..." - частое явление в программировании)))

@andranikmkhitaryan9914 2 года назад

@@КоровайченкоАлександр ))))))

@MikhailKuklenkov Год назад

Дима просто блещет такими фразами, гораздо круче воспринимается материал)

@ИльяИваник-ф8ф 4 года назад

о божечки, наконец-то темный интерфейс в программе!!!

@andreiBylkin 3 года назад

ууррааааааааааааааааааааааааааааааааааааааа, ждаж этого еще с первого выпуска!!!! )))

@whicencer8819 3 года назад

я раньше хейтил всех со светлой темой. После уроков димыча сам себе поставил светлую тему в вебшторме

@FamilyB-u4s 3 года назад

светлая тема с минимум синих тонов оказывает наименьшее влияние на зрение. привыкнуть просто надо

@ИльяИваник-ф8ф 3 года назад

@@FamilyB-u4s я устал от нотепад++ так что черная тема мне по кайфу щас

@StanislavObrazcoff 5 лет назад

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

@kub1k 4 года назад

Спасибо за уроки! teatcher == учитель = false учитель == teacher = true

@dw_tv3992 2 года назад

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

@yphwd4677 2 года назад

бригаду

@dw_tv3992 2 года назад

@@yphwd4677 он написал результат выражения (начиная с одинарного знака =) а это вычисление делает комп, поэтому ожидаемый результат надо писать в кавычках, если такой имеется в условном тесте

@antonsydorovych1981 5 лет назад

отдельное спасибо за чёрный фон :)

@ITKAMASUTRA 5 лет назад

Силы зла победили)

@braivs 3 года назад

@@ITKAMASUTRA черный это не зло) Это силы тьмы, те кто не спят ночью, а днем отсыпаются.

@stanislavaksenov9000 3 года назад

Вообще говоря, существуют серьезные исследования (ссылки не дам), которые говорят что темных тем нужно избегать - они отрицательно сказываются на психике, располагают к депрессиям, и это просто для глаз вредно. Так что никому не рекомендую использовать темные темы.

@braivs 3 года назад

@@stanislavaksenov9000 Исследования на то и исследования, что можно доказать и то и обратное. В плане депрессии и психики осознаю, что всё зависит от субъективного восприятия. Можно и на острове в тепле быть грустным, если внутри пустота. А в коде главное вовлечение в процесс. Если интересно, то радостно и со светлой и с тёмной темой одинаково. А цвета лишь разнообразие.

@whicencer8819 3 года назад

@@braivs ночью нужно спать. Именно поэтому пишу в час ночи

@sarg22 5 лет назад

Спасибо, что продолжаете отличный курс!!!Буду весьма признателен, если вы доведёте его до конца, Дмитрий!

@Алексей-э9ь4ю 4 года назад

В Димыче я не сомневаюсь. А вот нам как дойти...

@Inviduschannel 5 лет назад

Вот теперь стало понятнее, спасибо, Димыч) deep copy, shallow copy, spread operator

@arrowdev1042 2 года назад

Знал об этом, но повторение - мать учения, и все равно интересно, так как в одном месте по одному рассказывают, в другом другие аналогии, а тут ещё разжевали и с рисунками, спасибо Дима!

@aymkin 5 лет назад

Спасибо, с копированием объектов был знаком - еще раз повторил, спасибо. Дума в начале что это изи, однако после понятия глубокого копирования - вау! бум!

@theWorldIsMultivariate 2 года назад

Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!

@DimTsi 2 года назад

Спасибо №46 доп мотериал для тех кто не очень знаком с js, хотя людям всё же нужно было сначало js освоить перед реактом)

@ВиталийКопоров-и4в 4 года назад

Я, когда начал изучать JavaScript, просто прочитал эту тему не вникая и как оказалось ОЧЕНЬ зря.Изучив эту тему я по другому совсем взглянул на код и по другому стал воспринимать выражение "Всё в javaScript объект".Это просто ЖЕЛЕЗОБЕТОННЫЙ фундамент для работы в javaScript.Спасибо Димыч,летим дальше!

@adastraperaspera0264 4 года назад

Вот это подстава, на многих курсах про это ни слова=)

@user-san-chous 4 года назад

нужно еще учебник открывать хоть какой-то)) либо документацию

@АлександрК-т3ы 3 года назад

ну правильно! это же es6. Спред оператор. Синтаксический сахар) чтобы его юзать, нужно знать, как он работает. На курсах объясняют, как он устроен под капотом. А уже сам оператор мы разбираем на курсе у Димыча:)

@stephencurry8078 3 года назад

У Лаврика это тема хорошо разжевано

@theWorldIsMultivariate 2 года назад

Очень понятно и интересно объесняешь, для меня было очень полезно, вообще не знал этого, ещё раз огромнейшее спасибо!!

@maxk715 3 года назад

Так доходчиво объяснять может только человек с преподавательским талантом!

@MrVertu01 3 года назад

Уже закончил сотку, пересматриваю видео, потому что на другом канале увидел short про копирование и вспомнил этот видос, вот пересматриваю))

@DanchezHoost 2 года назад

Ещё есть один вариант, как можно полностью скопировать объект. Попробуй написать let newObject = JSON.parse(JSON.stringify(oldObject)) . Тут главная разница в том, что есть такой формат общения в ооп, как JSON(погуглите, там читать минут 5) и у него есть 2 метода. Допустим до вас приходит объект и вы его можете перевести в строку({num: 2, year: 15, boolean: false} ---> в JSON.stringify(Object) мы получим ---> '{"num": 2, "year": 15, "boolean": false}'), а потом перевести обратно в объект JSON.parse(object). Я обычно так делал и мен этого было достаточно, хотя есть и косяки - при переводе в stringify NaN превращается в null. Вроде это все

@ГалинаКузнецова-н1и Год назад

хочется лайк ставить в начале и к в конце видео. Так как уверенность в курс 100%. Спасибо Дима, объяснил очень подробно

@nh42so42 Год назад

Эх, сели бы в голову так же предыдущие 10 видосов, как этот... Почему-то когда спрашивал что за три точки перед массивом, который у меня уже есть, мне всегда отвечали "а, ну если не знаешь, потом узнаешь". Наконец узнал) так еще и наглядно увидел, что за "ссылочный тип". Все говорят - "объект имеет ссылочный тип", аа, ну хорошо, хоть квадратный тип, что это значит-то!? Спасибо за столь емкий по времени и большой по информации и ее важности урок.

@marina-ej4qd9kc1wh 8 месяцев назад

4.01.2024. Интересненько, вот и не знала такого. Спасибо, Димыч!

@mistrz7856 3 года назад

Всё же после ООП, данная тема "заходит" немного легче. Спасибо!

@АдинаМейрамханова 9 месяцев назад

Димыч спасибо! Я наконец-то поняла различие обьекта от примитивных типов. Не знаю правильно ли пишу, но это видео очень сильно мне понравилось, прям поняла про как все это сравнивается не по содержимому , а по ссылке

@marsonleonardovich4036 5 лет назад

Привет, спасибо за урок! Like!)

@ЮлияКавицкая-е8ч 3 года назад

Просто ЛУЧШИЙ! Спасибо!!! Учусь на 2-х курсах. И на 1-м рассказывали про глубокое копирование. Точнее просто сказали делаем его, а почему и зачем не рассказали, а теперь все встало на свои места. Такое ощущение что ты заполняешь картину у меня в голове недостающими пазлами. Еще раз спасибо, буду идти до конца!

@over_the_top_404 Год назад

Димыч, спасибо, всё понятно) Летим дальше!

@alexey2769 3 года назад

Круто, что объясняешь важные фундаментальные вещи из js по ходу курса. Спасибо! Двигаюсь дальше!

@Ангелина-ю5ц7м 11 месяцев назад

Спасибо за напоминалку о копировании объектов!

@danmax8513 3 года назад

Как же Круто Димыч обьясняет! Пришел сюда уже давно пройдя весь курс и собеседование, чтобы освежить память)

@ЛизаЗеленая-и3к 5 лет назад

Вроде бы и не секретная информация и не особо сложная, но блин! Не всегда до нее своими мозгами дойдешь или найдешь где-нибудь. JS я давно знаю и с оператрром распространения знакома, но информация из видео для меня новая, и рассказываете все очень подробно и понятно (даже спать не хочется ;) ), за что большой респект :) И еще респектище за то, что продолжаете курс, спасибо!) Отличный курс!

@ITKAMASUTRA 5 лет назад

спасибо, Лиза, за обратную связь! Рад стараться!!! И буду рад вашим новым комментам и лайкам! Летим!!!

@SuperMeatB0y 4 года назад

Я как то в Vue.js столкнулся с такой штукой когда в корзину добавлял товары, по сути копировал объект в другой масив объектов и столкунулся с данной проблемой, но вложеность была одноуровневая и использовались только примитивы так что боль я посути не испытал и думал что уже знаю как это работает) Очень полезно просматиривать то что кажеться уже знаешь, как я уже писал раньше смотрю в скорости 1.5 говоришь быстро, понятно. Уже чувствую силу, мало но я стараюсь и ты мне в этом помогаешь. Большое спасибо! Лайк, коммент, подписка, колокольчик = )

@АлександрГлухов-б3у 3 года назад

Димон ну ты вообще шаришь фигаришь. Спасибо друг мой. Я этих нюансов не знал!!!

@Alex-ge7jt 5 лет назад

Спасибо за продолжение, очень ждали)

@ihorbailov9698 2 года назад

Как же круто ещё опутно поттягивать базовые навыки и "важнейшие херни" по нативному JS. Спасибо, Димыч!

@maksym_shkaf 3 года назад

блин, огромное спасибо. Про копирование знал, но что это только поверхностное, это было для меня открытие! Спасибо! Как всегда на высоте))

@ritaravinsky8262 2 года назад

Круто!! Теперь наконец-то стало понятно про копирование объектов!

@AI_about_crypto 2 года назад

2020 которые решили что нужно поработать еще в общепите опять врываются ! Летим , в этот раз долетим)

@antongrushevskij1351 3 года назад

Хорошо, что есть хорошая база C#. Не завидую тем, кто об этом услышал впервые ))

@АлексейЖуков-й6х 4 года назад

Вооот, спасибо Димыч, это было важной штукой для меня. Очередное осознание очередной концепции JS

@ITKAMASUTRA 4 года назад

круто, что проашриваешься и осознаешь это! лети

@АнтонЧижков-ч4л 2 года назад

Ты устроился на работу уже?

@AleksZhukov 2 года назад

@@АнтонЧижков-ч4л нет

@ivanmiarkulau8320 3 года назад

Спасибо за объяснение важнейшей темы работы с объектами, как копировать объекты с применением различных подходов. Летим дальше и пишем наше приложение на ReactJS!)

@__maxsoul643 5 лет назад

Спасибо за урок, очень познавательно и предельно понятно, это как всегда! )

@theWorldIsMultivariate 2 года назад

Удобно проверять через консоль, только не забываете про Shift + Enter =)

@l.a.work_ 6 месяцев назад

Очень полезный урок!🔥

@nk_77777 Год назад

Димыч, дай Бог тебе здоровья за такие подробные объяснения) Привет из Вторника) Всё чётко и понятно)))🔥🔥🔥

@serg11oz 4 года назад

Большое Спасибо, познавательно! До этого знал как делать копию с оператором 'spread', но не думал, что он делает только поверхностную копию...

@sionpriorate 5 лет назад

Блин, для меня это открытие. Спасибо. В PHP если присваиваешь, то создается копия. Я думал и в JS так.

@vovnet 5 лет назад

Нет, в php не копия, а ссылка. Метод объекта __clone() служит для копирования.

@SuperMeatB0y 4 года назад

Думал что хуже уже не будет и тут БАЦ, БАЦ, БАЦ, БАЦ-БАЦ

@ОленькаМослакова 2 года назад

Спасибо, Дима От тебя прямо добро и тепло идет, это чувствуется

@vvks9901 Год назад

Халява ))

@semial 4 года назад

Да, есть открытия, которые стали сюрпризом. Не знал, что внутренний объект имеет отдельное хранение))) Спасибо, Димыч))))))

@sergeyistominov5880 2 года назад

плюсик для лучшего ранжирования =)

@Beatboxer3090 4 года назад

Классно что не только изучаешь реакт, но и познаешь программирование в Javascript ( что как раз у меня с этим проблемы), так что спасибо за этот урок

@ВикторКулагин-ь2у 4 года назад

Спасибо, что напомнил. При переходе и уход на php уже подзабыл тонкости. Сам доходил) А тут всё по полочкам, лучшее объяснение. Ждём видео про нейросети!)

@vityaost 2 года назад

Наконец-то простой урок по нативке. Ато думал с ума сойду))

@mordemorde7027 4 года назад

Великолепный учитель.

@Napol3691 2 года назад

Спасибо за подробное объяснение!

@Shimbato 2 года назад

очень круто! про полное копирование объекта не знала, только поверхностное =)

@mousecarrot8401 3 года назад

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

@TRIZ-Bogatyregold 2 года назад

Тот момент, когда уже сидишь в четверге, и наконец дошел до этого урока, и понимаешь что тема действительная важная, а ты ее уже отлично понимаешь, потому что задротил в ДЗ Вторника :) Летим

@ITKAMASUTRA 2 года назад

Круть, мужик! Закрепляй!

@IT-Svyatoslav 3 года назад

Спасибо что напомнил про правила сравнения ссылочных переменных

@AbaiIlyasov 7 месяцев назад

Всё круто иду дальше!

@disposables72 4 года назад

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

@vyacheslavpm3779 3 года назад

Отличный урок! Спасибо Димыч!

@spacerider9426 4 года назад

Спасибо огромное за твой труд! Смотрю дальше!

@РусланЮсуфов-ф3ш 5 лет назад

Круто! Очень полезный урок даже не с точки зрения React, а в плане JS

@MariTochka 3 года назад

спасибо, такие теоретические уроки иногда дают передохнуть мозгу от растущего напряжения и раздражения сложностями

@ДенисОстровський-б3н 5 лет назад

Я еще с реактом не имею ничего общего, но мне скинули данное видео только для разбора копирования объектов. Разобрался, замечательное "разжевывание") лайк) P.S.: Spread operator - имба)

@ITKAMASUTRA 5 лет назад

рад, Денис, что зашло объяснение

@olegzidane7099 4 года назад

азиров - бимба

@EvgeniyKlitsunov 3 года назад

не досмотрел до конца прошлый выпуск, думал, что у меня ошибка раз не добавляется пост)) потратил час на поиски, а потом досмотрел и узнал, что дело не в моем коде) думаю все равно не вредно было самому покопаться!!)

@КоровайченкоАлександр 2 года назад

Димыч, с такого курса грех слиться, падлой буду))

@МихаилБронников-ш9х 3 года назад

Очень сильный выпуск. Очень хорошая теория по объектам в целом

@christinalozovaya5860 5 лет назад

Познавательное видео! Особенно хорошо заходит схематическое разъяснение материала, лайк за это

@АртемКулинский-ю4о 3 года назад

Спасибо! Все очень понятно! Особенно полезно, если мало опыта в обычном JS))

@Snegurjan 4 года назад

Спасибо за лучшие уроки по React Redux на youtube

@Sunr1sen2 4 года назад

Спасибо за курс)

@Quentinrei 2 года назад

Это было известно, но всё равно смотрел с удовольствием

@Valentynka_22 2 года назад

Дякую, дуже зрозуміло і цікаво😉

@alfa_main 3 года назад

Класс, спасибо за видео, уже подзабыл эту тему, как раз хороший повод вспомнить JS)

@НиколайЛевченков-о8ж 4 года назад

Отлично объяснил, все как обычно на высшем уровне.

@KirillPetechkin 4 года назад

Спасибо! Знал это и так, но полезно было повторить. Лайк) Летим дальше

@alexeykorovatsky3053 3 года назад

Димыч, ты красавчик! Все доступно и понятно объясняешь.

@braivs 3 года назад

Для меня было сложно. Это концепция для меня новая, до этого не разбирался с объектами в памяти. Два раза смотрел ничего не понял. Стал смотреть конспектируя по минуте, параллельно гуглил терминалогию и читал документацию, рисовал картинки, писал код, смотрел как в консоли работает. Получилось разобраться, раз 10 пересмотрел )

@yar__n8013 4 года назад

Александр Сергеич! Куда стенка девалась?! Товарищ Тимофеев Видал, какую масыну изобрели! Полквартиры исчезло!

@aidosbatyrkulov3272 4 года назад

Спасибо за курс

@ansaganie 3 года назад

Thank you very much Dimich!

@yuritian8830 Год назад

не знал такой нюанс про спред

@andreyantonovich379 3 года назад

Спасибо за урок!

@bystryisokol1546 5 лет назад

отличный урок и очень полезный урок

@vladkomovich8585 3 года назад

Спасибо за разбор этой тем, очень доходчиво объяснил, круто!

@yuridozhdikov6356 3 года назад

Видимо ты тут хотел сказать лайкос)))

@КлимСомов-х6с 2 года назад

Реально полезно, спасибо!

@ctumyji9737 5 лет назад

Спасибо, отличный курс! Отправляемся дальше.

@-django7169 4 года назад

Спасибо, бомблю дальше

@rustammaxmudov2621 4 года назад

Все круто, Димыч спасибо за контент)

@sanyastoskol6914 2 года назад

Привет спасибо за урок!!! Все супер классно и понятно, ставим ЛАЙКос!!)) и гоним дальше!!!

@МарияВасиленко-я5к 4 года назад

Хорошо знаю эту тему, но полезно было повторить. Спасибо)))

@Amourphys 2 года назад

Спасибо, Димыч, за такое подробное объяснение

@АтомАтомов-г5щ 4 года назад

Спасибо за урок! Я смотрел в учебнике по js такой пример раньше, но там не так хорошо доходит как у Димыча!

@ivanpsarew 3 года назад

Димыч, на счет примитивов я бы поспорил :) (я конечно не спец и если я ошибаюсь - дайте знать в комментах!))) Смысл в том, что любая переменная - есть ссылка на что-то, даже на примитив. Просто когда мы пишем `let a = 18` мы создаем в памяти число 18 и переменная `a` ссылается на эту ячейку в памяти, где хранится это число. Далее если мы пишем `let b = 18; let c = a; let d =b` - то технически все эти переменные ссылаются на одну и туже ячейку памяти с числом 18, а присваивая переменной с примитивом новое значение мы просто в памяти записывается новое значение и переменная начинает ссылаться на него. Как-то так, вроде понятно объяснил :) Блин не помню где я это читал, по-моему в книге Крокфорда про JavaScript

@ivanpsarew 3 года назад

Ну а для более простого понимания это все можно упростить до того, что примитивы записываются в переменные "как есть" и их можно менять и копировать =)

@danildemchenko6004 3 года назад

да, в твоих словах есть правда, я тоже так себе это представляю, не помню в какой книге вычитал. но тут прикол в том, что грубо говоря каждый программист выстраивает для себя какое-то своё понимание этой всей движухи) вот Димыч говорит, что есть несколько чисел 18 в памяти. Я же считаю, что есть одно число 18, на которое уже и ссылаются (как будто привязываются) наши переменные, но от этого программа не станет хуже работать, главное понимать, как этим числом(числами) 18 управлять) не знаю, зачем я это вообще написал, просто держу в курсе, так сказать :DDD