Учимся писать глубокий merge и сравнение объектов и массивов | Уроки JS
Вставка
- Опубліковано 7 чер 2024
- Будем целиком воплощать функции deepMerge & deepCompare без библиотек на чистом JS через рекурсию + разберём различны тонкости JS.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский UA-cam: @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 дня боролся)
Отлично, спасибо большое!🙂👍
Классное видео. Леночка - ты супер умничка..)
❤️
Елена, у Вас очень хорошие видео.
Интересно Вас слушать и монтаж хороший.
Лена, это было очень глубоко
Господи почему я не был раньше на неё подписан! Спасибо тебе большое +1 в подписку!
Огонь!!!
😘❤️
Вот и пробили 10 тысяч🥳
Даааа!!! 😍
спасибо!
На сколько я помню поверхностная копия - это ссылка на объект. Именно ее делает любое копирование обьектов в JS. Вероятно когда Вы меняете result, то меняется и Arr)
А для глубокой копии можно использовать метод structuredClone()
Поддержка у него пока что средняя
кайф))
Добрый вечер. А видео про backtracking будет?
Для глубокого копирования объекта можно использовать функция Object.prototype.structuredClone()
Прикольно, но пока ещё рановато, только только поддержка появляется.
Не легко Пойду к жене спрошу что она знает про глубокий мердж
😂😂😂
Это все, конечно, круто, но разве нельзя использовать просто JSON.stringify() для deepCompare?
В текущей задаче не получится. Я его упоминала тоже в уроке. Например вот такой кейс JSON.stringify({a: 1, b: 2}) !== JSON.stringify({b: 2, a: 1}). Объекты нам не гарантируют порядок ключей.
+ Там ещё есть особенности благодаря которым JSON.stringify не желательно также использовать для глубокой копии. Например, все функции в объекте приобретут значение null.
@@webelart понял, спасибо
Дипкомпэйр не учитывает что функции сравниваются по ссылке?
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
Леночка запишите курс 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 затмил все
... хоспаде, это штоле жава ???
сложноватенько