Пишем полифилы на JavaScript (map, reduce, flat) | Уроки JS

  Переглядів 72,305

Елена Литвинова — Искусство Веб-разработки 🛸

Елена Литвинова — Искусство Веб-разработки 🛸

День тому

Разберём теорию наследования в JS, поймём, что такое полифил и напишем примеры полифилов для методов массива: map, reduce, flat. Протестируем на mocha & chai.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский UKposts: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Поддержать развитие канала: / webelart
🌱Старт урока: github.com/liveldi/myPolyfills
Рекомендуемые видео в уроке:
⭐️ 20 методов массивов в JavaScript: • 20 методов массивов в ...
⭐️ Рекурсия и стек в JavaScript: • Рекурсия и стек в Java...
⭐️ Учимся использовать стек и очередь в JavaScript: • Учимся использовать ст...
00:00 Введение.
01:06 Примитивы и объекты в JavaScript
08:34 Что такое полифил?
11:58 Скачиваем и устанавливаем проект с тестами.
17:25 Пишем полифил метода .map
35:11 Пишем полифил метода .reduce
46:23 Пишем полифил метода .flat
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

КОМЕНТАРІ: 164
@mvlad27
@mvlad27 2 роки тому
Если я первый раз зашёл на этот канал, посмотрев немного ролик и сразу подписался, значит оно того стоит, спасибо! 👍
@bsisow
@bsisow 2 роки тому
Елена, отличный материал и подача! Лайкосик однозначно!
@bogdanmyagkov2601
@bogdanmyagkov2601 2 роки тому
Я в восторге, спасибо Вам!
@eugeneweber4282
@eugeneweber4282 2 роки тому
Уникальнейший контент, браво! Подписался.
@elizavetakonstantinova8661
@elizavetakonstantinova8661 2 роки тому
Большое спасибо алгоритмам youtube что я Вас нашла, Вы просто замечательная! И очень нравится то, что у Вас есть видео как для новичков, так и для продолжающих, спасибо Вам!
@webelart
@webelart 2 роки тому
Спасибо за тёплые слова, очень приятно! Рада, что контент нравится! ❤️
@egoist2956
@egoist2956 2 роки тому
Мегаполезно! Ты, как всегда, большая молодец..)
@webelart
@webelart 2 роки тому
Спасибо! 😘❤️
@user-oy5hd9mv5s
@user-oy5hd9mv5s 2 роки тому
Вас приятно слушать!!!!!Большое спасибо!!!!!
@kuzinpeter3365
@kuzinpeter3365 2 роки тому
Спасибо за хороший урок. 👍
@SnegurkaBu
@SnegurkaBu 2 роки тому
Спасибо за очень интересный контент.
@amsterdenko9854
@amsterdenko9854 2 роки тому
Спасибо большое. Масса новой информации.
@gagogoga794
@gagogoga794 2 роки тому
Было интересно посмотреть, спасибо! Вы молодец 👍🏻
@webelart
@webelart 2 роки тому
Спасибо! 🤗
@user-rk1lb6zc3z
@user-rk1lb6zc3z Рік тому
Прекрасное объяснение, которое я больше нигде не смог найти❤Огромное спасибо!
@webelart
@webelart Рік тому
@snowiedigga
@snowiedigga 2 роки тому
Благодарность автору за прекрасный материал!
@webelart
@webelart 2 роки тому
❤️
@DmitryIlyasov
@DmitryIlyasov Рік тому
Отличное объяснение, спасибо.
@user-up6xd8cv4x
@user-up6xd8cv4x Рік тому
прекрасное объяснение, подписался на вас после курса по typescript
@danildemchenko6004
@danildemchenko6004 2 роки тому
Елена, спасибо большое за такой крутой и полезный контент! Как всегда очень интересно Вас смотреть:)
@webelart
@webelart 2 роки тому
❤️🌺
@Grigoren_com
@Grigoren_com Рік тому
ооочень круто! спасибо)
@theoty-js-react
@theoty-js-react 2 роки тому
Елена, Вы настолько интересно преподносите материал, что у меня просыпается желание учиться а не прокрастинировать. Огромная благодарность за качественный контент! Всем рекомендую, кто уже знаком с объектами, понимает как копировать объект, занет про методы у объекта, ну и хоть немного имеет представление о js)
@catsapp
@catsapp 2 роки тому
Да, посмотрел только начало. Подача хорошая.
@AndreyKudinov
@AndreyKudinov 2 роки тому
Лайк не глядя!) Но позже обязательно посмотрю)
@catsapp
@catsapp 2 роки тому
+1
@rodioni661
@rodioni661 2 роки тому
вот это канал, только сейчас ютьюб показал его мне, подписка
@alenache1
@alenache1 2 роки тому
привет, классно рассказываешь, удачи в развитии канала)
@AntonioModer
@AntonioModer 2 роки тому
программирование от девушки как бальзам на душу, как полезное с кайфовым
@divansimdrive
@divansimdrive 2 роки тому
Все понятно, спасибо.
@webelart
@webelart 2 роки тому
😘❤️
@pitbrest
@pitbrest Рік тому
На курсах в заданиях codewars попалась задачка по собственной реализации map, сам не смог, то что нашел в сети не понимаю до конца, но тут кажется именно то что надо и на понятно языке, благодарю Вас !!!!
@Gerlinda137
@Gerlinda137 18 днів тому
rs school?)
@orcsamuro9687
@orcsamuro9687 2 роки тому
Топ контект. Лайк, подписка
@user-qu5ff6dw8h
@user-qu5ff6dw8h Рік тому
Огромное спасибо за видео, очень помогло!!!
@webelart
@webelart Рік тому
Пожалуйста!!!!😘
@igorafonkin2648
@igorafonkin2648 2 роки тому
Для меня JS - побочка от от основной работы. Занимаюсь разработкой устройств на МК и периодически к ним надо веб-морды писать. Материал очень интересный, может быть даже получится применить в своих проектах. Спасибо!
@dimualdos
@dimualdos Рік тому
Класс!
@Arkadz.
@Arkadz. Рік тому
Безумная барышня! Годно!
@dvdrelin
@dvdrelin 2 роки тому
Знание в массы! лайк однозначно только нюанс. принято сокращать вложенность (так легче читать), да и к тому же логика правильная проговаривается на 17:53, что 'если существует, то ничего не делаем', то самым логичным способом проверить будет конструкция вида if(Array.prototype.myMap) return; и далее уже, реализация полифила...
@webelart
@webelart 2 роки тому
Спасибо! Про сокращение, да так обычно лучше выглядит. Но в текущем случае после пойдут на одной вложенности полифилы для reduce и flat поэтому return не получится.
@Evgeniy19856
@Evgeniy19856 2 роки тому
Молодец!
@alexup7437
@alexup7437 2 роки тому
Хороший контент, приятный голос. Удачи!
@webelart
@webelart 2 роки тому
Спасибо! 😘
@saxa2956
@saxa2956 2 роки тому
Сегодня в первые тебя нашел, крутой контент. Лайк, подписка, режим ждуна :D
@user-dq5yx3cq3f
@user-dq5yx3cq3f 2 роки тому
Подписался. Спасибо
@TheKwadriga
@TheKwadriga 2 роки тому
С детства болею такой болезнью: прежде чем прочитаю мануал, сначала изобрету свой велосипед. Уверен, если бы мне где-нибудь понадобилось рекурсивная развёртка массива, я бы просто сел и написал рекурсивную развёртку - это не очень сложно, а рекурсии это всегда приятно, как немножко пивка выпить после того, как выпил водки. А оказывается, рекурсивная развёртка массива уже есть и называется "flat". Спасибо, вот правда - сам бы никогда не додумался загуглить. То же самое с reduce. :)
@vovakolesnikov4114
@vovakolesnikov4114 Рік тому
Спасибо за ролик, познавательно! Получилось немного переделать myReduce. Цикл может всегда начинаться с нулевого элемента, для которого initialValue по умолчанию будет равно 0. Еще условие для проверки является ли callback функцией, кажется, можно убрать, потому что в случае, если callback не будет функцией, то его вызов и без доп. условий закончится ошибкой TypeError. if(!Array.prototype.myReduce) { Array.prototype.myReduce = function(callback, initialValue) { if(!(this instanceof Array || this instanceof String)) { throw new TypeError(`Array.prototype.myReduce was called with wrong type ${this}.`); } // Параметры по умолчанию не работают в IE, поэтому: let accumulator = (initialValue) ? initialValue : 0; for(let i = 0; i < this.length; i += 1) { accumulator = callback(accumulator, this[i], i, this); } return accumulator; } } Кстати, в тесте Array.prototype.myReduce.call('test', (acc, value) => { acc[value] = value + 1; return acc; }, {}) Результатом будет объект {t: 't1', e: 'e1', s: 's1'}, потому что первый ключ с буквой "t" перезапишется последней "t".
@primuspares4462
@primuspares4462 2 роки тому
Че проверяем то?) доступно, спасибо.
@veresivan
@veresivan 2 роки тому
Голос приятный) видосик залипательный. Много воды, не хватает чётких определений краткости изложения.
@NeoLab95
@NeoLab95 2 роки тому
Спасибо за материал!) Очень рекомендую поставить Quokka и Wallaby, жизнь проще будет в разы :)
@webelart
@webelart 2 роки тому
Рада, что контент понравился. По возможности посмотрю что это за инструменты такие❤️
@enslit
@enslit 2 роки тому
В целом, все хорошо. Спасибо за старания и контент. На мой, субъективный взгляд, Вам можно поработать над техникой DRY. Например в тестах дублируются колбеки, массивы. Так же, например, в реализации метода myReduce, одинаковое условие написано дважды. Не придираюсь, просто обратил внимание и решил поделится мнением
@webelart
@webelart 2 роки тому
Спасибо! Надо посмотреть ❤️
@mikhailprigorodov3272
@mikhailprigorodov3272 2 роки тому
Молодец, успехов! П. С. Если бы я так писал, то не написал бы и 10% всего кода.
@dimashforseagull2925
@dimashforseagull2925 2 роки тому
ого ничего себе канал вырос
@user-zs8gf4zj7i
@user-zs8gf4zj7i Рік тому
Вы просто богиня, ваше объяснение лучшее, что я смог найти. Нашел вас совсем недавно, когда искал для себя информации по теме рекурсии и именно вы помогли мне ее понять🥰. Но хотел бы задать маленький вопрос, какая разница между console.log и console.dir?
@webelart
@webelart Рік тому
Спасибо! :) console.dir более подробный вывод даёт. Я обычно его использую, когда нужно посмотреть методы функции, например. console.log распечатает просто функцию, а .dir покажет что внутри.
@rodioni661
@rodioni661 2 роки тому
Елена, офигеть! Вы тоже из Твери? УТро открытий... мне нравится подача, тема канала, да ещё и Вы когда-то тоже блуждали в этом городке... очуметь :) а теперь в Лондоне. Наконец нашёл того, с кого можно брать пример :)
@webelart
@webelart 2 роки тому
Ого!! 😍 Да, тоже из Твери, 2/3 жизни по факту там прожила.)) Рада видеть на своём канале земляков! Успехов Вам, всё получится! Тверь - отличный город и очень скучаю, это навсегда часть сердечка и моя родина. В общем крепко обнимаю!! 🤗
@rodioni661
@rodioni661 2 роки тому
@@webelart спасибо! Всегда взаимно! ПРочитал ещё как штудировали грамматику через Галицинскую... у меня тоже лежит книга, когда-то также открыл, увидел кучу упражнений на артикли, и закрыл :D. Но ваши посты как-то приободрили, да и последние события заставляют серьёзнее отнестись к выбору жизни. Иногда просто хорошо, что существуют те или иные люди, и большая удача найти их. Впереди весна и лето, отличное время, чтобы снять мишуру депрессии и активнее заняться изменением жизни. В бой, вперёд и с песней... потом и с пенсией :) Have a nice day! или как там у вас говорят...) Будем на связи.
@webelart
@webelart 2 роки тому
@@rodioni661 Thank you! Have a nice day too! ❤️
@gardenliken
@gardenliken 2 роки тому
Ура, что-то свежее, а не 2х летней давности
@JavaScriptcher
@JavaScriptcher 2 роки тому
Могу сказать, что на собесах частенько любят поспрашивать написать полифил цикла forEach или reduce
@user-tx5sr2lt6z
@user-tx5sr2lt6z 2 роки тому
forEach?
@user-tx5sr2lt6z
@user-tx5sr2lt6z 2 роки тому
И там метод, а не цикл
@user-qu5xj4no5q
@user-qu5xj4no5q 2 роки тому
method - метход? это что-то новенькое =)
@anaduhovny3421
@anaduhovny3421 Рік тому
Hi, Why call method needed for reduce and not needed for map?
@aid4982
@aid4982 Рік тому
А в console.dir видно полифилы после глобального объявления?
@u-kob
@u-kob 2 роки тому
Здравствуйте. Может где-то этот вопрос уже звучал, и я не увидел, так что спрошу: в связи с ожидаемой блокировкой Ютуба в России, Вы не планируете создать канал на Рутубе?
@webelart
@webelart 2 роки тому
Пока предлагаю подождать. Меня спрашивали пару раз, буду ли что-то делать. Возможно напишу пост в телеграме по этому поводу. В целом посмотрю кто, что думает. Вижу, что люди переживают.
@andreyevanton
@andreyevanton 2 роки тому
здравствуйте! это тут делают вепрь-разработчиков?
@Sjarguk
@Sjarguk Рік тому
Вельмі дапамагло мне гэта відэа, спадзяюся і яшчэ дапаможа. Стаўлю палец і падпісваюся на аўтара, а яшчэ дзялюся спасылкай!
@igorl5133
@igorl5133 2 роки тому
Пример как написать flatten=> const flatten=(arr,depth)=>arr.reduce((sum,el)=>Array.isArray(el)&&depth>0?[...sum, ...flatten(el,depth-1)]:[...sum, el],[])
@webelart
@webelart 2 роки тому
Огнище!! В одну строчку! 👍🏻
@AEF23C20
@AEF23C20 2 роки тому
а можно по старинке в пять строчек а юзер это всё точно увидит?))))) а если юзер не увидит то какая к чорту разница? и да, ваш однострочник парситься будет сильно дольше, а значит он хуже чем примитивный но сильно понятный для движка пятистрочник зачем это всё?))
@webelart
@webelart 2 роки тому
​@@AEF23C20 Здесь же есть некоторая тема. В целом тут можно похоливарить :)) Разница есть, ведь мы же стремимся вырасти классными программистами, технологии сейчас усложняются, чтобы это всё понять, нужно понимать разные конструкции и разбираться. Можно привести аналогию с английским языком. В целом допустим вы дошли до уровня intermediate, вы можете говорить, понимать, работать, зарабатывать и выполнять свои задачи. Но если при этом вам будет не доступна богатость языка, мы же любим восхищаться людьми которые круто презентуют себя, какие-то продукты, могут поддержать любую беседу, эрудированные. Ещё говорят, когда человек начитанный. Согласитесь это же круто? Особенно это также круто может помочь в продаже и заработке денег, если мы деньги воспринимаем как общую ценность. Так и тут в нашей профессии программиста, мы изучаем алгоритмы, особенности языка, в том числе и тонкие особенности, чтобы иметь богатый словарь выражения и написания программ. Плюс здесь ещё есть всякие балансы между кодом и пользователем. Если совсем забивать на код, архитектуру, то в какой-то момент его расширять станет слишком сложно, будет тратиться много времени. Также и в код не стоит совсем уходить, иначе будет наделал, всё предусмотрел, а кому это нужно... не понятно :) И про парсинг, то что написали, здесь тоже есть балансы. Нужно считать время и приводить цифры. Я пока на практике не замечала, чтобы reduce прямо тормозил. Но опять же зависит для какого устройства пишите и абсолютно возможно, что для каких-то приложений даже такие оптимизации будут крайне важны. Со своего опыта (работа в Яндексе с высокой нагрузкой, в Loveholidays, тоже довольно высокая нагрузка), могу лишь сказать, что такие конструкции языка это микро заморочки и не оказывают никакого влияния на статистику, однако кеширование при запросах вот это да, в том числе и страниц и частей кода. Поэтому от задачи лучше исходить и применять соотвествующие подходы. ❤️
@AEF23C20
@AEF23C20 2 роки тому
​@@webelart "В целом тут можно похоливарить :)) Разница есть, ведь мы же стремимся вырасти классными программистами, технологии сейчас усложняются, чтобы это всё понять, нужно понимать разные конструкции и разбираться." а давайте) разница есть только для юзера, потому что это всё делается только для юзера, а вовсе не для меня и не для вас классный программист определяется только одним - сколько процессорных тактов сожрёт его программа, и сколько эта же программа загадит винт - а более программист вообще ничем не определяется, это при прочих равных конечно же вы напишете одну программу, она сожрёт условные 2м тактов и 200кеша, я напишу программу она сожрёт 1м тактов и 50 кеша всё) на этом все попугаи и заканчиваются, потому что всё иное - палнейшая ничего не значащая ерунда "Но если при этом вам будет не доступна богатость языка, мы же любим восхищаться людьми которые круто презентуют себя" вы не путайте) хороший программистский язык определяется с точностью данаабарот - минимальным кол-вом "слов" вообще то, а богатость достигается стандартными библиотеками и прочими фреймворками и даже пусть синтаксическим сахарком, только это всё языка не касается вовсе "И про парсинг, то что написали, здесь тоже есть балансы. Нужно считать время и приводить цифры. Я пока на практике не замечала, чтобы reduce прямо тормозил." так а дело не только в тормозах, потому что батарейка если я юзаю старый двигун он точно однопоточный и это хорошо, а вот нынешние двигуны многопоточные и это плохо, и если вы запускаете манструозные нынешние вундервафли, то они парсятся/транслируются/компилируются сразу в несколько потоков, а это неизбежно приводит к значительному оверхеду и да - оно работает быстрее, так оно и жрёт как не в себя зачем мне грузить манструозную библиотеку на мегабайт каторая разбежится на 3 потока выжрет всё до чего дотянется, закешируется мегабайтом на винт [это тоже трата энергии], если проще всё абсолютно то же самое по старинке написать в 50 строчек абсолютно примитивного скрипта, не париться и не парить юзерские железяки? "могу лишь сказать, что такие конструкции языка это микро заморочки и не оказывают никакого влияния на статистику, однако кеширование при запросах вот это да, в том числе и страниц и частей кода." у меня когда то был интернет мегабитный и страницы загружались влёт, а щас оптика и они тормозят притом что комп ессно более менее на кор5 10400 и это не помогает конечно же послушайте, когда то были темплейты, если вы помните хотя вряд ли, те самые xml/xslt-темплейты, так вот мир пошёл не туда, когда от них отказался и да, мир отказался от того что бы xml-ки с трансформациями передавать юзеру напрямую, а вместо этого всё это отдали на откуп скриптовым программистам, что и привело к ужасу и кошмару браузер должен следить сам за кешами, никак не программист - это же путь вникуда чёрт побери, и предельно простое кеширование кода было и оно было прекрасно потому что ничего не ело и быстро работало кешировать же можно xml-ки с трансформациями прям у юзера, и поверх этого кешировать макеты страничек а оно так и было абсолютно без применения скриптов вообще, и всё это делалось браузером само и где это всё? а скрипты в данном случае вообще зачем?? ужас... ужас...
@webelart
@webelart 2 роки тому
@@AEF23C20 Ооо! Вот это вы тут написали! Надо ещё переварить, попозже перечитаю, возможно с чем-то поспорю. Но, мне нравятся ваши мысли. Снимайте тоже видосики, рассказывайте! Я с удовольствием посмотрю! 🔥
@user-rh8jg2fb5t
@user-rh8jg2fb5t 2 роки тому
А шо за нодА? И ещё орнул ножек модуль
@mody-pq8kd
@mody-pq8kd 4 місяці тому
Сейчас бы полифилы писать с использованием const, let и spread syntax😄
@webelart
@webelart 2 місяці тому
Полифилы на то и полифилы, они должны работать в старых браузерах.
@CELTRIX88
@CELTRIX88 2 роки тому
Привет. Не понял как прошел тест на строчку. у меня 'test' instanceof String -> false
@webelart
@webelart 2 роки тому
Крутое замечание. Я не обратила на эту вещь внимание. instanceof работает c инстансами классов.т.е. будет работать если строку объявить как new String('asdfsdf'), так это будет instanceof String. Причём typeof на этой строке будет object. Если вызвать typeof 'literal string' === 'string', то мы получим string. Но есть прикольная тема, в тестах я вызываю строку через метод call. Array.prototype.myMap.call('asdfasd', ...) и в качестве this передаю простую строку, но внутри функции этот this уже становится строкой-объектом, как будто строка была передана таким образом new String('asdfsd') и собственно всё отрабатывает верно. Теорию по этой теме не смогла найти, почему так. Возможно это относится к теме, когда мы начинаем работать с примитивными типами, например вызывать методы первоначально создается обертка new String, после уже достается метод и после расчеты и возврат нового значения. Возможно здесь также если примитив передаётся через this, то this всегда должен быть объектом и поэтому создаётся обертка. Кстати проверила также вызов функции через call со строкой, числом и булевым значением function f() {console.log(typeof this, this)} f.call('12312') f.call(1231) f.call(true) Заметьте что печатается класс String, Number, Boolean Если вызвать с null и undefined то мы получаем объект window в качестве this.
@meskirian
@meskirian 2 роки тому
'code .' в консоли откроет vscode в текущей директории
@zodchiygigas6098
@zodchiygigas6098 2 роки тому
Не сущности, типы. Типы!
@dim_zp6470
@dim_zp6470 2 роки тому
Елена, скажите какого уровня программист должен уметь это делать?
@shnextv1217
@shnextv1217 2 роки тому
жабаскриптер уровня любителя
@user-is3yh5ik6t
@user-is3yh5ik6t 2 роки тому
А для чего делать type guard для проверки, что полифил вызывается на массиве, если он записывается прямо в прототипы массива? Как может произойти вызов не на массиве?
@enslit
@enslit 2 роки тому
В js возможно все
@user-is3yh5ik6t
@user-is3yh5ik6t 2 роки тому
@@enslit тогда нужно ещё добавить проверку, что этот код запускается как js код 🙂
@FrameMuse
@FrameMuse 2 роки тому
Всё верно, это не возможно и автор видео не объясняет почему это не так, просто говорится что ВОЗМОЖНО - поэтому сделаем проверку. Хотя по факту это нигде кроме массива вызвать нельзя, даже если операться на информацию из начала видео.
@webelart
@webelart 2 роки тому
Я же привожу в видео пример как это можно сделать, через методы функции call, apply и bind. Например, Array.prototype.map.call('12312', (value) => {....}) Даже в тестах примеры с call прописаны, смотрите внимательно. ;) Раньше такие вещи пользовались популярностью. Особенно, когда берёшь список node из html, это не настоящий массив по факту, у него нет всех методов массива и можно было вызывать методы через такие хаки. Сейчас для списка нод мне больше нравится Array.from(nodeList).
@user-is3yh5ik6t
@user-is3yh5ik6t 2 роки тому
@@webelart Тогда сор, не заметил.
@musicjob3928
@musicjob3928 2 роки тому
Вы похожи на Эмили Блант.
@catsapp
@catsapp 2 роки тому
А можно написать полифил для boolean чтобы заменить его на logic? Потому что булеан в честь английского математика Буля, но это не имеет отношение к логике
@user-tx5sr2lt6z
@user-tx5sr2lt6z 2 роки тому
Нельзя. Если хочешь чисто для себя - добавь через global.Logic = Boolean. В проектах так не делай
@catsapp
@catsapp 2 роки тому
@@user-tx5sr2lt6z Да я набросил
@FrameMuse
@FrameMuse 2 роки тому
boolean - это тип, а Boolean это конструктор, ты можешь что угодно сделать с Boolean (даже удалить), а вот с типом ничего сделать нельзя.
@catsapp
@catsapp 2 роки тому
@@FrameMuse If( type === "logic") { type = 'boolean'}
@nepridumal5307
@nepridumal5307 2 роки тому
Почему очень многие веб-программисты пользуются макОС. Есть ли какое-то преимущество или только субъективные: дизайн и бренд ?
@webelart
@webelart 2 роки тому
Конечно есть :) Вообще на мак я давно перешла потому что виндовс не была нормально приспособлена для разработке. А именно не было нормальной консоли. И помимо этого возникало кучу багов при установке различных библиотек, языков. Переход у меня случился в 2012 году, я тогда была новичком и начала погружаться в Бэкенд на Ruby on rails. И при его установке вылетало просто куча ошибок, это можно было пофиксить, но уходило кучу времени реально. Я тогда перешла linux, т.е. многие программисты переходят если не на мак, то на linux. На Ubuntu и там установка этого же Ruby on rails занимала буквально пару минут, т.е. представляете вообще без ошибок всё гладко. Почему ушла с linux, потому что он эстетические мне не очень нравился, но система хорошая. А мак ос красивая визуально была :) Плюс на винде меня бесили постоянные обновления о которых тебя вообще не спрашивают, ты буквально выключаешь ноут и всё, следующее включение может быть минут 40 из-за обновления. И какие-то проги открывались довольно долго, например фотошоп тогда. Но я понимаю здесь вероятно мощностей не хватало. В общем на маке в 2012 году фотошоп отрывался очень быстро :))) Ну а с тех пор так как-то и осталась на Mac os и в компаниях часто предлагают Mac os либо linux.
@nepridumal5307
@nepridumal5307 2 роки тому
@@webelart Спасибо за подробный ответ.
@user-rh8jg2fb5t
@user-rh8jg2fb5t 2 роки тому
С реторна тоже ржал
@ThisIsFray1
@ThisIsFray1 2 роки тому
зачем в консоли браузера? попробуй Run js
@user-ij8sn3sr6z
@user-ij8sn3sr6z 2 роки тому
а куда делся ваш сайт?
@webelart
@webelart 2 роки тому
Вроде всё на месте webelart.com/. Но я его не всегда в описание добавляю и последнее время не так часто выкладываю туда новую информацию. В шапке канала, если что всегда доступен :)
@catsapp
@catsapp 2 роки тому
Никогда не любил полифилы, но придется
@grind-t
@grind-t 2 роки тому
Никогда не думал, что полифилы нужно учиться писать. При этом ЧАС. Откройте гугл, наберите запрос и получите ответ за пару минут.
@webelart
@webelart 2 роки тому
В видео разбираются примитивы и объекты, что такое полифил, почему не стоит расширять любыми методами массив, и также в ручную создаём три полифила. Это требует времени. Для создания видео, я использовала как теоретические знания, так и свой опыт. И Обучение любого человека также происходит по разному. Найти материал, который усвоится тоже задача. Особенно если тема новая, не знакомая и есть проблемы с пониманием синтаксиса. Взять документации, да хоть примеры полифилов, то понять их довольно не просто, особенно с бинарными сдвигами есть примеры. Я старалась изложить информацию подробно приводя различные примеры, покрывая где-то синтаксис JavaScript, поясняя, при это не усложняя само решение, также ещё в видео показала примеры тестов на chai и mocha и тоже про них немного рассказала. Посмотрите видео, возможно для себя тоже что-то новое и интересное узнаете. ❤️
@fedoresko
@fedoresko 2 роки тому
Спасибо, господу, что дал нам ES6, который уже похож на нормальный язык программирования. А "полифилы" и прочая стремная фронтендерская дрянь, костыли и хаки - гори в аду. )
@everemchuk
@everemchuk Рік тому
Так только после того как напишешь хоть один свой полифил поймешь как JS работает под капотом.
@gulind
@gulind 2 роки тому
все хорошо, но полифиллы не написаны )) просто функции, которые расширяют прототип массива (а у map отсутствует второй параметр)) ps. как правило внутри полифилла не идет проверка на тип, только на необходимые параметры ( .length + .hasOwnProperty для каждого элемента, чтобы было понятно, что он определен у конкретного объекта, а не унаследован) вам на подумать: Array.prototype.map.call({length: 2, 0: 1}, console.log)
@webelart
@webelart 2 роки тому
Спасибо за комментарий. Кстати да, я не проверила на массивы подобные объектам, хорошее замечание. Про то, что не идёт проверка на тип, проверила ещё с boolean значением, в реальности возвращает массив. Т.е. скорее всего действительно проверку на типы нужно опустить. Получились больше такие железные методы. :) Справедливости ради, не пробовала на map и reduce все протестировать и изначально сделала допущение, что можно только строки и массивы. И если писать полифил целиком и полностью, то нужно всё предусмотреть.
@gulind
@gulind 2 роки тому
@@webelart забыл попросить ) - пожалуйста, получайте значение length до начала итерации, потому как если во время выполнения кода length будет меняться - ваш цикл никогда не закончится. Array.prototype.map = function(callback, thisArg = undefined) { const { toString, hasOwnProperty } = Object.prototype; if (toString.call(callback) !== '[object Function]') throw new TypeError(`${callback} is not a function.`); if (this === globalThis) throw new TypeError(`.map() called on null or undefined.`); if (thisArg !== undefined) callback = callback.bind(thisArg) const { length: n = 0 } = this; const result = new Array(n); for (let i = 0; i < n; i++) { if (hasOwnProperty.call(this, i)) { result[i] = callback(this[i], i, this); } } return result; }
@webelart
@webelart 2 роки тому
@@gulind Смотрите как я вас промотивировала написать полифил! Огнище! 😍 И спасибо, что тоже шарите знания! ❤️
@webelart
@webelart 2 роки тому
​@@gulind Также пофиксила немного ваш код, чтобы не псевдо, а запускаемый: Array.prototype.map = function (callback) { if (this.toString.call(callback) !== '[object Function]') { throw new TypeError(`${callback} is not a function.`); } if (this === undefined || this === null) { throw new TypeError(`.map() called on null or undefined.`); } const len = this.length; const result = new Array(len); for (let i = 0; i < len; i++) { if (Object.prototype.hasOwnProperty.call(this, i)) { result[i] = callback(this[i], i, this); } } return result; }
@webelart
@webelart 2 роки тому
Мне понравилось, что вы null и undefined уточнили, правда это скорее проверка не с globalThis (я так поняла это вы имели ввиду window, или в ноде global) а с null и undefined. Еще то, что массив результата сразу с длинной объявили, что будет являться также оптимизаций: мы сразу занимаем нужное нам место.
@user-sp1vi7fg2u
@user-sp1vi7fg2u 2 роки тому
Войтивайти ?
@catsapp
@catsapp 2 роки тому
Вайнот вайнот?
@user-sp1vi7fg2u
@user-sp1vi7fg2u 2 роки тому
@@catsapp Та я шучу ) Сам занимаюсь этим года 3 где-то
@catsapp
@catsapp 2 роки тому
@@user-sp1vi7fg2u ми ту
@cradleofkaschenko2057
@cradleofkaschenko2057 2 роки тому
А разве полифилия не является уголовно наказуемой?
@webelart
@webelart 2 роки тому
😂😂😂 Что? Где? Когда был принят закон?
@niknuklas
@niknuklas 2 роки тому
Привет я люблю js кстате у меня 7500 подписчиков, мы с вами каналы -близнецы хех
@JavaScriptcher
@JavaScriptcher 2 роки тому
#1
@AlexGabber
@AlexGabber 2 роки тому
а бабель на что?
@webelart
@webelart 2 роки тому
В уроке-то фишка не в том, чтобы библиотеку использовать, а в том чтобы посмотреть как это можно сделать самому. Согласна, что в основном сейчас редко сам пишешь полифилы в реальном коде. Но тема во-первых может пригодиться на собеседованиях, а во-вторых улучшить понимание основ JavaScript. ❤️
@theoty-js-react
@theoty-js-react 2 роки тому
@@webelart
@AEF23C20
@AEF23C20 2 роки тому
всегда и как обычно, один вопрос - ЗАЧЕМ? всё прекрасно работает на скриптах 15-летней давности, ага на том самом жаваскрипте которому столетвабед, кторый ничего не вешает, который не измеет загоризонтных зависимостей, у которого есть только то что нужно и ничего лишнего и тд и тп зачем это всё?)
@mityaikowalsking875
@mityaikowalsking875 2 роки тому
тот же вопрос
@biLLie_wiLLie
@biLLie_wiLLie 2 роки тому
установи quokka и tabnine - хватит мучаться
@Deletedeletedelete
@Deletedeletedelete 2 роки тому
Удалил табнайн из-за подвисания vscode при работе с крупным проектом
@Sylar7891
@Sylar7891 Рік тому
Почему вы использовали циклы? Разве смысл этих методов не в том что они вызывабтся рекурсивно?
@webelart
@webelart Рік тому
Почему вы так решили?
@krampos9253
@krampos9253 2 роки тому
Структура данных - функция....
@alexgood875
@alexgood875 2 роки тому
Хочу подписаться на ваш канал. Вам нужно пройти тест: Спецоперация или Война?
@AEF23C20
@AEF23C20 2 роки тому
вы не прошли тест потому что у прогера всегда больше вариантов, чем те что есть и да, ответ очевиден - и не спецоперация и не война, идите к чорту и с тем и с другим - это третий вариант, а есть ещё например четвёртый - и вы идите к чорту, а есть ещё и пятый - а вас чертей когда всех перестреляют уже? а есть и шестой... да да, их этих самых вариантов много у меня, потому что я программист ахаха!
@alexgood875
@alexgood875 2 роки тому
@@AEF23C20 Может ты просто ещё школьник безграмотный?
@user-fc3gh1rb7w
@user-fc3gh1rb7w 2 роки тому
шарписта как всегда бомбит)) зашел только из-за привлекательного автора.
@user-oc1bh7sf3c
@user-oc1bh7sf3c 2 роки тому
woman programming?
@Maxim9575
@Maxim9575 2 роки тому
Полифилы лучше писать в соответствии со спецификацией, так вы точно не промахнетесь с поведением, да и тесты при таком подходе не нужны будут.
@webelart
@webelart 2 роки тому
Где-то промахнулась? :) Про спецификацию я опиралась на developer.mozilla.org, там довольно полное описание поведения методов + даже есть раздел с полифилами, не на всех методах, но есть. Тестировать свой код нужно всегда, мы же полифилы ручками пишем и как разработчики можем допустить ошибку в реализации, поэтому тестировать важно либо вручную, либо автотестами, последние удобнее в перспективе. ;)
@Maxim9575
@Maxim9575 2 роки тому
@@webelart я не смотрел полностью видео (поэтому не знаю есть ли ошибки у вас), увидел в рекомендациях, было интересно посмотреть. Ну а в целом эти методы не нуждаются в полифилах у них достаточно хорошая поддержка во многих браузерах. Насчет тестирования спорить не буду - это важная часть разработки. Но как я говорил выше, глядя на спецификацию, не придется пытаться вспомнить или писать кучу множественных проверок под разное поведение, так как сама спецификация и рассказывает об ошибках. P.S Опираться лучше на tc39.es/ecma262, а не на справочник mdn.
@webelart
@webelart 2 роки тому
@@Maxim9575 Изучение того как написать полифилы: 1. Требуется на собеседований. И например reduce довольно часто спрашивают. 2. Для понимания основ JavaScript. Оба этих пункта важны. Спецификация от ecma script официальная довольно насыщена фактами и лично я не очень люблю понимать методы по ней. И даже если открыть тот же Array.prototype.map, то там буквально несколько предложений, я вновь предпочту мозилу, либо более человеческую документацию. А дальше цель, что лучше и для чего? Решение написано и кажется ничего не упустила. Задача выполнена. Значит всё отлично. Ваши аргументы больше из разряда чайка-менджмента.
@Maxim9575
@Maxim9575 2 роки тому
​@@webelart 1) Ничего общего с реальностью написание данных полифилов не имеет, так как они просто не нужны, эта штука имеет чисто академический характер. Времена эксплорера уже практически канули в небытие, и написание полифилов тоже будет отмирать. Конечно написание каких-то важных функций в виде полифилов будет, но уже не так часто. 2) Для понимания основ js, изучать нужно базовые принципы механизмов языка, а эти вещи хорошо описаны в спецификации ecma262. В противном случае это все понимание эфемерное. Спецификация подробно описывает, то как работает язык, и именно поэтому я рекомендую писать полифилы, опираясь на спецификацию, а не на мозиллу, которая не является стандартизацией языка. Некоторые методы действительно сложны в понимании, но Array.prototype.map в понимании не вызывает трудностей. Что дальше? Это уже ваш выбор что дальше. Я высказал свою точку зрения, которая основывается на спецификации. А касательно ваших решений - ваше дело, вам нравится да пожалуйста. Мне-то какая разница, я не преследую цель вас наставить на путь которого я придерживаюсь. P.S Обижаться не стоит, чайку-менеджмента оставьте себе :)
@webelart
@webelart 2 роки тому
​@@Maxim9575 Я вам написала пункты 1-2 где может пригодиться. Если вам метод map знаком и вы знаете теорию, то не значит что все знают. Можете тоже снять видео и рассказать своё видение. А тренировку полифилов на мой взгляд лучше начинать с наиболее простого метода. У меня довольно большой опыт работы с JS, а также опыт собеседований и по своему опыту могу точно сказать, как вам удобно и понятно усваивать информацию, так и нужно это делать. Можно так, можно по-другому, ни тот, ни другой способ не является лучшим. Но в рамках каждого человека может являться более удобным и понятным, js я начинала вообще на русском языке учить, т.к. английский был практически на нуле. И ничего выучила, выросла и построила карьеру во множестве компаний. Сейчас живу и работаю в Лондоне и тоже хорошо зарабатываю. Это значит что моя реальность и мои подходы в обучении работают. Вы же даже недосмотрев видео делаете рекомендации что и как лучше. Опять же ваша система ценностей - это нормально. Но зачем опускать мою? Это называется обесценивание. И такие вещи вы вероятно со многими людьми из своего окружения прокручиваете в том числе и с самим собой. Надо делать так как делаю я и правильно делать именно так. И не я к вам на видео пришла менеджерить ваши подходы обучения и представления информации.
@hohlovich
@hohlovich 2 роки тому
С точки зрения развития и объяснения работы - отлично. Но использовать es6 для написания полифила, ну такое :)
@webelart
@webelart 2 роки тому
Я признаюсь не догадалась как заюзать меньшую версию js… функции map, reduce кажется уже с es5 идут. Можно конечно было в текущем примере nodejs древний какой нибудь взять, не уверена что либо тестирования на нем бы заработала…. 🤔Если только тоже меньше версию ставить. В общем интересная задача, как уменьшить версию js 😃
@sasniykun3829
@sasniykun3829 2 роки тому
Че их создавать-то учиться? В доке все написано.
@MrRadmir123
@MrRadmir123 2 роки тому
Много воды, и болтовни по типу "а давайте посмотрим". Видео на целый час, но фактического контента без воды на 10-20 мин.
@webelart
@webelart 2 роки тому
В видео воды нет, от слова совсем. Я делаю много пояснений и вводных в тонкости JavaScript и ещё про тесты рассказываю и поясняю. Если вам не нужно столько пояснений, то это не значит, что не нужно другим. А вот в вашем комментарии много обесценивания, всё не так, да не эдак, очень по детски.
@MrRadmir123
@MrRadmir123 2 роки тому
@@webelart Для кого как. Может если для новичков которые только начинают изучать это подойдет, но тем кто уже знает основы и нужно только главное как мне.
@webelart
@webelart 2 роки тому
@@MrRadmir123 Т.е. это у вас фетиш такой? Ходить по источникам интернета и обесценивать контент, если вам всё понятно? Тяжёлая у вас однако работа... Но каждый занимается любимым для себя делом :)
@webelart
@webelart 2 роки тому
@@MrRadmir123 Однако я замечу для вас, будете продолжать писать под моими видео х**ню, я вас в бан добавлю и уже не сможете мне задавать вопросы, когда действительно будет что-то непонятно и нужно будет объяснить. А я обычно всем своим подписчикам помогаю по возможности. Поэтому выбор за вами. ❤️
@hennadiikhudolieiev2198
@hennadiikhudolieiev2198 Рік тому
консоле, метход, нодьэ модулес… Очень режет слух подобная транслитерация английских слов. Произносите слова правильно 🧐 В целом контент 👍
@webelart
@webelart Рік тому
Если вам режет слух, то всегда можно обратиться к врачу. Рада, что контент понравился ❤️
@user-tp4wc9xv5s
@user-tp4wc9xv5s 2 роки тому
Устал слушать "соответственно".
@webelart
@webelart 2 роки тому
😂😂 моё слово паразит.
@kirillpavlovskii8342
@kirillpavlovskii8342 2 роки тому
Благодарю , приятный голос и объяснения тоже
Разрабатываем ToDo лист на React + TypeScript + Zustand со сборкой на ViteJS | Уроки JavaScript
1:50:13
Елена Литвинова — Искусство Веб-разработки 🛸
Переглядів 64 тис.
Почему все тупят на массивах - ошибки учителя
12:53
WebDev с нуля. Канал Алекса Лущенко
Переглядів 27 тис.
Анна Трінчер - Бар за баром (Official Music Video)
02:38
Анна Трінчер
Переглядів 1,6 млн
ВИРУСНЫЕ ВИДЕО / Мусорка 😂
00:34
Светлый Voiceover
Переглядів 6 млн
Genial gadget para almacenar y lavar lentes de Let's GLOW
00:26
Let's GLOW! Spanish
Переглядів 36 млн
Функция reduce на примерах. Решаем задачи на reduce в javascript
17:21
JS ACADEMY – Влад Грибенников
Переглядів 22 тис.
Алгоритм бинарного поиска на JavaScript
18:00
Елена Литвинова — Искусство Веб-разработки 🛸
Переглядів 8 тис.
Методы массивов в JS   forEach, find, findIndex, filter, map, reduce
31:49
ВебКадеми | Юрий Ключевский
Переглядів 7 тис.
Чем Шойгу и его министерство провинились перед Путиным?
37:42
Подкасты Медузы / Meduza Podcasts
Переглядів 719 тис.
CSS заменит JavaScript? WTF?!?!
9:47
Как пройти в IT?
Переглядів 60 тис.
Вселенная и Специальная теория относительности.
3:51:36
ЗЛОЙ АНАЛИТИК ВСЕЛЕННОЙ.
Переглядів 6 млн