Учимся писать глубокий merge и сравнение объектов и массивов | Уроки JS
Будем целиком воплощать функции deepMerge & deepCompare без библиотек на чистом JS через рекурсию + разберём различны тонкости JS.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZread: @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.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Пікірлер: 51
Эта девушка несёт свет людям… продолжай в том же духе ))
Очень полезное виде, вообще все видео на канале просто топ, смотрятся на одном дыхании даже часовые, даже бывает обидно что досмотрел) Ты очень круто преподносишь информацию спасибо за это тебе, главное не останавливайся!
@webelart
2 жыл бұрын
❤️❤️❤️
видно, что человек увлеченный, всегда приятно таких смотреть
Отлично, спасибо большое!🙂👍
Спасибо за полезный контент! (глубокий merge, сравнение объектов и массивов | Уроки JS)
Огромное Вам спасибо, это видео помогло мне решить проблему, с которой я 2 дня боролся)
Елена, у Вас очень хорошие видео. Интересно Вас слушать и монтаж хороший.
Классное видео. Леночка - ты супер умничка..)
@webelart
2 жыл бұрын
❤️
Огонь!!!
@webelart
2 жыл бұрын
😘❤️
Лена, это было очень глубоко
спасибо!
Так всё сложно и непонятно.. Умная девушка.. Побольше бы таких красавиц и жизнь в стране наладилась
Господи почему я не был раньше на неё подписан! Спасибо тебе большое +1 в подписку!
Вот и пробили 10 тысяч🥳
@webelart
2 жыл бұрын
Даааа!!! 😍
кайф))
На сколько я помню поверхностная копия - это ссылка на объект. Именно ее делает любое копирование обьектов в JS. Вероятно когда Вы меняете result, то меняется и Arr) А для глубокой копии можно использовать метод structuredClone() Поддержка у него пока что средняя
Добрый вечер. А видео про backtracking будет?
Для глубокого копирования объекта можно использовать функция Object.prototype.structuredClone()
@webelart
2 жыл бұрын
Прикольно, но пока ещё рановато, только только поддержка появляется.
Не легко Пойду к жене спрошу что она знает про глубокий мердж
@webelart
2 жыл бұрын
😂😂😂
Леночка запишите курс JS с нуля до профи
@goojoke3161
2 жыл бұрын
Зачем ? Итак много курсов для нулевых. Лучше что-нибудь сложное, похожее на этот урок
Это все, конечно, круто, но разве нельзя использовать просто JSON.stringify() для deepCompare?
@webelart
2 жыл бұрын
В текущей задаче не получится. Я его упоминала тоже в уроке. Например вот такой кейс JSON.stringify({a: 1, b: 2}) !== JSON.stringify({b: 2, a: 1}). Объекты нам не гарантируют порядок ключей. + Там ещё есть особенности благодаря которым JSON.stringify не желательно также использовать для глубокой копии. Например, все функции в объекте приобретут значение null.
@mico6762
2 жыл бұрын
@@webelart понял, спасибо
И для рекурсий желательно сделать предохранитель что мало ли случайно в каком то кейсе оно не вечно херячило
@webelart
2 жыл бұрын
:D Ну там есть по умолчанию 10-100к вызов и всё даже самый стойкий интерпретатор сдастся. Я ещё думала прикольно бы текущие примеры без рекурсии реализовать, как раз чтобы этой границы не было, но надо думать. Рекурсия здесь конечно выглядит более красиво.
@user-rh8jg2fb5t
2 жыл бұрын
@@webelart не ну идея конечно классная , молодец P.S. а вы говорите реторн для return
@mind150
2 жыл бұрын
@@user-rh8jg2fb5t а еще она говорит "нода" ))) и что)) мне кажется, очень мило.
@user-rh8jg2fb5t
2 жыл бұрын
@@mind150 неа, она говорит нодА (ударение на последний слог) я не сразу понял о чем она говорит , но это такое, мелочь
Дипкомпэйр не учитывает что функции сравниваются по ссылке? 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
Подождите я не успеваю
@webelart
2 жыл бұрын
Жми на паузу. Ииии полный вперёд!! ❤️
НЕ совсем понял как открыть папку из терминала в vscode, про code . - команду знаю, а вот как ту папку открыть в которой нахожусь загадка...
@webelart
2 жыл бұрын
Ммм, можно открыть просто через сам vs code: File -> Open Folder. Или ещё есть File -> Add Folder to workspace
Will you be my mentor?
@webelart
2 жыл бұрын
Unfortunately I am not mentor people yet, but may be will think about it in the future ❤️
@magomedaminov4583
2 жыл бұрын
@@webelart Well, I had to try. Thank you for your useful content, I like it!
Приоритет логических операторов это конечно хорошо, но где гарантия шо твой колена такой смышлёный как ты и также читаемость кода как то не очень то, обернуть в скобки много времени не займет ! А также конструкцию с прототипами в хелперах неплохо бы вынести в отдельную функцию
@webelart
2 жыл бұрын
Мне вот кстати наоборот не нравится когда со скобками перебор. Вообще с количеством условий в одном if лучше конечно не перебарщивать в целом. Про вынести, можно конечно, например константу сверху файла объявить, что-то типа const {toString} = Object.prototype; и юзать.
@user-rh8jg2fb5t
2 жыл бұрын
@@webelart ну выносить я бе не советов, инкапсулировать в функции было норм. А на счёт проверок в if есть у меня пример но не слабо нервных он и может даже травмировать
@webelart
2 жыл бұрын
@@user-rh8jg2fb5t Даже страшно представить, что у вас за пример с if 😅😅😅
@user-rh8jg2fb5t
2 жыл бұрын
@@webelart высота 4-5 строк (не помню точно) и длинна всего этого в два екрана (Моник 1920 пикселей ширину). Как же меня передергивало когда я открывал этот файл.....в том проекте были и другие перлы конечно но этот if затмил все
... хоспаде, это штоле жава ???
сложноватенько