Linked List. Data Structures | Implementation in JS

[@JavaScript_00]

Я очень рад что нашел ваш канал. Спасибо вам.

[@xphnx4085]

Позавчера начал читать "Грокаем алгоритмы", и наткнулся там на упоминание связанных списков. Решил, что на днях поищу что-нибудь о них в контексте использования в JS. А тут такое отличное видео 🙃 Большое спасибо!

[@frontendscience]

Класс! )) Стараемся 🤗

[@xphnx4085]

@@frontendscience Что-то я не понимаю в работе классов... Могли бы в двух словах объяснить, как каждый последующий вызов append перемещает объект с переданным value из tale в head ? Конкретно, не понятен момент, когда после this.tale.next = newNode мы переписываем весь tale назначением this.tale = newNode; а новая нода как-то оказывается в next последнего объекта в head...

[@xphnx4085]

@@frontendscience Переписал на функции-конструкторы, но яснее не стало. Всё так же непонятно, как новые ноды попадают в head, ведь мы всё время работаем лишь с полем tail (не считая создания объекта linkedList) Что от меня ускользает, подскажите 😒

[@xphnx4085]

​@@frontendscience const node = new LinkedNode(value); if (!this.head) { this.head = node; this.tail = node; return this; } else { let current = this.head while (current.next) { current = current.next } current.next = node; } this.tail = node; return this; Вот здесь мне понятно, как новая нода попадает в head. А какой механизм в реализации на видео? Очень хочется разобраться. Простите за назойливость, если что 😶

[@xphnx4085]

Разобрался 😆 Дело в присваивании по ссылке

[@tesohi]

Сергей, большое спасибо. Желаю вам безопасности и свободы! Пусть все будет хорошо у тех, кто сейчас в беде.... тримайтесь!!!

[@NamelessSpirit]

Я щиро дякую за це відео!) Я хоч і пишу не на JS, але пояснюєте ви дійсно зрозуміло) Я передивилась і перечитала вже мільярд інфи. І тільки зараз дійшло!)

[@JavaScript_00]

Спасибо! Я только начал изучать, Связный список.

[@unknownWakeborder]

З'явилась таска, яку треба реалізувати через лінкед ліст, а я ніколи не юзав цей алгоритм... Дуже дякую за крутий контент!

[@TheOutpac]

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

[@frontendscience]

Супер! Очень рады, что наши видео полезны!

[@Drezerak]

Однозначно! На этом канале будет единственный адекватный курс по алгоритмам!

[@demiurgen13]

Волшебство! Только вчера писал реализацию. Теперь закрепим успех просмотром ) Требую продолжения банкета с более сложными структурами!

[@frontendscience]

Ну класс! ))) 🥳

[@TheOutpac]

Хочу отметить высокое качество продакшна самого. Видно большой труд: свет, звук, монтаж, качество картинки, и конечно же юмор) все это в купе делает процесс усвоения как бы менее напряжным и ненавязчивым.

[@frontendscience]

Так и задумывалось! Приятно, что оценили ;) 🎈

[@denichi872]

да приятно смотреть твой контент, простая подача, приятно слушать и материал на уровне@@frontendscience

[@Аннанежная-м8я]

Нравится манера подачи материала, приятно и интересно учиться с вами! Надо посмотреть что еще у вас на канале по теме есть)

[@lostsouls3151]

Вот только закончил "грокаем алгоритмы". Прям магия какая-то!) Ждём новые выпуски про структуры данных и алгоритмы) Лайк не глядя)

[@frontendscience]

Будет обязательно!

[@Noname-i4f3z]

Как же мне не хватало этого видео месяц назад)

[@frontendscience]

Заказывайте новые :) Буду стараться успевать ;)

[@АльфияСаитова-ж4г]

Очень хорошо объяснил, спасибо. Стало понятнее, но все равно очень сложно. Видео очень хорошее, особенно благодаря картинкам стало понятнее, что происходит при перемещении указателей. Огромное спасибо!

[@polskolg]

Месяц назад тыкалась в раздел задач по связанным спискам на leetcode, в итоге пока забросила. после этого видоса собираюсь вернуться и добить тему. спасибо за полезный контент!

[@frontendscience]

Рад, что пригодилось :) мы тоже планируем задачки по связным спискам ;)

[@artemvolsh428]

Видео просто замечательные, смотрю тебя ещё с видео на канале Яндекса!)

[@snowiedigga]

Отличное видео, спасибо, очень полезно.

[@KosTHB1]

Очень круто и понятно. Спасибо

[@moshchynskyy]

спасибо за материал! был бы очень благодарен за видео по остальным структурам данных 🤠

[@anton-vr5xw]

Вауу, прям мои мысли читаете ✨

[@frontendscience]

🪄🧞

[@YaniaRZ]

Спасибо! Отличное видео!

[@ВоинственныйХомяк-к8р]

Сергей, огромное спс! Когда следующие по уровню дин. массивы графа и прочие основы программирования, я лично очень жду!

[@frontendscience]

Поставил в очередь)

[@vladvoloshenko5701]

видео пушка, спасибо)

[@Uncaught_in_promise]

Вчера проходил собеседование, спросили о паттернах. Изучая базовый JS, я паттерны обошел стороной. Может сделаете туториал ?

[@frontendscience]

Есть в планах

[@namebmw8092]

Это на Джуна?

[@redeyes4884]

while (this.head && this.head.value === value) Так цикл выполниться лишь в том случая, если value будет равно первому next.value

[@antiga1000]

Отличное видео! Но вот вопрос - пытался кто-то это всё повторить? И никто не получил ошибку в консоли - ReferenceError: describe is not defined?

[@antiga1000]

Установил jest и всё заработало

[@jamjam3337]

👏

[@uytwq838]

Здравствуйте, подскажите, пожалуйста, с чего начать изучение frontend? Хороши ли книги Джона Дакетта для освоения азов HTML, CSS, JS? К каким курсам в интернете стоит присмореться?

[@megaboy2k]

А что за редактор использовался для js?

[@frontendscience]

webstorm

[@megaboy2k]

@@frontendscience Уж очень на pycharm похож )

[@hondovod250285]

привет! спасибо за видео) что то полезное взял для себя))) Слушай, возник вопрос в процессе практики, сверстал макет и запушил на github pages, и заметил что на мобильных устройствах у которых слабое железо есть подвисания при открытии аккордеон меню, реализация аккордеона на js - элементу добавляем max-height = scrollHeight. Когда тестировал на компьютере или на других телефонах все было отлично) Как быть со слабым железом на телефонах? Забивать на них?)) Просто даже обычный transform: translate() у бургер меню подвисает) Проблема не в коде, я еще заходил на различные сайты с того телефона с которого лагало и там тоже были проблемы, что посоветуешь предпринять для анимаций на сайте для слабых устройств??

[@frontendscience]

Для слабых устройств нужно минимизировать количество анимаций. Но для этого понадобится детект устройства/браузера. Чтобы скармливать разные css’ки. Что же касается scrollHeight, я так понимаю ты апдейтишь высоту при каждом скролл ивенте. Если это так - то лагать будет сильно. В этом случае обычно используется throttle (у нас на канале есть видео про него), но тогда оно будет работать скачкообразно но не будет подвисать само устройство и тут уже надо добавлять css transform. В общем сложно сказать не понимая реализации. Но надеюсь основные идеи понятны.

[@hondovod250285]

@@frontendscience , нет, не при скролле, а при нажатии на само аккордеон меню )) Изначально оно в закрытом состоянии, у них разный контент и я использую в качестве высоты при открытии scrollHeight. Но мне все понятно, спасибо огромное! Буду пробовать))

[@NezNez]

Огромное спасибо за ваш канал! 🫶 У меня вопрос по поводу метода delete: // ... проверка головы списка ... let currentNode = this.head.next // присваиваем след. после head элемент, т.к. head уже поставлен на первый не удаленный элемент if (currentNode !== null) { while(currentNode.next) { if (currentNode.next.value === value) { //

[@NezNez]

сори, вы там потом исправляете это! Вопрос снят)

[@dimeliora]

В insertAfter аргументу prevNode наверное надо дать значение null по умолчанию.

[@frontendscience]

Это обязательный аргумент. Поэтому ему ничего и не назначаем по умолчанию. Мы же не задаем value - по умолчанию. Почему тогда для prevNode надо делать дефолт?

[@denispepper2830]

а в Javascript разве нет чего-то вроде Collection Framework как в Java ?

[@frontendscience]

Нет

[@_renamed_]

А зачем в 21 строке проверяем !this.tail, если и так понятно что если нету head, то это новый пустой список? И зачем в конструкторе ноды this.next = next, если мы при создании новой ноды еще не создали следующую ноду и можно просто null туда записать?

[@xlenchik]

Помогите пожалуйста разобраться в логике Javascript (она ведь должна быть, правда же?) console.log(false==[]); // true console.log([]==true); // false Это логический контекст, пустой массив трактуется как 0 или false или null А теперь оператор if: if ([]) // тоже логический контекст, ожидаю false console.log('y') // но получаю true - output 'y' else console.log('n') Почему так?

[@frontendscience]

есть разница между тем когда просто в if () записываем [] или используем оператор не строгого сравнения ==. при == происходит приведение к числу. и потом сравниваются числа.

[@xlenchik]

@@frontendscience Большое спасибо за ответ. Тогда перефразирую свой вопрос: если пустой массив не является согласно документации falsy-значением, то почему console.log(Number([]) ); выдает 0? не логичнее ли было бы Nan, при том что Number([0]) это 0, Number([1]) это 1 и т.д. Я понимаю, что некоторые вещи просто исторически сложились, это тоже приемлемый ответ. Но для человека, пришедшего из типизированного языка это трудно понять - пустой массив не должен занимать память, это null. В javascript, чтобы не потерять тип array/object, надо где-то хранить служебные данные, поэтому [] не null. Насколько верно мое предположение?

[@user-fm3mt7jj7b]

А куда сбрасывать задачи с собеседования ?

[@frontendscience]

Просто в комментарии под видео. Ссылки ютуб не принимает, поэтому если что-то большое, то можно выложить на кодпен и прислать айди сюда

[@nmatyasov4875]

Если разговор пошёл о связанном списке, то не плохо бы рассмотреть и разворот связанного списка, задачка с собеседований.

[@frontendscience]

Уже готовится такое видео!

[@Computermind11]

У Сергея времени полно - он может позволить себе баловаться какими-то там бессвязными списками! :))) Мы как люди очень занятые пользуемся только массивами! Они и работают быстрее, и, вообще, круче! Хотел скинуть решение суммы трех, но Ютуб опять все затирает, собака...

[@hyphast171]

А кто сказал что массивы работают быстрее? Смотря для каких целей. С помощью списков можно очень быстро удалять или вставлять элемент, нужно всего лишь изменить две ссылки. Если удалять элемент у массива, в худшем случае, если элемент стоит на первом месте, то придется весь массив смещать на одну позицию вперед. У массива плюсом является то, что к элементам можно произвольно обращаться, у списков такого нет, придется итерироваться до тех пор пока не дойдешь до нужного элемента.

[@Computermind11]

@@hyphast171 Да, все верно сказано. Кстати, чтобы удалить элемент из массива необязательно полностью сдвигать. Можно удалить через delete, тогда там останется empty.

[@pavelharelyshau6106]

@@hyphast171 в случае с одномсвязным списком (как в видео) удаление последнего элемента все еще будет O(n)

[@dimaspng]

Спасибо. Если можно, без музыки пожалуйста. Отвлекает. Мы же не на дискотеке)

[@user_k.alex_]

Нихрена не понятно, но очень интересно)

[@boole_cat]

12-14 минута что за структура describe(LinkedList , () => {}) ? функция? , мы ее ранее не объявляли, откуда оно взялось, браузер ругается : "describe is not defined" . Разобрался : автору нужно все таки было упомянуть про использование стороннего Фреймворка Jest , без него ошибки!

[@anton-trofimov]

А зачем было удалять мой комментарий? Что-то плохое в нем? Я просил кого-то объяснить, почему при изменении tail меняется head (кстати, уже разобрался), в видео про это не было, так чем мой комментарий не устроил? Или мб ютуб удалил, хотя там не было ничего запрещенного

[@vladimirvasilev9189]

А можете, плиз, объяснить как это работает (при изменении tail меняется head)?

[@anton-trofimov]

@@vladimirvasilev9189 присваивание по ссылке. Если присвоить хотя бы с использованием спред оператора, то уже не будет работать так

[@ЭзизК]

метод delete не очень понятно)

[@pavelharelyshau6106]

Не надо так в массив значения пушить. Стоит сразу писать какой размер у массива будет. Динамическое измените размера массива весьма затратное в плане производительности, что будет особенно видно на большом объеме данных.

[@leandrmiklashevich297]

Як шкада, што пан Сяргей спыніў выпуск ролікаў (((

[@inqvisitor3722]

не крайний, а последний. Иначе linked list не получится, потому что с переднего края нельзя встать

[@ЮрийШако]

как не печально но я ни слова не понял (((

[@kokoc58]

35 минут говорить про то, чем ни кто не пользуется... ну такое...

[@frontendscience]

«Вы кажетесь профессионалом!» (с) Ну такое….

[@pernik85]

Я не понимаю как this.tail.next = newNode изменяет this.head.next ???

[@Alex-cy1is]

Щас тоже с этим затупил. Не разобрался почему так происходило?

[@pernik85]

@@Alex-cy1is Если разберёшься маякни

[@davranmashrabov5855]

@@Alex-cy1is this.tail и this.head ссылаются на один и тот же объект node! Поэтому изменения в этом объекте будут видный и в head, и в tail!

[@eugenezhdanov-tj3jx]

@@davranmashrabov5855 спасибо за объяснения) я сначала тоже не понял