Урок 13. JavaScript. Все о Map, Set, WeakMap, WeakSet с примерами
HTML-код
- Опубликовано: 25 сен 2019
- Получить профессию Frontend разработчика -
bit.ly/3OEXwnG
Подробнее узнать об обучении в Result School -
bit.ly/3y1ysQJ
Бесплатный курс HTML & CSS - bit.ly/3OqMvqj
Сделать 5 проектов на JavaScript - bit.ly/3bxl930
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Урок 13. JavaScript. Все о Map, Set, WeakMap, WeakSet с примерами
Сложный JavaScript простым языком:
• Урок 1. JavaScript. Чт...
Полезен контент по чистому JS?
да огонь) на практике правильно крайне редко юзаю это) может пора исправлятся
Да!!! Спасибо за видос!
на собеседованиях всегда спрашивают сначала чистый JS
Более чем!
Еще как!
Влад, позволю себе указать на неточность в уроке. Когда ты сравниваешь Map и WeakMap, то проверяешь наличие обнуленных объектов (obj = null) внутри Map и WeakMap через методы get и has. Но в случаях обоих объектов эти методы будут одинаково возвращать undefind и false, соответственно. Тут нет никакой разницы, ведь мы одинакого перестаем получать доступ к ключу-объекту, так как удалили ссылку на него.
Для демонстрации разницы нужно было показывать содержимое самих объектов. В случае с Map ключ-объект будет оставаться внутри объекта Map, тем самым занимая память мертвым грузом, а в случае с WeakMap ключ-объект будет пропадать из [[Entries]], освобождая память от мусора. Это, на мой взгляд, наглядно бы показало разницу.
Нюанс в том, что исчезать из WeakMap объекта обнуленный ключ-объект будет не сразу. Мне пришлось много раз обновить браузер, чтобы увидеть очищенный WeakMap объект.
Об этой особенности ты тоже говоришь, что время, за которое будет удален скам не определено, поэтому отсутствует метод size. И обновление браузера это наглядно показало.
Благодарю за твою работу и желаю и дальше делать упор на качество, не поддаваясь соблазну удариться в инфоциганство, которым и так завален ютьюб. Лучше меньше, да лучше. ИМХО. В этом заключается уникальность в современных реалиях.
Мне кажется, у вас тоже неточность: "В случае с Map ключ-объект будет оставаться.." здесь уже не ключ-объект остаётся, а его значение, ведь вы же сами написали "мы одинаково перестаем получать доступ к ключу-объекту, так как удалили ссылку на него". Ну и то же самое с WeakMap.
Неточность в том, что Влад пытается получить значение для удаленного объекта из WeakMap используя значение null, т.к. именно null он записал в переменную, хранившую ссылку на удаленный объект, а по значению null конечно WeakMap ничего не выдаст, т.к. null не валидный ключ для WeakMap. (к слову с Map такое сделать можно, записав какое-то другое значение по ключу null и в этом случае мы и получим это другое значение). WeakMap не имеет методов size, entries и keys, так что проверить, что удаленый объект действительно был удален из WeakMap не получится.
Похожая ошибка и с WeakSet структурой. Влад удаляет второй элемент из массива, при этом место второго элемента занимает третий элемент. Следовательно, после удаления второго элемента Влад пытается проверить наличие значения третьего элемента из массива, которого там конечно нет, т.к. он его туда не добавлял.
Тоже обратил на это внимание и считаю, что лучше было продемонстрировать содержимое карт. Но мне интереснее было в каком виде в Map остается элемент с обнуленным ключем-обьектом. Нужно понимать последствия этого и как подстраховаться при необходимости использования таких карт со смешанными ключами.
Ребят, вы такие классные, любите сочинения писать. Нет чтобы ссылку на sandbox разместить. Или если ссылки режутся, то просто кусок кода. Но за наблюдение спасибо, я бы пропустил. Это реально ошибка, а не неточность, не знаю чего тут расшаркиваться. И что-то не наблюдаю автора, посыпающего голову пеплом :)
Спасибо. Фактически у вас, Владилен, уникальный контент по JS, за это отдельное спасибо. Успехов во всём).
Влад, огромная благодарность за урок!
Отлично, идём дальше. "дорогу осилит идущий".
Владилен, привет. Отличный урок , спасибо.
программеров хороших немало. но так чтобы смог понятно рассказать единицы. и автор к радости тех кто смотрит это видео таковым как раз является. что дает возможность еще большему числу людей постигнуть программирование и яваскрипт в частности.
Спасибо! Как всегда очень доступно и полезно!
Дай Бог тебе здоровья.
ты топ! делай чаще )) спасибо большое !
Лучший урок по этой теме на ютубе. Спасибо
Благодарю! Объяснено просто и понятно.
Дай тебе Бог здоровья!!!
Огромное спасибо. Не как не мог понять тему, много где смотрел искал а тут сразу все ясно и понятно. Спасибо огромное.
Надо же ) А я как раз сегодня эту тему изучал )
Но за урок спасибо.👍
Хорошо, что в видеороликах нет фоновой музыки, реально бесит
Нравится что ты не опускаешь детали и говоришь подробно как в книжке.
Привет из Дагестана)))
c какого города?
@@user-sj3qt7wu9c Нижние Дагестаны
Фух.. Урок пройден) Спасибо большое!
Спасибо за уроки
Отличные уроки!
Я все время думал, что я хорошо разбираюсь в js, но по видео стало понятно, что есть еще чему поучиться! Спасибо Владилен )
Владилен лучший!
Жду экскурсию про next.js, на мой взгляд было бы интересно, а так с меня лайк, жаль нельзя лайкануть 10 раз))
Почему же, сделайте 10 аккаунтов и лайкайте на здоровье, было бы желание 😉
Спасибо за урок!)
Спасибо за урок!
Как всегда очень информативно и без теоретической нудятины. Спасибо за урок, Владилен. Единственное, что хотелось бы видеть больше - это больше примеров.
Ассаляму Алейкум ! Давно не встречал такой хороший контент. Коротко и ясно. Спасибо большое. Сейчас начал разрабатывать сервисы на Node JS + Postgres Sql для мобильных приложении. Говорят Potgres Sql самый стабильный движок для BigData. Но пока чайник в этом деле. Буду очень благодарен, если сделаешь пару тройку уроков по данной теме. Еще раз спасибо.
отличный урок
интересно было бы увидеть что нибудь по xss либо по jwt
Изучаю сейчас JS по сайту-учебнику. Читал эти map и set - нихера не мог понять. Очень поверхностно дано без углубления.
Нашел твой блог, посмотрел. Вернулся к учебнику, ибо там практические полезные задания и продолжил читать - после твоего видео сразу всё стало понятно!
Дружище, ты крут. Очень хорошая подача с качественным объяснением. Спасибо!!!
Лучи добра тебе в карму.
А можешь сказать, пожалуйста как учебник называется?
@@pavelzakharov4752 спасибо!
@@pavelzakharov4752 как успехи? просто я сам учу js на этом сайте
@@MrJustice друг ты на какой теме? может вместе попробуем объясняя друг другу
@@elmaga4486 нормально. Я уже реакт заканчиваю, пилю всякие мелкие приложухи для портфолио, ищу джунскую работу. Надо хуки да редакс сейчас освоить
Очень классный пример с кэшированием пользователей
Как всегда полезно, сделай урок по дебагу JS
Очень годно. Спасибо
Спасибо за разъяснение
set упрощает жизнь на порядок в плане перебора и сравнения
всегда читаю литературу все вроде ясно и понятно но повторение информации в твоем воспроизведении меняет восприятие и понимание темы все просто рахмет
Полезно!
Спасибо. Все очень хорошо и глубоко раскрыто, примеров бы побольше в проекте бы пусть и небольшом
Будет практика позже)
Заранее лайк )
Number.MAX_SAFE_INTEGER раз спасибо тебе за твой труд Владилен!
Спасибо большое
Я заметил что между прошлой частью и этой у Владилена произошел день рождения)
spasiba!!! vsyo maximalna panyatna
было бы шикарно сделать плейлист полностью по всем темам JS и с большим количеством примеров, почему то большинство авторов делает видео для новичков, потом для продвинутых, а потом разбирают фреймворки, без последовательности (
Спасибо!
Сделай видео по шаблонам проектирования, которые используются в разработке на node js или express или koa
спасибо
Спасибо! Не мог бы ты сделать урок по работе GIT в WebStorm? :)
Очень классно спасибо! Единственно, были досадные ошибки в конце, когда отсутствие элементов в weakmap, weakset объясняется через .has() == false от новых ключей null и от users[1] - Irina, Я выводил в консоль weakmap до и после obj = null он в обоих показывал только один элемент, что странно (было же 2 в начале). добавил задержки через циклы до 1000, стал показывать всегда оба. Приходится только верить что GC действительно их чистит :)
Очень нравится ваша манера подачи материала. Достаточно информативно, и без лишний воды. Видел есть видео 40 вопросов по ангуляру, не думала сделать аналоничное видел по React ?
Есть на канале
На 15:15 для правильного отображения вывода:
console.log(key, val)
Спсибо, теперь еще меньше белых пятен в понимании js
желательно было бы сделать по NodeJS не как сервер, а как простая консольная монолитная программа, с использованием Mysql и минимум всяких сторонних модулей, и как очень желательный бонус будет то чтоб рассказать о то как запускать дочерние процессы, как с ними общаться так как есть как минимум 4 варианта запуска, а вот процесс "общение" очень слабо освещено в материалах.
Успехов твоему каналу!
Тут наверное каждому будет что-то себе почерпнуть, так как "копаешь" не слабо а подаешь материал с лёгкостью !)
Хороший ролик! Только структуры WeakMap и WeakSet называются слабыми, потому что ссылки на объекты-ключи хранятся «слабо», что означает то, что они не предотвратят сборку мусора в том случае, если других ссылок на объект не будет.
спасибо!
Владилен, спасибо за информацию. Единственное WeakMap отслеживает свои объекты-ключи на изменение и полей объекта, так и ссылки на объект, а WeakSet следит только за ссылками и изменение полей объекта-ключа допускаются.
Я только сейчас узнал что назначение переменной значения null не ведёт к разрыву связи с объектом. А чтобы полностью разорвать связь с объектом нужно присваивать undefined вместо null, только в этом случае консоль выведет undefined, что означает что объект был удалён из памяти.
Скорее всего Set отнаследован от Map внутри, я бы так по крайней мере реализовывал, только в качестве ключа нужно использовать значение
Владилен, да ну неправду Вы говорите. Если сделать obj = null, то в WeakMap останется { name: "weakmap" } → "obj data" и на память это никак не повлияет. Ваше утверждение примером, что если проверить по console.log(map.has(obj)) всегда будет false, потому что map.has(null) кроме false никогда ничего другого и не вернет (( Тоже самое с примерами lena = null, достаточно сделать console.log(cashe) и убедится, что все на своих местах ))
Для автоматической перезагрузки терминала в VSCode используйте nodemon
У меня почему-то он не работает. После первой же перезагрузки страницы в бразуере крашится
WeakMap называется weak не потому что у него урезанная функциональность, а потому что WeakMap работает со слабыми ссылками.
Сильная ссылка - ссылка которая, не дает gc удалить какой-то объект, если на него есть хоть 1 сильная ссылка.
Слабая ссылка, напротив, позволяет указывать на объект, не предотвращая его автоматическое освобождение сборщиком мусора.
было бы круто выложить исходники на github.
В свое время купил курс автора по NUXT.js и все бы хорошо но столкнулся проблемой с деплоем приложения на VPS.
Начал разбираться в теме а там гиблый лес: nginx, pm2 и другие радости.
Я конечно понимаю что есть проффесия DevOps но если такого спеца по рукой нет а доделать надо (клиенту не объяснишь что не можешь)?
Хотелось бы увидеть курс по деплою node.js приложения. Можно даже платный, можно даже не полный, но чтобы работало.
Заране благодарен.
P.S. Я задеплоил с помощью npm run generate но это скорее костыль чем решение.
Владилен, кинь криптокошель. Контент очень стоящий. будем донатить на развитие.
ЯД 410013757655670
Или в вк :)
@@VladilenMinin а эфир или бтс. ? так проще)))
@@user-fx8rm4kw2y Думаю, что заведу. Благодарю)
Я не уверен, что при использовании weakmap память очищается после удаления его элементов. Weakmap не отображает удаленные элементы в пределах своей видимости, а не в пределах области всей памяти. Надо попробовать дважды законстантить один из его элементов и посмотреть что будет с константами после очищения weakmap. Думаю, одна ссылка все же останется на обьекте. Наверно лучше применять область видимости, чтобы JS сам подчищал память без всякого обнуления. Поставить фигурные скобки на части кода, и JS поймет где и что почистить.
ответь пожалуйста)
в описании под видео список курсов по Angular 8+, ReactJS, NuxtJS + NodeJS,
вопрос: эти курсы от тебя(т.е если я куплю курс я буду слышать тот же голос и это будешь ты)?
Конечно мои)
В каких случая ключом может быть объект с другими ключами и значениями в обьекте "new Map" и для чего это нужно из опыта?
🖤🖤🖤🖤
Все очень классно, но на 36:18 мы спрашиваем у cache значение по ключу null, логично, что там его нет, мы ведь обнулили Лену :)
Но не важно, смысл понятен.
И еще, правильно понимаю, что set, как и в Java, по сути внутри себя представляет map, но в отличие от Java, где она в значение сует dummy object, set в JS просто дублирует туда значение ключа?
теперь можно назвать переменную Putin и обнулить её)
досмотрел до 31й минуты пока что (смотрю медленно, через паузы, все разбираю сам, пишу свой код, проверяю) ... не понмаю какой смысл делать объект ключем?
может быть расскажете, каким образом это используется в реалности? Почему те же timestamp'ы не добавить в исходный объект/массив, как array['timestamp'] = Date.now();?
Смотрел видео, вспоминал Python 3. Думал все методы с него взяли от Set. Но к сожалению не хватает set.update(other, ...); - объединение, set.intersection_update(other, ...); - пересечение, • set.difference_update(other, ...) - вычитание, set.symmetric_difference_update(other); - множество из элементов, встречающихся в одном множестве, но не встречающиеся в обоих. Это надо было сделать. Явно прослеживается прогресс языка. Пойду посмотрю на js ES6 классы, может человеческое наследование завезли и типы свойств и методов типа privet, public, protected, etc
Это тебе к typescript )
^+Shift+R
Таким образом, чтобы создать Map из обычного объекта (прототип которого не содержит Symbol.iterator), нужно сначала объект превратить в массив, с помощью Object.entries(obj), а уже потом new Map(arrObj)? Правильно ли я понял? Благодарю за отличный урок.
39:16 - суть действий верная, но небольшая ремарка по объяснению:
на 14-й строке мы проверяем наличие не того, что было users[1], а того, что им стало после splice (а изначально было users[2])
No disrespect - смотрю твои ролики не первый день подряд запоем: много пробелов удаётся закрыть.
И вообще контент просто восхитительный: как ты сегодня правильно сказал, никакой воды - всё по делу. Огромное спасибо!
(Просто трудно было промолчать и пройти мимо...)
когда задал константу map как объект класса Map, в консоле появилась ошибка "Uncaught TypeError: Iterator value undefined is not an entry object
at new Map ()". Подскажите пожалуйста, в чем может быть проблема?
Привет, спасибо за урок,
а почему когда я запускаю код в браузере то в console.log()- е у WeakMap не проподает ключ ( обьект который null )
а когда запускаю код в терминале с помощю node-js тогда проподает
Владилен, а в ближайшее время вы планируете создание фреймворка или нет?
Да, планирую создание чего-то крутого на чистом языке. Возможно сразу на ФП
Спасибо за видео!
Правда, у меня возник вопрос с примером про кэш и WeakMap;
Если заменить WeakMap на Map, т.е. let cashe = new Map();
То после операции lena = null результотом работы
console.log( cashe.has(lena) );
все равно будет false, т.е. такой же результат как и с WeakMap
По задумке примера результат должен был быть true, если использовать Map ?
Нет. Что используя Map, что WeakMap, после "удаления" ключ-объекта и вызова метода has у карты, ты ищешь по "null", следовательно он тебе и возвращает false. Разница лишь в том, что в Map поле с этим ключ-объектом и значение по этому ключ-объекту - сохранилось. Но, так как у тебя этого объекта уже нет, получить это значение ты не сможешь. Получается, что у тебя в коде находится сущность, доступа к которой у тебя нет, но память она занимает. От сюда и "утечка памяти". Но, если взять пример с WeakMap, сборщик мусора JS, после удаления объекта (который выступал в качестве ключ-объекта в WeakMap) автоматически очищает это поле из WeakMap. Следовательно, никакой утечки памяти.
А теперь представь, что у тебя таких объектов 10тыс. ---> вот тебе и профит.
Надеюсь ответ еще был актуален)
@@tkachis Спасибо огромное) ответ актуален!
@@tkachis спасибо что кто-то это написал, потому что пример в видео некорректен
А если после присвоения объекту который выступал в качестве ключа null просто вывести содержимое карты console.log(cache) - ничего не очистилось даже если это WeakMap...
Владилен, прикрепляйте, пожалуйста, под видео не ссылку на само это видео - ЭТО БЕССМЫСЛЕННО, а ссылку на плейлист.
Попробую, благодарю
Поддерживаю. А то очень не удобно потом искать эти ссылки. Весьма полезные
Я проверил только что 'Мap' в случае удаления последней ссылки на 'obj' так же как 'Weakmap' остается без ключа и доступа к значению. по сути они в этом плане одинаково работают.
Ребят, подскажите, с чем связана ошибка: ReferenceError: obj is not defined
at Object. (появилась, когда в методе WeakMap задал объект и сделал вызов)?
20:30 окей, а почемубы не добавить поле в обьекты масива users?
Владилен в конце не понял один момент, после использования метод split() на переменой с пользователями, мы хоть и получаем false при проверке через visits.has(users[1]), но если в конце вывести console.log(visits) там всё равно будут присутствовать всё те же два значения как и до метода split(). Почему так ?
в users лежит 3 пользователя, split() удалил одного
Не хочется отвлекать, но вдруг кому-то захочется ответить. Вопрос: получается, что простой коллекции, без доп. функционала, типа хранение только уникальных значений, в js нет, и я должен пользоваться обычным массивом?
вроде норм, а можно уроки организовать на реальных примерах + домашка?
Если кто-то в начале видео не понял и впал в прострацию - поясню:
Для конвертации Объект -> Массив создаём объект со значениями и пустой массив по типу const entries = []
И на оборот при конвертации Массив -> Объект создаём массив из массивов и пустой объект по типу const obj = {}
31:50 че за фигня, в обычном map так же работает. После присваивания объекта к null, у обычного map, так же при вызове map.get(obj) вернется undefined
в WeakMap'е некорректно искать элемент по нулевому ключу, само собой вернется false. по факту, никак не проверить, удалилось GC'м значение из WeakMap'а или нет
Снова Владилен спас. Спасибо) Я уже третие сутки не могу понять что такое new map().delete и тут снова нашел ответы.) Спасибо)))))
есть ли разница между преобразованием в массив через спред и через array.from ?
Нет
6:08 установить nodemon, запускаешь скрипт через nodemon. И вуаля - скрипт срабатывает сразу после сохранения
Может кто-то знает, почему WeakMap все еще не очищен, даже если объект, который был передан в виде ключа был изменен на null? Возможно, в консоли браузера по другому работает GB?
А ничего что после того, как ты объект обнуляешь, обращение к нему вернёт null. Т.е. ты потом делаешь cache.has(null), cache.get(null). Если заменить в примере WeakMap на Map, то вывод не поменяется.
И с WeakSet тоже лажа: после users.splice(1, 1) у тебя в массиве по индексу 1 будет уже не { name: 'Alex' }, а { name: 'Irina' }, которую ты в visits не добавлял
одно время пытались добавить метод Object.observe. но почему-то от него отказались. хотелось бы рассмртреть данную тему. на примере библиотек или полифилов
На канале есть пару уроков по rxjs.
@@djebati2194 я наверное раз десять пересмотрел, хотел вычленить свою тему, это немного другое.
cache.has(lena) === cache.has(null) && console.log('Нет ключа null')
Подскажите, пожалуйста, насколько адекватно юзать эти классы с точки зрения производительности? Все просто и удобно, но писать объект в ключ, потом искать по нему... на мой скромный взгляд довольно ресурсозатратно. Есть ли смысл стараться не злоупотреблять таким сахаром?
На большие объемы данных возможно и нет. Но для локальных ситуаций - вполне
@@VladilenMinin Понятно, спасибо )
по идее в ключ попадает не копия объекта, а ссылка на оный, поэтому достаточно производительно должно быть, производительнее чем string мне кажется, но надо тестить
+
Не очень понятно объяснение WeakSet & WeakMap, потому что если в тех же кейсах их заменить на Map & Set, то результат будет аналогичный, потому что ты тупа стираешь ссылку на данные объекты, и из-за этого он не может их найти. В консоль вывести тоже не вариант, остается верить на слово что их нет )
Nomer 1 master
Не очень понятно зачем нужен map для того чтобы найти время когда последний раз заходил пользователь, разве нельзя это сделать просто как свойство обьекта? В чем тут собственно разница?
например есть задачи, когда мы не можем менять исходный объект. Первое что приходит на ум, если потом эти данные уходят на сервер в JSON и там жестко проверяются на состав полей. тогда добавление поля в объект приведет к ошибке валидации.
Много неточностей в этом видео, как повторение материала сойдет. На том же джаваскриптРу все лучше и детальней описано.
Всем привет, есть проблемка при вызове метода Object.fromEntries(entries)... при вызове через консоль выдаёт ошибку TypeError: Object.fromEntries is not a function. Однако если пользоваться через браузер, то всё отлично отрабатывает. У кого-нибудь была такая проблема и кто как её решил?
Обнови ноду