Урок 11. JavaScript. Генераторы. Symbol iterator, for of

Поделиться
HTML-код
  • Опубликовано: 2 дек 2024

Комментарии • 144

  • @zmeygorynych5684
    @zmeygorynych5684 3 года назад +56

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

    • @shamilmammadov8246
      @shamilmammadov8246 2 года назад +9

      Всеми любимый async…await использует под капотом генераторы.

    • @zmeygorynych5684
      @zmeygorynych5684 2 года назад

      @@shamilmammadov8246 Спасибо)

  • @VladilenMinin
    @VladilenMinin  5 лет назад +62

    Вы просили генераторы
    В этом видео разберем, как они работают)

    • @АбдулазизМаннопов-э4щ
      @АбдулазизМаннопов-э4щ 5 лет назад

      а про регулярные выражения тоже будут?
      и про деплой накст приложения в фаербэйс

  • @ХиомиМиПад
    @ХиомиМиПад 4 года назад +16

    Timecodes:
    0:04 - Generator
    11:14 - for...of
    12:35 - [Symbol.iterator]

  • @__alexfox__
    @__alexfox__ 5 лет назад +17

    Так это-же аналог yield return из шарпа! Владилен, благодаря тебе, штуки, которые казались сложными и непонятными становятся простыми и приятными в понимании! Ты делаешь обалденные ролики! Спасибо, бро!

  • @КиселевСергей-ъ1о
    @КиселевСергей-ъ1о 3 года назад +2

    удобная штука для создания тестовых данных. например этот код создает массив из случайных 10 чисел от 0 до 1000
    function* olala(n){
    for (let i = 0; i < n ; i++){
    yield ~~(1000*Math.random());
    }
    }
    var a = [...olala(10)];
    console.log(a);

    • @GeorgyDev11111
      @GeorgyDev11111 2 года назад +1

      Можно и обычной функцией
      function app(n,arr = []){
      while(n > 0){
      arr.push(Math.round(Math.random() * 1000));
      n--;
      }
      return arr;
      }
      console.log(app(10));

    • @КиселевСергей-ъ1о
      @КиселевСергей-ъ1о 2 года назад

      @@GeorgyDev11111 можно и так, да

    • @podpalmoi
      @podpalmoi 3 месяца назад

      @@КиселевСергей-ъ1о Имхо бесполезная функциональность для вебразработки. Такое чувство, что это придумали специально для кодварсов.

  • @МаксимНырков-у6г
    @МаксимНырков-у6г 5 лет назад +48

    круто! осталось найти, где применить)

    • @denpulokas592
      @denpulokas592 4 года назад +5

      В redux-saga например

  • @pitermelnyk619
    @pitermelnyk619 5 лет назад +116

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

    • @TheSmilewind
      @TheSmilewind 4 года назад +18

      Генератор позволяет пройтись по большому списку не загружая весь список сразу, а лишь по одному элементу за раз.

    • @yakut54
      @yakut54 4 года назад +5

      ага... ещё бы придумать такое место, где без генераторов ну прям совсем не обойтись ))

    • @oliverreviews8496
      @oliverreviews8496 4 года назад +2

      @@TheSmilewind ага, еще бы просто взять итерируемый объект сделать и выйдет тот же генератор. Только полностью ручками написанный. Конечно понятно, что для упрощения ввели в язык, но можно легко без них обойтись

    • @grommaks
      @grommaks 4 года назад +1

      Babel использует для создания классов :) можно глянуть во что превращается транспилированный код.

    • @oliverreviews8496
      @oliverreviews8496 4 года назад

      @@grommaks Речь шла про генераторы как про синтаксический сахар, а не про Babel. Это транспилятор, итак знают

  • @shturmovik8284
    @shturmovik8284 2 года назад +5

    Единственный человек, который не ставит ";" в конце строки

  • @lumeaceaiuluisrl6343
    @lumeaceaiuluisrl6343 4 года назад +4

    Владилен, Вы один из немногих, кому можно смело ставить лайк до просмотра.

  • @zubrdens
    @zubrdens 2 года назад +8

    Мне кажется, что лучше объяснять от задачи. И поскольку любая задача решается разными способами, показывать, почему конкретная задача решается оптимальнее, к примеру, с помощью генераторов. Но всё равно лайк )

  • @bugiman55
    @bugiman55 Год назад +2

    благодаря вашему видео понял наконец принцип работы генератора. Спасибо Вам!

  • @ВИКА-г3о9р
    @ВИКА-г3о9р 4 года назад +2

    const str = 'Hello my friend, how\'re ur doing?'
    const str2 = [...str]
    function* name() {
    for(let i = 0; i < str2.length; i++){
    yield str2[i]
    }
    }
    const str3 = name()
    можно и так

  • @ОтецВалерьян-ф2в
    @ОтецВалерьян-ф2в 2 года назад +14

    В перерыве между серенами учусь. очень круто обьяснил! Спасибо!

    • @boyywnkobe
      @boyywnkobe 2 года назад +1

      теж

    • @podpalmoi
      @podpalmoi 3 месяца назад

      @@boyywnkobe Бежать надо было, походу вас там всех до 16 планируют в окопы отправить.

    • @boyywnkobe
      @boyywnkobe 3 месяца назад

      @@podpalmoi проти чуми такої як ти - залюбки!

  • @vecejlo
    @vecejlo 5 лет назад +5

    Крутые лекции, очень хорошее и понятое изложение, как новичкам, так и практикующим лишним не будет, однозначно! Хочу внести предложение на темы, web worker, buffer, shadow dom, темы классные, но раскрывают как правило не очень, а для пытливых умов, твой стиль изложения самое то!

  • @СанчоПанчо-к4м
    @СанчоПанчо-к4м 5 лет назад +4

    Спасибо, не знал о таком способе написания функций, в смысле что где gen(n=10) перед этим нет function ввело в ступор малость:)
    И насколько помню, ключевая разница от обычной функции с return это экономия памяти, хотя чуть медленнее

    • @VladilenMinin
      @VladilenMinin  5 лет назад +4

      Это равносильно записи
      const iter = {
      gen: function() {}
      }
      Обычный упрощенный ES6 синтаксис

  • @eugenerubel7898
    @eugenerubel7898 4 года назад +35

    Пока не понял как использовать на практике 😒

    • @prohsi2131
      @prohsi2131 2 года назад +1

      Ну есть мысль что эт можно для анимации какой-то поэтапной юзать

    • @r8cdf
      @r8cdf Год назад +1

      Наверное можно попробовать асинхронность победить - типа next

  • @dmytroNaholiuk
    @dmytroNaholiuk 5 лет назад +2

    Красота! Можно будет флексануть знаниями, если будут спрашивать на собеседовании

    • @VladilenMinin
      @VladilenMinin  5 лет назад +4

      Для собеседования есть отдельный ролик)

    • @dmytroNaholiuk
      @dmytroNaholiuk 5 лет назад

      @@VladilenMinin благодарю за ваш труд

  • @АлексейМохров-е9н
    @АлексейМохров-е9н 2 года назад +1

    Здесь также можно было бы рассказать про LexicalEnviroment и [scope], ибо не сразу было понятно откуда у возвращаемой функции next() доступ к i и n переменным. А в остальном все супер конечно!

    • @volodymyrdoskochinskiy5032
      @volodymyrdoskochinskiy5032 2 года назад

      Тут абсолютно обо всём надо было бы рассказать - почему генераторы, какие задачи решают, асинхронные генераторы (с примером своей имплементации async / await), for await of и делегация (он даже этого не затронул, хотя это основа генераторов). Это бесполезный урок

    • @awenn2015
      @awenn2015 Год назад

      @@volodymyrdoskochinskiy5032 во во, я про генераторы знал но хотел понять для чего они, какое у них практическое применение, так и не увидел

    • @dariavarenka
      @dariavarenka 6 месяцев назад

      про замыкания рассказывалось в 3 уроке, так что откуда доступ у next понятно. А вот как работает let of iterator, не вызывая каждый раз next заново, не понятно

  • @chessclub92
    @chessclub92 2 года назад +2

    Хорошо что есть видеоролики, а то бывает ничего не понимаешь читая lerarnJavaScript. спасибо!

  • @AsVit
    @AsVit 4 года назад +1

    Спасибо за урок!!!

  • @warm3840
    @warm3840 3 года назад

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

    • @danilx6239
      @danilx6239 Год назад

      ты в 2 предложения уместил больше смысла, чем автор в своём 20минутном видео )

  • @cat_ashere
    @cat_ashere 4 года назад

    Что заметил. При создании генератора через function* он выводит значение до крайнего, убирая крайнее. Т.е. например: 1, 2, 3 ... 10 и с переходом на следующий цикл, если например наша n = 11, он говорит undefiend, done: true. С самонаписанным генератором ситуация другая. Он выводит список полностью и уже переходе на следующее значение выдает undefiend, done: false.

    • @libertariancom
      @libertariancom Год назад

      Может трабл в том, как ты прописываешь цикл for?

    • @cat_ashere
      @cat_ashere Год назад

      @@libertariancom вот это вброс через почти 3 года. Я уже не помню. Да и переехал на другой язык

    • @libertariancom
      @libertariancom Год назад

      @@cat_ashere Куда переехал?

    • @cat_ashere
      @cat_ashere Год назад +1

      @@libertariancom Dart + Flutter

  • @mila4308
    @mila4308 Год назад

    Супер объяснение, мое восхищение 👍 также присоединяюсь к комментам выше, хочется понять где лучше использовать на практике

  • @djebati2194
    @djebati2194 5 лет назад +1

    Спасибо! Не знал о таком. Когда пользовался for of, преобразовывал объект с объектами из return функции. Это намного упростит внешний вид, и не выглядит как костыль

  • @АлександрМелянюк-ц9ю

    Владилен, спасибо!!!

  • @tarzeronone7274
    @tarzeronone7274 4 года назад +2

    js не люблю, но послушать было интересно
    четко, подробно и по делу рассказано, примеры тоже понравились, спасибо

  • @A_A_A182
    @A_A_A182 Год назад +1

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

  • @КонстантинКоренев-й9к

    Огромное спасибо за Ваши уроки, с Наступающим 2022 годом ! ))))))))))

  • @ЕвгенийПатрогин
    @ЕвгенийПатрогин 4 года назад +2

    Отличный канал.понятный контент!Спасибо!!!

  • @RewCSharp
    @RewCSharp 11 месяцев назад +1

    Спасибо за урок!

  • @cobwowcobwow6331
    @cobwowcobwow6331 5 лет назад +4

    Спасибо! Клевые у тебя уроки по javascript.

  • @nargizgasanova6222
    @nargizgasanova6222 2 года назад

    cпасибо

  • @ИванПетров-з7у2п
    @ИванПетров-з7у2п 3 года назад

    Комментарий для продвижения видео!!!

  • @iNikelas
    @iNikelas 3 года назад

    Спасибо!

  • @ryzhovalex
    @ryzhovalex 3 года назад +1

    Не очень понятно, почему пишем [Symbol.iterator](n=10) {...}. Почему он в квадратных скобках в этом примере? Мы же просто хотим определить его для итерации как функцию в этом примере?

  • @goldis205
    @goldis205 5 лет назад +2

    Круто, спасибо за урок

  • @sapfirko1
    @sapfirko1 2 года назад

    Для чего нужны генераторы? Где это можно использовать?

  • @s.konstantin
    @s.konstantin 5 лет назад +1

    Полезно, спасибо!

  • @sarxanabdullayev6440
    @sarxanabdullayev6440 Год назад

    Спасибо за урок🙂

  • @vasil_mullin
    @vasil_mullin 7 месяцев назад

    Спасибо, полезно!

  • @Ilja.Kiriljuk
    @Ilja.Kiriljuk 4 года назад +1

    Как же всё в голове ломается после обычных компилируемых ЯП, когда пытаешься вникнуть в JS
    Ощущение, будто мозгу наизнанку выворачиваешь

  • @lockd0wnll178
    @lockd0wnll178 5 лет назад

    Все очень доходчиво. Спасибо

  • @kirill-eremin
    @kirill-eremin 2 года назад

    Было полезно. Спасибо

  • @denislukin5138
    @denislukin5138 5 лет назад

    спасибо большое за полезный контент =)

  • @petiaduskin891
    @petiaduskin891 4 года назад

    Все понятно объяснено!

  • @slava91petrushinpetrushin7
    @slava91petrushinpetrushin7 5 лет назад

    Супер

  • @deanwichester6412
    @deanwichester6412 Год назад

    а где переменная i храниться если ее нет в объекте с методом next 10:36

    • @divisorZero
      @divisorZero Год назад +1

      Я так понимаю это про closure (замыкание). Функция `gen()` создаёт приватный контекст внутри себя - переменную `i` и возвращает из себя объект, внутри которого есть функция 'next', которая имеет доступ к этому контексту. Причём доступ к `i` имеет только функция `next`. Добраться к `i` по другому никак нельзя. И суть замыкания в том, что мы вызывали `iterator.gen()` - он вернул нам объект, в приватной видимости которого есть переменная `i`. Эта переменная существует ТОЛЬКО для этого объекта (ближайший слабый аналог - это приватное поле в классе). И переменная `i` сохраняется до тех пор, пока существует сам объект. Вот тут круто про замыкания ruclips.net/video/kizGhzeNE64/видео.html

  • @maxshmidt557
    @maxshmidt557 5 лет назад +2

    Про методы массива сделай пожалуйста видео.

    • @NextgenSocialReptile
      @NextgenSocialReptile 5 лет назад +3

      Max Shmidt хорошо, следующим видео

    • @maxshmidt557
      @maxshmidt557 5 лет назад

      @@NextgenSocialReptile Thanks a lot!

    • @multidotha
      @multidotha 5 лет назад

      @@NextgenSocialReptile Жду с нетерпением. Следующего видео.

  • @N5O1
    @N5O1 4 года назад +10

    нихера не понял, но было интересно

  • @PiskenDragen
    @PiskenDragen 3 года назад

    "Ничего не понял, но очень интересно"©, а если серьёзно - так и не понял где и зачем их использовать, ну кроме redux-saga и то только потому что так написано у них в доках =_=

  • @lastfornit
    @lastfornit 3 года назад

    я понял, как можно усложнить цикл for ещё одним способом. не понял зачем.
    или это только для того, чтоб вернуть набор объектов из функции и работать с ним в for of? пойду погуглю.

  • @torodinson5260
    @torodinson5260 4 года назад

    Подскажите пожалуйста как вы сделали такую подсветку ? Я про то, что скобки разных функций и блоков отображаются по разному

    • @VladilenMinin
      @VladilenMinin  4 года назад

      Глянь на канале курс по vscode

    • @torodinson5260
      @torodinson5260 4 года назад

      @@VladilenMinin хорошо. спасибо

  • @GANGST1ER
    @GANGST1ER 4 года назад

    Можно ли как в Python сгенерировать например двумерный массив? В Py одной строкой:
    arr = [0 for j in range(3)] for i in range(3)]
    Много кода получается.
    function gen() {
    let arr1 = [];
    for (let i = 0; i < 3; i++) {
    let arr2 = [];
    for (let j = 0; j < 3; j++) {
    arr2.push(0);
    }
    arr1.push(arr2);
    }
    return arr1;
    }
    const ar = gen();
    console.log(ar);

    • @404Negative
      @404Negative 10 месяцев назад

      const matrix = Array(3).fill([0, 0, 0])

  • @МаксимМухарёв-п8г
    @МаксимМухарёв-п8г 4 года назад

    Спасибо за крутые уроки. Вождение вопрос по генераторам.
    Я правильно понимаю, что список значений они генерируют инициализации. Допустим, я хочу получать из базы последовательно некоторые записи, пока они не закончатся. Генератор в этом случае не получится использовать?

  • @alexey1521
    @alexey1521 5 лет назад

    Кайф.

  • @terater179
    @terater179 5 лет назад

    Привет спасибо за видеоролики. Хотел спросить будет ли видос про декораторы?

  • @orangedragonthebestraper
    @orangedragonthebestraper Год назад

    Почему в самодельном гинераторе вывод value начинается с 1? а не с нуля как в оригинале?

    • @Alina-nq9nw
      @Alina-nq9nw Год назад

      ++I замените на i++, если нужно с 0

  • @dmitrijponkin
    @dmitrijponkin 5 лет назад

    Спасибо! Круто :)

  • @ibragimdaron4053
    @ibragimdaron4053 5 лет назад +1

    Здравствуйте, что за тема в vs code? разноцветные фигурные скобки - топ! Хочу такие же)

  • @anriat2141
    @anriat2141 3 года назад +3

    Остался только один вопрос: а нафига нужны генераторы? Даже не могу придумать реальный пример для использования.

    • @warm3840
      @warm3840 3 года назад +2

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

    • @awenn2015
      @awenn2015 Год назад

      @@warm3840 да, в ней есть определённый потенциал, осталось найти применение

  • @hutoryanin
    @hutoryanin 3 года назад

    *Л. а. й. к.*

  • @letzabelin
    @letzabelin 5 лет назад +6

    А на практике где используются генераторы?

    • @alexander5713
      @alexander5713 5 лет назад +5

      Как понимаю, Async/await это генераторы+промисы

    • @roman--s
      @roman--s 5 лет назад +13

      Для пользования некоторыми библиотеками. Redux Saga построена на генераторах к примеру. Это промежуточный слой между Iterator и Async/Await. На медиуме есть статья "Зачем они нужны в JavaScript? Symbol, Iterator, Generator" Там на пальцах описано что есть что и для чего.

    • @TheSmilewind
      @TheSmilewind 4 года назад

      При итерации большого пула.

  • @MIHANIZM56
    @MIHANIZM56 4 года назад +2

    не раскрыт функционал генератора когда передавая значения в метод next мы можем внутрь генератора пробросить какое то значение

  • @Давид-п8и
    @Давид-п8и 5 лет назад

    👍👍👍👍😊

  • @INYOUREYES
    @INYOUREYES 2 года назад +1

    думал что тупой но почитал коменты и понял что не я один не понял нахрена это надо....

  • @shershe_s
    @shershe_s 10 месяцев назад

    еще одна возможность JS которая будет использована мной примерно никогда :D

  • @it-coding
    @it-coding 4 года назад

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

    • @Civilizer1976
      @Civilizer1976 4 года назад

      Почему называет константу переменной? То-же интересно. Может дело привычки...

    • @it-coding
      @it-coding 4 года назад +1

      на самом деле let - если будет переопределение переменной
      const можно менять массив или объект , но не переопределять переменную

  • @xasspect5379
    @xasspect5379 4 месяца назад

    Итераторы - асинхронность для тех кто не любит себя?)

  • @alicemay4037
    @alicemay4037 Год назад

    Интересно, но пока что как-то бесполезно в практике(

  • @ЯрославКузнецов-р8д

    Раньше до async await пользовались генератора и, сейчас генераторы могут быть полезны разве что в php ИМХО

  • @iGotton
    @iGotton 5 лет назад +1

    +

  • @stephencurry8078
    @stephencurry8078 4 года назад

    Можно ДЗ под каждым видео?

  • @Fakeusert
    @Fakeusert 5 лет назад +3

    Точки с запятыми после выражений ставить нужно.

    • @user-lc3gn8qr5t
      @user-lc3gn8qr5t 4 года назад +2

      не обязательно... ES6+ поддерживает и такую запись. НО у меня вопрос, почему вы пишите это профессионалу? если это шутка, то прошу прощения. удачи

    • @Fakeusert
      @Fakeusert 4 года назад +3

      @@user-lc3gn8qr5t раздражает их отсутствие.

    • @iuriikharkovsky8928
      @iuriikharkovsky8928 3 года назад

      @@Fakeusert раздражает ваш коммент

    • @awenn2015
      @awenn2015 Год назад

      @@Fakeusert если они не обязательны то нахрена их ставить, в котлине вот умные, сразу избавились от них, они максимум нужны когда код в чистом виде интерпритируеться в сжатом виде, тогда лучше конечно ставить, а то ошибки будут

  • @Anton_Kac
    @Anton_Kac 2 года назад

    К сожалению не понятно

  • @imdimasan4268
    @imdimasan4268 2 года назад

    Достали на самом деле с примерами в которых циферки и буковки

  • @cao_dzecbi
    @cao_dzecbi Год назад

    10:13
    С таким количеством вложенности тебе надо не программирование преподавать, а курьером работать.

  • @artemijeka
    @artemijeka 2 года назад

    Спасибо!

  • @Civilizer1976
    @Civilizer1976 4 года назад

    +

  • @Алексей-т2х8й
    @Алексей-т2х8й 4 года назад

    +