Учимся писать глубокий merge и сравнение объектов и массивов | Уроки JS
Vložit
- čas přidán 24. 07. 2024
- Будем целиком воплощать функции deepMerge & deepCompare без библиотек на чистом JS через рекурсию + разберём различны тонкости JS.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский CZcams: @webelart_en
💁🏼♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Поддержать развитие канала: / webelart
🌱Старт урока: github.com/liveldi/deep_merge...
Рекомендуемые видео в уроке:
⭐️ Рекурсия и стек в JavaScript: • Рекурсия и стек в Java...
⭐️ Пишем полифилы на JavaScript: • Пишем полифилы на Java...
00:00 Введение.
00:57 Скачиваем проект с подготовленными тестами.
02:05 Постановка задачи deepCompare + теория ссылочных типов данных.
06:29 Особенность null в JavaScript.
08:20 Приступаем к написанию deepCompare.
10:54 Пишем дополнительные helpers.
12:45 Как можно проверить тип данных в JS.
18:02 Таблица приоритетов JS.
20:11 Получение ключей объекта Object.keys().
24:08 Тестируем функцию deepCompare.
25:09 Постановка задачи deepMerge.
27:46 Теория про мутирование данных.
28:52 Про глубокие объекты и важность их копии.
31:28 Приступаем к реализации deepMerge.
32:41 Пишем deepCopyArrays & deepCopyObjects.
38:32 Про JSON.stringify().
39:53 Пишем deepMergeArrays.
40:40 Пишем deepMergeObjects.
45:13 Тестируем deeMerge.
46:13 Рефакторим deepCopyArrays & deepCopyObjects в deepCopy.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Эта девушка несёт свет людям… продолжай в том же духе ))
Очень полезное виде, вообще все видео на канале просто топ, смотрятся на одном дыхании даже часовые, даже бывает обидно что досмотрел) Ты очень круто преподносишь информацию спасибо за это тебе, главное не останавливайся!
❤️❤️❤️
видно, что человек увлеченный, всегда приятно таких смотреть
Спасибо за полезный контент!
(глубокий merge, сравнение объектов и массивов | Уроки JS)
Отлично, спасибо большое!🙂👍
Классное видео. Леночка - ты супер умничка..)
❤️
Елена, у Вас очень хорошие видео.
Интересно Вас слушать и монтаж хороший.
Огромное Вам спасибо, это видео помогло мне решить проблему, с которой я 2 дня боролся)
Так всё сложно и непонятно.. Умная девушка.. Побольше бы таких красавиц и жизнь в стране наладилась
Лена, это было очень глубоко
Огонь!!!
😘❤️
Вот и пробили 10 тысяч🥳
Даааа!!! 😍
Господи почему я не был раньше на неё подписан! Спасибо тебе большое +1 в подписку!
спасибо!
На сколько я помню поверхностная копия - это ссылка на объект. Именно ее делает любое копирование обьектов в JS. Вероятно когда Вы меняете result, то меняется и Arr)
А для глубокой копии можно использовать метод structuredClone()
Поддержка у него пока что средняя
кайф))
Добрый вечер. А видео про backtracking будет?
Для глубокого копирования объекта можно использовать функция Object.prototype.structuredClone()
Прикольно, но пока ещё рановато, только только поддержка появляется.
Не легко Пойду к жене спрошу что она знает про глубокий мердж
😂😂😂
Дипкомпэйр не учитывает что функции сравниваются по ссылке?
var a = function(x,y) {return x + y}
var b = function(x,y) {return x + y}
a===b //false
b.toString()===a.toString() //true
a.valueOf() === b.valueOf() //false
Это все, конечно, круто, но разве нельзя использовать просто JSON.stringify() для deepCompare?
В текущей задаче не получится. Я его упоминала тоже в уроке. Например вот такой кейс JSON.stringify({a: 1, b: 2}) !== JSON.stringify({b: 2, a: 1}). Объекты нам не гарантируют порядок ключей.
+ Там ещё есть особенности благодаря которым JSON.stringify не желательно также использовать для глубокой копии. Например, все функции в объекте приобретут значение null.
@@webelart понял, спасибо
Леночка запишите курс JS с нуля до профи
Зачем ? Итак много курсов для нулевых. Лучше что-нибудь сложное, похожее на этот урок
И для рекурсий желательно сделать предохранитель что мало ли случайно в каком то кейсе оно не вечно херячило
:D Ну там есть по умолчанию 10-100к вызов и всё даже самый стойкий интерпретатор сдастся. Я ещё думала прикольно бы текущие примеры без рекурсии реализовать, как раз чтобы этой границы не было, но надо думать. Рекурсия здесь конечно выглядит более красиво.
@@webelart не ну идея конечно классная , молодец
P.S. а вы говорите реторн для return
@@user-rh8jg2fb5t а еще она говорит "нода" ))) и что)) мне кажется, очень мило.
@@mind150 неа, она говорит нодА (ударение на последний слог) я не сразу понял о чем она говорит , но это такое, мелочь
НЕ совсем понял как открыть папку из терминала в vscode, про code . - команду знаю, а вот как ту папку открыть в которой нахожусь загадка...
Ммм, можно открыть просто через сам vs code: File -> Open Folder. Или ещё есть File -> Add Folder to workspace
Will you be my mentor?
Unfortunately I am not mentor people yet, but may be will think about it in the future ❤️
@@webelart Well, I had to try. Thank you for your useful content, I like it!
Приоритет логических операторов это конечно хорошо, но где гарантия шо твой колена такой смышлёный как ты и также читаемость кода как то не очень то, обернуть в скобки много времени не займет ! А также конструкцию с прототипами в хелперах неплохо бы вынести в отдельную функцию
Мне вот кстати наоборот не нравится когда со скобками перебор. Вообще с количеством условий в одном if лучше конечно не перебарщивать в целом.
Про вынести, можно конечно, например константу сверху файла объявить, что-то типа const {toString} = Object.prototype; и юзать.
@@webelart ну выносить я бе не советов, инкапсулировать в функции было норм. А на счёт проверок в if есть у меня пример но не слабо нервных он и может даже травмировать
@@user-rh8jg2fb5t Даже страшно представить, что у вас за пример с if 😅😅😅
@@webelart высота 4-5 строк (не помню точно) и длинна всего этого в два екрана (Моник 1920 пикселей ширину). Как же меня передергивало когда я открывал этот файл.....в том проекте были и другие перлы конечно но этот if затмил все
... хоспаде, это штоле жава ???
сложноватенько