Linked List. Data Structures | Implementation in JS

2024 ж. 20 Мам.
29 262 Рет қаралды

Привет, друзья. Вы давно просили рассказать не только про алгоритмы, но и про структуры данных. И сегодняшним выпуском мы начинаем серию видео, посвященных именно теме Структур данных (Data Structures). И начнем мы с такой структуры данных, как Связный список.
Связный список - одна из базовых структур данных, которая сейчас не часто встречается в повседневной жизни, особенно в работе фронтендера, но понимание которой позволит вам легче разобраться с другими более сложными структурами данных, такими как бинарные деревья, графы и пр. Поэтому начинаем мы именно с нее.
В связном списке все данные хранятся линейно - один элемент за другим. Каждый элемент списка (нода) содержит в себе поле value, в котором хранятся данные, и поле next, в котором хранится ссылка на следующий элемент.
В этом видео мы с вами разберемся, что же такое связный список, а также создадим свою реализацию его методов на javascript.
⏱ Таймкоды:
00:00 Интро
00:24 Что такое Singly Linked List
01:17 Что такое Doubly linked list
01:35 Зачем нужна эта структура данных
02:51 Структура связных списков
03:48 Пишем реализацию Linked List Node
05:09 Пишем реализацию класса Linked List
05:37 Создаем метод append
09:09 Создаем метод toArray
10:54 Создаем метод toString
12:05 Пишем тесты на append
15:39 Создаем метод prepend
17:20 Пишем тесты на prepend
18:36 Создаем метод find
20:17 Пишем тесты на find
21:16 Пишем тесты на delete
25:02 Создаем метод delete
29:54 Пишем тесты на insertAfter
32:26 Создаем метод insertAfter
34:10 Сложность получившихся методов
35:04 Заключение
Music: Appreciate Ptushkin for inspiration.
👍🤩 Будем благодарны за поддержку нашего канала на Патреоне: / frontendscience
---
Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями.
Подписывайтесь на наш канал: bit.ly/fs-ytb
---
Присоединяйтесь к нам в соцсетях:
FB: / frontendscience
Instagram Сергея Пузанкова: / puzankovcom
Заходите на наш сайт: frontend-science.com/
#datastructures #linkedlist

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

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

    @TheOutpac@TheOutpac2 жыл бұрын
    • Так и задумывалось! Приятно, что оценили ;) 🎈

      @frontendscience@frontendscience2 жыл бұрын
    • да приятно смотреть твой контент, простая подача, приятно слушать и материал на уровне@@frontendscience

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

    @xphnx4085@xphnx40852 жыл бұрын
    • Класс! )) Стараемся 🤗

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

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

      @xphnx4085@xphnx40852 жыл бұрын
    • ​@@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@xphnx40852 жыл бұрын
    • Разобрался 😆 Дело в присваивании по ссылке

      @xphnx4085@xphnx40852 жыл бұрын
  • Нравится манера подачи материала, приятно и интересно учиться с вами! Надо посмотреть что еще у вас на канале по теме есть)

    @user-kn2ou2pu3e@user-kn2ou2pu3e Жыл бұрын
  • Однозначно! На этом канале будет единственный адекватный курс по алгоритмам!

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

    @TheOutpac@TheOutpac2 жыл бұрын
    • Супер! Очень рады, что наши видео полезны!

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

    @demiurgen13@demiurgen132 жыл бұрын
    • Ну класс! ))) 🥳

      @frontendscience@frontendscience2 жыл бұрын
  • Очень круто и понятно. Спасибо

    @KosTHB1@KosTHB12 жыл бұрын
  • Отличное видео, спасибо, очень полезно.

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

    @NamelessSpirit@NamelessSpirit Жыл бұрын
  • Я очень рад что нашел ваш канал. Спасибо вам.

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

    @moshchynskyy@moshchynskyy2 жыл бұрын
  • Спасибо! Отличное видео!

    @user-tk7qv9rv2c@user-tk7qv9rv2c2 жыл бұрын
  • З'явилась таска, яку треба реалізувати через лінкед ліст, а я ніколи не юзав цей алгоритм... Дуже дякую за крутий контент!

    @unknownWakeborder@unknownWakeborder3 ай бұрын
  • Как же мне не хватало этого видео месяц назад)

    @user-ed8eb6cx7o@user-ed8eb6cx7o2 жыл бұрын
    • Заказывайте новые :) Буду стараться успевать ;)

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

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

    @lostsouls3151@lostsouls31512 жыл бұрын
    • Будет обязательно!

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

    @artemvolsh428@artemvolsh4282 жыл бұрын
  • видео пушка, спасибо)

    @vladvoloshenko5701@vladvoloshenko57012 жыл бұрын
  • Спасибо! Я только начал изучать, Связный список.

    @JavaScript_95@JavaScript_952 ай бұрын
  • Вауу, прям мои мысли читаете ✨

    @anton-vr5xw@anton-vr5xw2 жыл бұрын
    • 🪄🧞

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

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

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

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

    @user-cu4gm2km8s@user-cu4gm2km8s2 жыл бұрын
    • Поставил в очередь)

      @frontendscience@frontendscience2 жыл бұрын
  • 👏

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

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

    @BMikel@BMikel2 жыл бұрын
    • Есть в планах

      @frontendscience@frontendscience2 жыл бұрын
    • Это на Джуна?

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

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

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

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

    @NezNez@NezNez Жыл бұрын
    • сори, вы там потом исправляете это! Вопрос снят)

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

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

    @antiga1000@antiga10002 жыл бұрын
    • Установил jest и всё заработало

      @antiga1000@antiga10002 жыл бұрын
  • В insertAfter аргументу prevNode наверное надо дать значение null по умолчанию.

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

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

    @nmatyasov4875@nmatyasov48752 жыл бұрын
    • Уже готовится такое видео!

      @frontendscience@frontendscience2 жыл бұрын
  • а в Javascript разве нет чего-то вроде Collection Framework как в Java ?

    @denispepper2830@denispepper28302 жыл бұрын
    • Нет

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

    @pavelharelyshau6106@pavelharelyshau61067 ай бұрын
  • Нихрена не понятно, но очень интересно)

    @user_k.alex_@user_k.alex_ Жыл бұрын
  • Спасибо. Если можно, без музыки пожалуйста. Отвлекает. Мы же не на дискотеке)

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

    @boole_cat@boole_cat Жыл бұрын
  • Помогите пожалуйста разобраться в логике 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') Почему так?

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

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

      @xlenchik@xlenchik2 жыл бұрын
  • А что за редактор использовался для js?

    @megaboy2k@megaboy2k2 жыл бұрын
    • webstorm

      @frontendscience@frontendscience2 жыл бұрын
    • @@frontendscience Уж очень на pycharm похож )

      @megaboy2k@megaboy2k2 жыл бұрын
  • А куда сбрасывать задачи с собеседования ?

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

      @frontendscience@frontendscience2 жыл бұрын
  • как не печально но я ни слова не понял (((

    @user-bq5mb5rf6x@user-bq5mb5rf6x Жыл бұрын
  • метод delete не очень понятно)

    @user-te9ci1tx4x@user-te9ci1tx4x Жыл бұрын
  • не крайний, а последний. Иначе linked list не получится, потому что с переднего края нельзя встать

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

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

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

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

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

    @leandrmiklashevich297@leandrmiklashevich2973 ай бұрын
  • 35 минут говорить про то, чем ни кто не пользуется... ну такое...

    @user-mu2lr9zc7d@user-mu2lr9zc7d2 жыл бұрын
    • «Вы кажетесь профессионалом!» (с) Ну такое….

      @frontendscience@frontendscience2 жыл бұрын
  • Я не понимаю как this.tail.next = newNode изменяет this.head.next ???

    @pernik85@pernik852 жыл бұрын
    • Щас тоже с этим затупил. Не разобрался почему так происходило?

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

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

      @davranmashrabov5855@davranmashrabov5855 Жыл бұрын
KZhead