Учимся писать глубокий 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

  • @gagogoga794
    @gagogoga7942 жыл бұрын

    Эта девушка несёт свет людям… продолжай в том же духе ))

  • @user-of3yg1me6m
    @user-of3yg1me6m2 жыл бұрын

    Очень полезное виде, вообще все видео на канале просто топ, смотрятся на одном дыхании даже часовые, даже бывает обидно что досмотрел) Ты очень круто преподносишь информацию спасибо за это тебе, главное не останавливайся!

  • @webelart

    @webelart

    2 жыл бұрын

    ❤️❤️❤️

  • @alenache1
    @alenache12 жыл бұрын

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

  • @aleksandrgurnak3911
    @aleksandrgurnak39112 жыл бұрын

    Отлично, спасибо большое!🙂👍

  • @user-kn3ut1sh2o
    @user-kn3ut1sh2o2 жыл бұрын

    Спасибо за полезный контент! (глубокий merge, сравнение объектов и массивов | Уроки JS)

  • @user-mh9pe4zp6l
    @user-mh9pe4zp6l2 жыл бұрын

    Огромное Вам спасибо, это видео помогло мне решить проблему, с которой я 2 дня боролся)

  • @RedShucov
    @RedShucov2 жыл бұрын

    Елена, у Вас очень хорошие видео. Интересно Вас слушать и монтаж хороший.

  • @egoist2956
    @egoist29562 жыл бұрын

    Классное видео. Леночка - ты супер умничка..)

  • @webelart

    @webelart

    2 жыл бұрын

    ❤️

  • @StunIsLoveChik
    @StunIsLoveChik2 жыл бұрын

    Огонь!!!

  • @webelart

    @webelart

    2 жыл бұрын

    😘❤️

  • @biLLie_wiLLie
    @biLLie_wiLLie2 жыл бұрын

    Лена, это было очень глубоко

  • @Ramosok
    @Ramosok2 жыл бұрын

    спасибо!

  • @user-iz9qp7np4q
    @user-iz9qp7np4q Жыл бұрын

    Так всё сложно и непонятно.. Умная девушка.. Побольше бы таких красавиц и жизнь в стране наладилась

  • @ooops4333
    @ooops4333 Жыл бұрын

    Господи почему я не был раньше на неё подписан! Спасибо тебе большое +1 в подписку!

  • @estarosa_light
    @estarosa_light2 жыл бұрын

    Вот и пробили 10 тысяч🥳

  • @webelart

    @webelart

    2 жыл бұрын

    Даааа!!! 😍

  • @mind150
    @mind1502 жыл бұрын

    кайф))

  • @eugenefedoryachenko8793
    @eugenefedoryachenko8793 Жыл бұрын

    На сколько я помню поверхностная копия - это ссылка на объект. Именно ее делает любое копирование обьектов в JS. Вероятно когда Вы меняете result, то меняется и Arr) А для глубокой копии можно использовать метод structuredClone() Поддержка у него пока что средняя

  • @user-te4zh2dz9r
    @user-te4zh2dz9r Жыл бұрын

    Добрый вечер. А видео про backtracking будет?

  • @andreyzhukov2821
    @andreyzhukov28212 жыл бұрын

    Для глубокого копирования объекта можно использовать функция Object.prototype.structuredClone()

  • @webelart

    @webelart

    2 жыл бұрын

    Прикольно, но пока ещё рановато, только только поддержка появляется.

  • @YuriiKratser
    @YuriiKratser2 жыл бұрын

    Не легко Пойду к жене спрошу что она знает про глубокий мердж

  • @webelart

    @webelart

    2 жыл бұрын

    😂😂😂

  • @user-yb5bx2ki4q
    @user-yb5bx2ki4q2 жыл бұрын

    Леночка запишите курс JS с нуля до профи

  • @goojoke3161

    @goojoke3161

    2 жыл бұрын

    Зачем ? Итак много курсов для нулевых. Лучше что-нибудь сложное, похожее на этот урок

  • @mico6762
    @mico67622 жыл бұрын

    Это все, конечно, круто, но разве нельзя использовать просто JSON.stringify() для deepCompare?

  • @webelart

    @webelart

    2 жыл бұрын

    В текущей задаче не получится. Я его упоминала тоже в уроке. Например вот такой кейс JSON.stringify({a: 1, b: 2}) !== JSON.stringify({b: 2, a: 1}). Объекты нам не гарантируют порядок ключей. + Там ещё есть особенности благодаря которым JSON.stringify не желательно также использовать для глубокой копии. Например, все функции в объекте приобретут значение null.

  • @mico6762

    @mico6762

    2 жыл бұрын

    @@webelart понял, спасибо

  • @user-rh8jg2fb5t
    @user-rh8jg2fb5t2 жыл бұрын

    И для рекурсий желательно сделать предохранитель что мало ли случайно в каком то кейсе оно не вечно херячило

  • @webelart

    @webelart

    2 жыл бұрын

    :D Ну там есть по умолчанию 10-100к вызов и всё даже самый стойкий интерпретатор сдастся. Я ещё думала прикольно бы текущие примеры без рекурсии реализовать, как раз чтобы этой границы не было, но надо думать. Рекурсия здесь конечно выглядит более красиво.

  • @user-rh8jg2fb5t

    @user-rh8jg2fb5t

    2 жыл бұрын

    @@webelart не ну идея конечно классная , молодец P.S. а вы говорите реторн для return

  • @mind150

    @mind150

    2 жыл бұрын

    @@user-rh8jg2fb5t а еще она говорит "нода" ))) и что)) мне кажется, очень мило.

  • @user-rh8jg2fb5t

    @user-rh8jg2fb5t

    2 жыл бұрын

    @@mind150 неа, она говорит нодА (ударение на последний слог) я не сразу понял о чем она говорит , но это такое, мелочь

  • @user-cc2lp9tz7r
    @user-cc2lp9tz7r2 жыл бұрын

    Дипкомпэйр не учитывает что функции сравниваются по ссылке? 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

  • @catsapp
    @catsapp2 жыл бұрын

    Подождите я не успеваю

  • @webelart

    @webelart

    2 жыл бұрын

    Жми на паузу. Ииии полный вперёд!! ❤️

  • @mushnikov35
    @mushnikov352 жыл бұрын

    НЕ совсем понял как открыть папку из терминала в vscode, про code . - команду знаю, а вот как ту папку открыть в которой нахожусь загадка...

  • @webelart

    @webelart

    2 жыл бұрын

    Ммм, можно открыть просто через сам vs code: File -> Open Folder. Или ещё есть File -> Add Folder to workspace

  • @magomedaminov4583
    @magomedaminov45832 жыл бұрын

    Will you be my mentor?

  • @webelart

    @webelart

    2 жыл бұрын

    Unfortunately I am not mentor people yet, but may be will think about it in the future ❤️

  • @magomedaminov4583

    @magomedaminov4583

    2 жыл бұрын

    @@webelart Well, I had to try. Thank you for your useful content, I like it!

  • @user-rh8jg2fb5t
    @user-rh8jg2fb5t2 жыл бұрын

    Приоритет логических операторов это конечно хорошо, но где гарантия шо твой колена такой смышлёный как ты и также читаемость кода как то не очень то, обернуть в скобки много времени не займет ! А также конструкцию с прототипами в хелперах неплохо бы вынести в отдельную функцию

  • @webelart

    @webelart

    2 жыл бұрын

    Мне вот кстати наоборот не нравится когда со скобками перебор. Вообще с количеством условий в одном if лучше конечно не перебарщивать в целом. Про вынести, можно конечно, например константу сверху файла объявить, что-то типа const {toString} = Object.prototype; и юзать.

  • @user-rh8jg2fb5t

    @user-rh8jg2fb5t

    2 жыл бұрын

    @@webelart ну выносить я бе не советов, инкапсулировать в функции было норм. А на счёт проверок в if есть у меня пример но не слабо нервных он и может даже травмировать

  • @webelart

    @webelart

    2 жыл бұрын

    @@user-rh8jg2fb5t Даже страшно представить, что у вас за пример с if 😅😅😅

  • @user-rh8jg2fb5t

    @user-rh8jg2fb5t

    2 жыл бұрын

    @@webelart высота 4-5 строк (не помню точно) и длинна всего этого в два екрана (Моник 1920 пикселей ширину). Как же меня передергивало когда я открывал этот файл.....в том проекте были и другие перлы конечно но этот if затмил все

  • @ostrov11
    @ostrov112 жыл бұрын

    ... хоспаде, это штоле жава ???

  • @user-qb6jj4dv6k
    @user-qb6jj4dv6k2 жыл бұрын

    сложноватенько