JavaScript объекты - сравнение, копирование, объединение, деструктуризация, остаточные параметры.

Рет қаралды 9,861

Александр Ламков — Friendly Frontend

Күн бұрын

Пікірлер: 54

@AleksanderLamkov 7 ай бұрын

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

@Vse-po-Faktu 19 күн бұрын

Шикарно ложится на уже хорошую базу. Просто кайфую от понимания)) Хоть и долго к этому шел. Александр, спасибо ! Всем, кто только изучает это все - терпения и практики!

@mishachubenko3394 11 күн бұрын

Згоден з вами !

@OnlyProg-dm9gc 4 ай бұрын

Этот канал - золото. Спасибо!!!

@smotritelyoutube 7 ай бұрын

Cупер, уже начинаются интересные темы!!

@hrzn 5 ай бұрын

просмторел 6 видео подряд и все понял. Прекрасная подача материала!

@andreyboikov 7 ай бұрын

Спасибо) Много нового узнал! Все очень понятно

@Anatoli-bq1pe 5 ай бұрын

Благодарю за классный контент!

@АлексейЦ-ы4я 2 ай бұрын

Спасибо!!! Думал, что знал об объектах все... Оказывается нет

@АлександрСальников-с2ж 3 ай бұрын

Коммент в поддержку, спасибо за урок!

@miwanjaGR 7 ай бұрын

Все круто, узнал для себе много довольно интересной инфы 🤓✌

@Taranenkosemen Ай бұрын

ребятки, лично я долго не мог понять правильного написания синтаксиса, при использовании ключевого слова 'continue' в рекурсии...🤷🏻, хотя и понимал для чего нужна эта манипуляция. Надеюсь мой комментарий спасёт кому-то неопределённое количество нервных клеток :) код должен выглядеть следующим образом: if(areValuesObjects) { if (areObjectEqual(value1, value2)) { continue } else { return false } } то есть: если методы объекта прошли все вышеописанные проверки, то код продолжает своё выполнение, если же нет - останавливается у меня ещё совсем немного опыта в сфере frontend (-а), так что критика принимается) А я, в свою очередь, скажу автору канала большое спасибо за свежий и, действительно актуальный для трудоустройства материал 😊🤝

@TeomunMete 5 ай бұрын

Вы великолепный 😊

@ByTheWay12 4 ай бұрын

8:25 В коде рекурсия возвращает значение boolean, но потом его нужно не сразу через return возвращать ещё раз, а сделать отдельное условие: if(areValuesEqual){ continue; } else { return false; } И теперь получается когда внутренние объекты проверили и если они совпадают, то через continue переходим к следующей итерации цикла для проверки остальных ключей-значений. А если внутренние объекты не совпадают, то возвращаем false.

@AleksanderLamkov 4 ай бұрын

Да, ты прав. Где-то в комментариях ниже об этом уже была дискуссия. И в следующем видео курса про этот момент так же упомянул. Спасибо за внимательность!)

@ByTheWay12 4 ай бұрын

@@AleksanderLamkov Понял. Спасибо за видеоролики, помогают очень сильно заполнить пробелы, но иногда встречаются некоторые ошибки в них и новичкам может быть не особо понятно, а для тех кто уже немного программист эти баги видны и не мешают воспринимать смысл.

@biscvie 7 ай бұрын

Спасибо!

@addowner3491 29 күн бұрын

9:32 цикл for in на данном примере: for(const key in obj1){ obj2[key] = obj1[key] } Почему в obj2 копируется и ключ, и значение? Ведь мы указали [key], что в моем понимании переносит только значение, т.е данные именно после ' : ' Расскажу как я это вижу - сам по себе key копирует только ключ от объекта, выведя в функции for in команду console.log(key), на выходе в консоли мы получаем именно ключ(name) , но не значение, а чтобы вывести и то, и другое потребуется указать не только key, но и [key], команда console.log(key, obj1[key]) . На вашем примере мы использовали для копирования объекта только [key], т.е указали, что во 2 объект пойдут только значения, никак не ключи, но всё прекрасно работает. Почему ?

@AleksanderLamkov 29 күн бұрын

Первая часть инструкции: *obj2[key] =* obj1[key] - ищет в *obj2* свойство по имени *key* и если находит, то вторая часть инструкции: obj2[key] = *obj1[key]* - ищет в объекте *obj1* свойство по имени *key* - берёт его значение - в *obj2* обновляет значение свойства с именем *key* Если первая часть инструкции не находит в *obj2* свойства по имени *key* - в *obj2* автоматически добавится свойство с именем *key* и так же в его значение запишется то, что хранится в *obj1[key]*

@addowner3491 29 күн бұрын

@@AleksanderLamkov Большое спасибо !

@m0dernawphighlights108 3 ай бұрын

Спасибо за ролики! Возникло два вопроса : 1. Когда мы составляли рекурсивную функцию по поверхностному сравнению двух объектов, то вы сказали, что теперь просто сравним значения свойств обоих объектов так как в условии выше мы проверили, что ключи одинаковые. Проблема в том, что мы сравнили длину массивов с ключами, т.е. сравнили именно кол-во ключей, а потом сравнили их значения. Соответственно у меня вопрос - а название самих ключей не нужно сравнивать? Или главное, что кол-во ключей одинаковое и все. Имеется ввиду, что если у нас название свойств будет разное, то это тоже вернет true? 2. Разве в примере с await, поток не будет дожидаться выполнения функции/метода, который мы эвэйтим? Как у нас может вернуться undefined? А так, в целом, спасибо еще раз за уроки и спасибо за ответ заранее!

@AleksanderLamkov 3 ай бұрын

1. Мы ведь наоборот сравниваем, что если количество свойств в сравниваемых сущностях-объектах не совпадает, то сразу делаем вывод, что исходные объекты не идентичны. 2. Да, await будет дожидаться, здесь я ошибся, когда писал этот псевдокод.

@podgorniy.r 5 ай бұрын

Есть ошибка с рекурсией 8:02, так как после проверки вложенного свойства объекта уже не будет проверятся другие свойства, поскольку произойдет завершение исходной функции: if (areValuesObjects) { return areObjectsEqual(value1, value2) } Можно немного исправить: if (areValuesObjects) { if (!areObjectsEqual(value1, value2)) { return false } Благодарю за отличные видео =)

@AleksanderLamkov 5 ай бұрын

Привет! Да, ты прав. Где-то в комментариях под этим видео об этом уже писал. Там не хватает инструкции continue. Через этот способ тоже решается проблема :)

@Zentu-oj6ep 4 ай бұрын

а этот урок обязательный для изучение ?

@AleksanderLamkov 4 ай бұрын

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

@ByTheWay12 4 ай бұрын

А почему на 16:50 будет undefined, если там стоит await и renderUserName вызовется после присвоения значения в переменную userInfo? Возможно тут имеется в виду, что проверка делается для проверки, того, что данные получены такие, какие ожидаем, а не то, что сервер ещё не выполнил проверку.

@AleksanderLamkov 4 ай бұрын

Ты прав. Не должно быть await в этом примере. Я пытался показать пример, характерный для мира реакта, когда мы запрашиваем данные, записываем их в переменную data и в дальнейшем коде, в разметке, обращаемся к этим данным как к не-undefined сущности, хотя в первые доли секунд в data ничего нет.

@ByTheWay12 4 ай бұрын

@@AleksanderLamkov Понял. Про react согласен.

@vehiclesport662 7 ай бұрын

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

@AleksanderLamkov 7 ай бұрын

Привет! Актуальные направления стажировок всегда можно найти на этой странице: internship.vk.company/internship Из открытых по фронту нашел только одну, к сожалению: internship.vk.company/vacancy/885

@addowner3491 29 күн бұрын

пытаюсь по немногу вникнуть , по итогу завис на ситуации const obj1={ name:"буб", age:25, male:true } const obj2={ name:"буб", age:25 } const infa123 = (ob1, ob2) => { const key1 = Object.keys(ob1) const key2 = Object.keys(ob2) if (key1.lenght !== key2.lenght) { return false } return true; } console.log(infa123(obj1, obj2)) Данная штука выводит постоянно в консоль true , почему так происходит?

@AleksanderLamkov 29 күн бұрын

Имя свойства для получения длины массива неправильно написано. length должно быть

@addowner3491 29 күн бұрын

@@AleksanderLamkov Господи , сидел над этим долгое время. Спасибо большое за ответ ! Ваше курсы чудо

@lenyaplay2425 7 ай бұрын

8:48 return сработает слишком рано, надо возвращать только если false, потому что иначе при первом true вернёт true?

@AleksanderLamkov 7 ай бұрын

Привет! Да, ты прав, я ошибся. Спасибо за внимательность! Вместо 42-й строки внутри тела if (areValuesObjects) должно быть так: if (!areObjectsEqual(value1, value2)) { return false } else { continue } То есть мы проверяем, что если сравниваемые объекты НЕ равны, то сразу делаем вывод, что исходные объекты не эквиваленты. В ином случае - переходим к следующей итерации цикла for in с помощью ключевого слова continue.

@SaidKilamatov 3 ай бұрын

dude,he 28 years old and he has 30 years of experience💀

@kirillg-i8i 2 ай бұрын

а как можно попрактиковаться на пройденном материале?

@AleksanderLamkov 2 ай бұрын

Если речь про JS темы до браузера, то посоветую задачки на codewars.

@codermeloman3030 7 ай бұрын

structuredClone?

@AleksanderLamkov 7 ай бұрын

Да, забыл рассказать об этом способе клонирования. Спасибо!)

@demimurych1 6 күн бұрын

информация в видео - есть галюцинация автора, не имеющая оьношения к реальности описанной спецификацией языка.

@AleksanderLamkov 6 күн бұрын

Не спорю. Факт. Кому нужен язык не для применения его во фронтенде - курсы на ютубе не подойдут, лучше сразу обращаться к первоисточнику (к спецификации).

@holod41 29 күн бұрын

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

@AleksanderLamkov 29 күн бұрын

Может стоит к этому уроку вернуться позже? Дать мозгу время переварить предыдущие темы.

@holod41 29 күн бұрын

@@AleksanderLamkov закончил несколько дней назад массивы изучать, дальше объекты. Но пока в голову не залазит. Учусь в it incubatore, ну как учусь… пытаюсь.

@Vse-po-Faktu 18 күн бұрын

Изучая js, массивы и их методы стали для меня бетонной стеной. По отдельности - ночью разбуди - расскажу и напишу. Вместе использовать - хрен. И это было несколько месяцев такой затуп(всем, кому js залетел и залетает с первого раза - искренне рад за вас). Шаг за шагом, из разных источников, переписывая руками, пришло понимание. Это не что-то здец сложное. Просто мозг не готов ещё уложить все по полкам. Не возвращайся к тому, от чего уходишь.

@gabbergabberovich 4 ай бұрын

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

@AleksanderLamkov 4 ай бұрын

Первое, что приходит в голову: второй параметр функции memo из React позволяет прокинуть собственную функцию сравнения пропсов вместо встроенной shallow-функции.

@gabbergabberovich 4 ай бұрын

@@AleksanderLamkov Если учесть на сколько неоднозначен современный JS, внутренняя структура и наследование одного и того же параметра или метода от разных уровней прототипирования от родительских объектов. Сравнивать такие вещи - бред сивой кобылы. Именно по этому скорее всего его и не сделали в нативном джаваскрипте, как это например было реализовано в jQuery через обертки.

@AleksanderLamkov 4 ай бұрын

Смотря что сравнивать. Когда мне нужно было в реакте мемоизировать компонент формы, приходилось вручную сравнивать несложные объекты пропсов вида: { … fields: { field1: 'value', field2: 'value', … } } Сравнить такое собственной функцией сравнения ну очень просто. И проблем от «прототипного наследования» в подобных ситуациях быть не может.